diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-scroll-snap-2')
15 files changed, 169 insertions, 166 deletions
diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/resources/common.js b/testing/web-platform/tests/css/css-scroll-snap-2/resources/common.js index a641553bea..a3591d48ed 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/resources/common.js +++ b/testing/web-platform/tests/css/css-scroll-snap-2/resources/common.js @@ -8,32 +8,26 @@ function checkSnapEventSupport(event_type) { } } -// This function is deprecated. It tests a deprecated SnapEvent interface. -function assertSnapEventDeprecated(evt, expected_ids) { +function assertSnapEvent(evt, expected_ids) { assert_equals(evt.bubbles, false, "snap events don't bubble"); assert_false(evt.cancelable, "snap events are not cancelable."); - const actual = Array.from(evt.snapTargets, el => el.id).join(","); - const expected = expected_ids.join(","); - assert_equals(actual, expected, "snap event supplied expected targets"); + assert_equals(evt.snapTargetBlock, expected_ids.block, + "snap event supplied expected target in block axis"); + assert_equals(evt.snapTargetInline, expected_ids.inline, + "snap event supplied expected target in inline axis"); } -// This function is deprecated. It tests a deprecated SnapEvent interface. -// This function holds logic intended to be used by tests for scroll snap -// events. -// |test_data| should contain: -// - |scroller|: the snap container being scrolled (or -// document.scrollingElement) -// - |scrolling_function|: this function should trigger the desired snap event -// when executed. -// - |expected_snap_targets|: a list of element ids which the triggered snap -// event should supply in SnapEvent.snapTargets. -// - |expected_scroll_offsets|: the scroll offsets at which the snap container -// should be after scrolling function has been -// executed. -// |event_type|: should be "snapchanged" or "snapchanging". -async function test_snap_event_deprecated(test, test_data, event_type) { +async function snap_test_setup(test, scroller, event_type) { checkSnapEventSupport(event_type); - await waitForScrollReset(test, test_data.scroller); + await waitForScrollReset(test, scroller); + await waitForCompositorCommit(); + test.add_cleanup(async () => { + await waitForScrollReset(test, scroller); + }); +} + +async function test_snap_event(test, test_data, event_type) { + await snap_test_setup(test, test_data.scroller, event_type); let listener = test_data.scroller == document.scrollingElement ? document : test_data.scroller; @@ -42,7 +36,7 @@ async function test_snap_event_deprecated(test, test_data, event_type) { await test_data.scrolling_function(); let evt = await event_promise; - assertSnapEventDeprecated(evt, test_data.expected_snap_targets); + assertSnapEvent(evt, test_data.expected_snap_targets); assert_approx_equals(test_data.scroller.scrollTop, test_data.expected_scroll_offsets.y, 1, "vertical scroll offset mismatch."); @@ -52,7 +46,7 @@ async function test_snap_event_deprecated(test, test_data, event_type) { } async function test_snapchanged(test, test_data) { - await test_snap_event_deprecated(test, test_data, "snapchanged"); + await test_snap_event(test, test_data, "snapchanged"); } function waitForEventUntil(event_target, event_type, wait_until) { @@ -83,6 +77,20 @@ function waitForEventsUntil(event_target, event_type, wait_until) { }); } +function waitForOnSnapchanging(event_target) { + return new Promise(resolve => { + let result = null; + const listener = (evt) => { + result = evt; + }; + event_target.onsnapchanging = listener; + waitForScrollendEventNoTimeout(event_target).then(() => { + event_target.onsnapchanging = null; + resolve(result); + }); + }); +} + // Proxy a wait for a snap event. We want to avoid having a test // timeout in the event of an expected snap event not firing in a particular // test case as that would cause the entire file to fail. diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/resources/programmatic-scroll-common.js b/testing/web-platform/tests/css/css-scroll-snap-2/resources/programmatic-scroll-common.js new file mode 100644 index 0000000000..8257b98fe3 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/resources/programmatic-scroll-common.js @@ -0,0 +1,26 @@ +// Helper functions for snapchanged-on-programmatic-* tests. + +// Utility function to test that onsnapchanging is triggered for +// snapchanging-on-programmatic-* tests which set up a similar layout in which +// the |scroller| has 3 snap targets that form a vertical column along +// |scroller|'s middle. onsnapchanging should be triggered by conducting a +// programmatic scroll to the top of snap_target. +async function test_programmatic_scroll_onsnapchanging(test, + scroller, + event_target, + snap_target) { + await snap_test_setup(test, scroller, "snapchanging"); + const expected_snap_targets = { block: snap_target, inline: null }; + + // Scroll and wait for a snapchanging event. + const snapchanging_promise = waitForOnSnapchanging(event_target); + scroller.scrollTo(0, snap_target.offsetTop); + const snapchanging_event = await snapchanging_promise; + + // Assert that snapchanging fired and indicated that snap_target would + // be snapped to. + assertSnapEvent(snapchanging_event, expected_snap_targets); + assert_equals(scroller.scrollLeft, 0, "scrollLeft is zero"); + assert_equals(scroller.scrollTop, snap_target.offsetTop, + "snapped to snap_target"); +} diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/resources/user-scroll-common.js b/testing/web-platform/tests/css/css-scroll-snap-2/resources/user-scroll-common.js index 6587aebd92..820f143816 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/resources/user-scroll-common.js +++ b/testing/web-platform/tests/css/css-scroll-snap-2/resources/user-scroll-common.js @@ -68,4 +68,33 @@ async function test_no_snapchanged(t, scroller, delta) { async function test_no_snapchanging(t, scroller, delta) { await test_no_snap_event(t, scroller, delta, "snapchanging"); -}
\ No newline at end of file +} + +// Utility function to test that onsnapchanging is triggered for +// snapchanging-on-user-* tests which set up a similar layout in which +// the |scroller| has 3 snap targets that form a vertical column along +// |scroller|'s middle. onsnapchanging should be triggered by touch-dragging +// |scroller|'s content so that |snap_target|'s top aligns to |snap_target|. +async function test_user_scroll_onsnapchanging(test, scroller, event_target, + snap_target) { + await snap_test_setup(test, scroller, "snapchanging"); + + // Compute touch positions to drag the top of snap_target to the top of + // the scroller. + const scroller_middle = Math.round(scroller.clientWidth / 2); + const start_pos = { x: scroller_middle, y: snap_target.offsetTop }; + const end_pos = { x: scroller_middle, y: 0 }; + const expected_snap_targets = { block: snap_target, inline: null }; + + // Scroll and wait for a snapchanging event. + const snapchanging_promise = waitForOnSnapchanging(event_target); + await snap_event_touch_scroll_helper(start_pos, end_pos); + const snapchanging_event = await snapchanging_promise; + + // Assert that snapchanging fired and indicated that snap_target would + // be snapped to. + assertSnapEvent(snapchanging_event, expected_snap_targets); + assert_equals(scroller.scrollLeft, 0, "scrollLeft is zero"); + assert_equals(scroller.scrollTop, snap_target.offsetTop, + "snapped to snap_target"); +} diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-after-layout-change.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-after-layout-change.tentative.html index 4272412073..a3ba05fdf5 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-after-layout-change.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-after-layout-change.tentative.html @@ -81,7 +81,7 @@ inner_snap_area.style.height = `${scroller.clientHeight + inner_snap_area.clientHeight - 10}px`; const evt = await snapchanged_promise; - assertSnapEventDeprecated(evt, [outer_snap_area.id, inner_snap_area.id]); + assertSnapEvent(evt, { block: inner_snap_area, inline: null }); target_snap_position = inner_snap_area.offsetTop + inner_snap_area.offsetHeight - scroller.clientHeight; assert_equals(scroller.scrollTop, target_snap_position, @@ -107,7 +107,7 @@ inner_snap_area.style.height = `${scroller.clientHeight + inner_snap_area.clientHeight + 10}px`; const evt = await snapchanged_promise; - assertSnapEventDeprecated(evt, [outer_snap_area.id, inner_snap_area.id]); + assertSnapEvent(evt, { block: inner_snap_area, inline: null }); assert_equals(scroller.scrollTop, target_snap_position, "scroller maintains offset which is now covering within inner area"); }, "snapchanged fires after snap area is snapped to upon layout change " + @@ -119,11 +119,11 @@ let snapchanged_promise = waitForSnapChangedEvent(scroller, false); scroller.style.scrollSnapType = "none"; let evt = await snapchanged_promise; - assertSnapEventDeprecated(evt, []); + assertSnapEvent(evt, { block: null, inline: null }); snapchanged_promise = waitForSnapChangedEvent(scroller, false); scroller.style.scrollSnapType = "y mandatory"; evt = await snapchanged_promise; - assertSnapEventDeprecated(evt, [outer_snap_area.id]); + assertSnapEvent(evt, { block: outer_snap_area, inline: null }); }, "snapchanged fires when container stops snapping"); promise_test(async(t) => { @@ -133,12 +133,12 @@ inner_snap_area.style.scrollSnapAlign = "none"; outer_snap_area.style.scrollSnapAlign = "none"; let evt = await snapchanged_promise; - assertSnapEventDeprecated(evt, []); + assertSnapEvent(evt, { block: null, inline: null }); snapchanged_promise = waitForSnapChangedEvent(scroller, false); inner_snap_area.style.scrollSnapAlign = "start"; outer_snap_area.style.scrollSnapAlign = "start"; evt = await snapchanged_promise; - assertSnapEventDeprecated(evt, [outer_snap_area.id]); + assertSnapEvent(evt, { block: outer_snap_area, inline: null }); }, "snapchanged fires when snap container no longer has snap areas"); </script> </body> diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-ensures-dom-order.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-ensures-dom-order.html deleted file mode 100644 index f87b6137f1..0000000000 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-ensures-dom-order.html +++ /dev/null @@ -1,95 +0,0 @@ -<!DOCTYPE html> -<html> - -<head> - <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#snap-events" /> - <script src="/resources/testharness.js"></script> - <script src="/resources/testharnessreport.js"></script> - <script src="/dom/events/scrolling/scroll_support.js"></script> - <script src="/css/css-scroll-snap-2/resources/common.js"></script> - <script src="/web-animations/testcommon.js"></script> - <style> - #scroller { - overflow-y: scroll; - scroll-snap-type: y mandatory; - width: 500px; - height: 500px; - background-color: white; - position: relative; - } - .space_filler { - display: inline-block; - width: 40%; - height: 30%; - background-color: green; - } - .snap_area { - scroll-snap-align: start; - background-color: yellow; - position: absolute; - width: 40%; - height: 30%; - } - - #snap_point_1 { - left: 1px; - } - #snap_point_2 { - left: 80%; - } - #snap_point_3 { - left: 40%; - scroll-snap-align: start; - background-color: yellow; - position: absolute; - width: 40%; - height: 30%; - } - </style> -</head> -<body> - <div id="scroller"> - <div class="space_filler"></div> - <div class="space_filler"></div> - <div class="space_filler"></div> - <div class="space_filler"></div> - <div class="space_filler"></div> - <div class="space_filler"></div> - <div class="space_filler"></div> - <div class="space_filler"></div> - <div id="snap_point_1" class="snap_area"><h1>1</h1></div> - <div id="snap_point_2" class="snap_area"><h1>2</h1></div> - </div> - <script> - promise_test(async (t) => { - checkSnapEventSupport("snapchanged"); - await waitForCompositorCommit(); - const snapchanged_promise = waitForSnapChangedEvent(scroller, false); - const snap_point_3 = document.createElement("div"); - snap_point_3.id = "snap_point_3"; - t.add_cleanup(() => { - snap_point_3.remove(); - }); - scroller.insertBefore(snap_point_3, snap_point_2); - const evt_seen = await snapchanged_promise; - assertSnapEventDeprecated(evt_seen, - [snap_point_1.id, snap_point_3.id, snap_point_2.id]); - }, "snapchanged lists snapTargets in DOM order."); - - promise_test(async (t) => { - checkSnapEventSupport("snapchanged"); - await waitForCompositorCommit(); - const unreached_func = t.unreached_func("snapchanged shouldn't fire " + - "since the scroller is snapped to the same elements despite the " + - "dom order change."); - t.add_cleanup(() => { - scroller.removeEventListener("snapchanged", unreached_func); - }) - scroller.addEventListener("snapchanged", unreached_func); - scroller.insertBefore(snap_point_2, snap_point_1); - await waitForCompositorCommit(); - }, "DOM order change doesn't trigger snapchanged if snapped targets " + - "don't change."); - </script> -</body> -</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-root-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-root-scroll.tentative.html index 7c7b48152e..98ec2e5d75 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-root-scroll.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-root-scroll.tentative.html @@ -69,7 +69,7 @@ scrolling_function: () => { scroller.scrollTo(snap_point_2.offsetLeft, snap_point_2.offsetTop); }, - expected_snap_targets: [snap_point_2.id], + expected_snap_targets: { block: snap_point_2, inline: snap_point_2 }, expected_scroll_offsets: { x: snap_point_2.offsetLeft, y: snap_point_2.offsetTop, @@ -110,7 +110,7 @@ scroller.scrollTo(scroll_left_target, scroll_top_target); evt = await snapchanged_promise; - assertSnapEventDeprecated(evt, [snap_point_2.id]); + assertSnapEvent(evt, { block: snap_point_2, inline: snap_point_2 }); assert_approx_equals(scroller.scrollTop, snap_point_2.offsetTop, 1, "scroller snaps to the top of snap_point_2"); assert_approx_equals(scroller.scrollLeft, snap_point_2.offsetLeft, 1, diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-scroll.tentative.html index 1fb56212a3..9dff856f34 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-scroll.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-scroll.tentative.html @@ -76,7 +76,7 @@ scrolling_function: () => { scroller.scrollTo(snap_point_2.offsetLeft, snap_point_2.offsetTop); }, - expected_snap_targets: [snap_point_2.id], + expected_snap_targets: { block: snap_point_2, inline: snap_point_2 }, expected_scroll_offsets: { x: snap_point_2.offsetLeft, y: snap_point_2.offsetTop, @@ -115,7 +115,7 @@ scroller.scrollTo(scroll_left_target, scroll_top_target); evt = await snapchanged_promise; - assertSnapEventDeprecated(evt, [snap_point_2.id]); + assertSnapEvent(evt, { block: snap_point_2, inline: snap_point_2 }) assert_approx_equals(scroller.scrollTop, snap_point_2.offsetTop, 1, "scroller snaps to the top of snap_point_2"); assert_approx_equals(scroller.scrollLeft, snap_point_2.offsetLeft, 1, diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-root-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-root-scroll.tentative.html index 5405d778bf..127376caa2 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-root-scroll.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-root-scroll.tentative.html @@ -64,6 +64,8 @@ <div id="snap_point_3" class="snap_point"></div> <script> const scroller = document.scrollingElement; + const snap_point_2 = document.getElementById("snap_point_2"); + const snap_point_1 = document.getElementById("snap_point_1"); const offset_to_snap_point_2 = { x: snap_point_2.offsetLeft, y: snap_point_2.offsetTop @@ -82,7 +84,7 @@ scrolling_function: async () => { await snap_event_touch_scroll_helper(start_pos, end_pos); }, - expected_snap_targets: [snap_point_2.id], + expected_snap_targets: { block: snap_point_2, inline: snap_point_2 }, expected_scroll_offsets: { x: offset_to_snap_point_2.x, y: offset_to_snap_point_2.y, @@ -102,7 +104,7 @@ offset_to_snap_point_2.y, { origin: scroller }).send(); }, - expected_snap_targets: [snap_point_2.id], + expected_snap_targets: { block: snap_point_2, inline: snap_point_2 }, expected_scroll_offsets: { x: offset_to_snap_point_2.x, y: offset_to_snap_point_2.y, @@ -132,7 +134,7 @@ await snap_event_scrollbar_drag_helper(scroller, scrollbar_width, drag_amt); }, - expected_snap_targets: [snap_point_1.id, snap_point_2.id], + expected_snap_targets: { block: snap_point_2, inline: snap_point_1 }, expected_scroll_offsets: { x: 0, y: offset_to_snap_point_2.y, @@ -150,7 +152,7 @@ window.test_driver.send_keys(document.documentElement, '\ue015'/*ArrowDown*/); }, - expected_snap_targets: [snap_point_1.id, snap_point_2.id], + expected_snap_targets: { block: snap_point_2, inline: snap_point_1 }, expected_scroll_offsets: { x: 0, y: offset_to_snap_point_2.y, diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-scroll.tentative.html index 4f36200722..91194642b5 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-scroll.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-scroll.tentative.html @@ -71,6 +71,8 @@ </div> <script> const scroller = document.getElementById("scroller"); + const snap_point_1 = document.getElementById("snap_point_1"); + const snap_point_2 = document.getElementById("snap_point_2"); const offset_to_snap_point_2 = { x: snap_point_2.offsetLeft, y: snap_point_2.offsetTop @@ -89,7 +91,7 @@ scrolling_function: async () => { await snap_event_touch_scroll_helper(start_pos, end_pos); }, - expected_snap_targets: [snap_point_2.id], + expected_snap_targets: { block: snap_point_2, inline: snap_point_2 }, expected_scroll_offsets: { x: offset_to_snap_point_2.x, y: offset_to_snap_point_2.y, @@ -109,7 +111,7 @@ offset_to_snap_point_2.y, { origin: scroller }).send(); }, - expected_snap_targets: [snap_point_2.id], + expected_snap_targets: { block: snap_point_2, inline: snap_point_2 }, expected_scroll_offsets: { x: offset_to_snap_point_2.x, y: offset_to_snap_point_2.y, @@ -136,7 +138,7 @@ scrollbar_to_scroller_ratio; await snap_event_scrollbar_drag_helper(scroller, scrollbar_width, drag_amt); }, - expected_snap_targets: [snap_point_1.id, snap_point_2.id], + expected_snap_targets: { block: snap_point_2, inline: snap_point_1 }, expected_scroll_offsets: { x: 0, y: offset_to_snap_point_2.y, @@ -154,7 +156,7 @@ scroller.focus(); window.test_driver.send_keys(scroller, '\ue015'/*ArrowDown*/); }, - expected_snap_targets: [snap_point_1.id, snap_point_2.id], + expected_snap_targets: { block: snap_point_2, inline: snap_point_1 }, expected_scroll_offsets: { x: 0, y: offset_to_snap_point_2.y, diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-with-proximity-strictness.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-with-proximity-strictness.tentative.html index 6a874e82f2..96cab33739 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-with-proximity-strictness.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-with-proximity-strictness.tentative.html @@ -61,7 +61,7 @@ // to outside the proximity range and are no longer snapped. let evt = await snapchanged_promise; assert_equals(scroller.scrollTop, 250); - assertSnapEventDeprecated(evt, []); + assertSnapEvent(evt, { block: null, inline: null }); evt = null; snapchanged_promise = waitForSnapChangedEvent(scroller); @@ -73,7 +73,7 @@ assert_equals(scroller.scrollTop, 0); // snapchanged should fire as we've moved from outside the proximity range // to inside the proximity range and are once again snapped. - assertSnapEventDeprecated(evt, [target.id]); + assertSnapEvent(evt, { block: target, inline: null }); }, "Snapchanged fires when scrolling outside proximity range."); </script> </body> diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-after-layout-change.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-after-layout-change.tentative.html index ff307981e8..0c0bfb623e 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-after-layout-change.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-after-layout-change.tentative.html @@ -102,7 +102,7 @@ // assert snapchanging that should have already happened. await scroll_promise; - assertSnapEventDeprecated(snap_evt, [box2.id]); + assertSnapEvent(snap_evt, { block: null, inline: box2 }); evt_promise = waitForSnapEvent(scroller, "snapchanging", false); // Change layout while pointer is still down. @@ -111,7 +111,7 @@ box2.style.left = box3_prev_left; box3.style.left = box2_prev_left; snap_evt = await evt_promise; - assertSnapEventDeprecated(snap_evt, [box3.id]); + assertSnapEvent(snap_evt, { block: null, inline: box3 }); }, "snapchanging fires after layout change"); </script> </body> diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-root-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-root-scroll.tentative.html index 7044cfac96..b714a6cfb5 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-root-scroll.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-root-scroll.tentative.html @@ -9,6 +9,7 @@ <script src="/resources/testdriver-vendor.js"></script> <script src="/dom/events/scrolling/scroll_support.js"></script> <script src="/css/css-scroll-snap-2/resources/common.js"></script> + <script src="/css/css-scroll-snap-2/resources/programmatic-scroll-common.js"></script> ß <script src="/web-animations/testcommon.js"></script> </head> @@ -66,6 +67,7 @@ <div id="snap_area_3" class="yellow snap box"></div> <script> const scroller = document.scrollingElement; + const snap_area_2 = document.getElementById("snap_area_2"); promise_test(async (t) => { await waitForCompositorCommit(); @@ -74,17 +76,23 @@ scrolling_function: async () => { scroller.scrollTo(0, snap_area_2.offsetTop); }, - expected_snap_targets: [snap_area_2.id], + expected_snap_targets: { block: snap_area_2, inline: null }, expected_scroll_offsets: { x: 0, y: snap_area_2.offsetTop } }; - await test_snap_event_deprecated(t, test_data, "snapchanging"); + await test_snap_event(t, test_data, "snapchanging"); }, "snapchanging fires on programmatic scrolls that changes a scroller's" + " snap targets."); promise_test(async (t) => { + await test_programmatic_scroll_onsnapchanging(t, scroller, document, + snap_area_2); + }, "programmatic scroll triggers Document.snapchanging when scrolling a " + + "snap container"); + + promise_test(async (t) => { checkSnapEventSupport("snapchanging"); await waitForScrollReset(t, scroller); await waitForCompositorCommit(); diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-scroll.tentative.html index 86946b84e9..6e7b0126f7 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-scroll.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-scroll.tentative.html @@ -9,6 +9,7 @@ <script src="/resources/testdriver-vendor.js"></script> <script src="/dom/events/scrolling/scroll_support.js"></script> <script src="/css/css-scroll-snap-2/resources/common.js"></script> + <script src="/css/css-scroll-snap-2/resources/programmatic-scroll-common.js"></script> <script src="/web-animations/testcommon.js"></script> </head> @@ -73,6 +74,7 @@ </div> <script> const scroller = document.getElementById("scroller"); + const snap_area_2 = document.getElementById("snap_area_2"); promise_test(async (t) => { await waitForCompositorCommit(); @@ -81,17 +83,23 @@ scrolling_function: async () => { scroller.scrollTo(0, snap_area_2.offsetTop); }, - expected_snap_targets: [snap_area_2.id], + expected_snap_targets: { block: snap_area_2, inline: null }, expected_scroll_offsets: { x: 0, y: snap_area_2.offsetTop } }; - await test_snap_event_deprecated(t, test_data, "snapchanging"); + await test_snap_event(t, test_data, "snapchanging"); }, "snapchanging fires on programmatic scrolls that changes a scroller's" + " snap targets."); promise_test(async (t) => { + await test_programmatic_scroll_onsnapchanging(t, scroller, scroller, + snap_area_2); + }, "programmatic scroll triggers Element.onsnapchanging when scrolling a " + + "snap container"); + + promise_test(async (t) => { checkSnapEventSupport("snapchanging"); await waitForScrollReset(t, scroller); await waitForCompositorCommit(); @@ -106,7 +114,7 @@ assert_equals(evt, null, "no snap event since scroller is back to top"); assert_equals(scroller.scrollTop, 0, "scroller snaps back to the top"); assert_equals(scroller.scrollLeft, 0, "scroller snaps back to the left"); - }); + }, "snapchanging should not fire since the snap target doesn't change."); </script> </body> diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-root-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-root-scroll.tentative.html index a9b003e6c5..815c3c0922 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-root-scroll.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-root-scroll.tentative.html @@ -74,6 +74,8 @@ <div id="snap_area_3" class="yellow snap box"></div> <script> const scroller = document.scrollingElement; + const snap_area_2 = document.getElementById("snap_area_2"); + const snap_area_1 = document.getElementById("snap_area_1"); // Touch scroll test. promise_test(async (t) => { @@ -86,13 +88,13 @@ const end_pos = { x: scroller_middle, y: 0 }; await snap_event_touch_scroll_helper(start_pos, end_pos); }, - expected_snap_targets: [snap_area_2.id], + expected_snap_targets: { block: snap_area_2, inline: null }, expected_scroll_offsets: { x: 0, y: snap_area_2.offsetTop } }; - await test_snap_event_deprecated(t, test_data, "snapchanging"); + await test_snap_event(t, test_data, "snapchanging"); }, "touch scrolling fires snapchanging."); // Wheel scroll test. @@ -104,13 +106,13 @@ await new test_driver.Actions().scroll(0, 0, 0, Math.round(snap_area_2.offsetTop / 2) + 1).send(); }, - expected_snap_targets: [snap_area_2.id], + expected_snap_targets: { block: snap_area_2, inline: null }, expected_scroll_offsets: { x: 0, y: snap_area_2.offsetTop } }; - await test_snap_event_deprecated(t, test_data, "snapchanging"); + await test_snap_event(t, test_data, "snapchanging"); }, "mouse wheel scroll triggers snapchanging."); // Scrollbar drag test. @@ -130,13 +132,13 @@ scrollbar_to_scroller_ratio; await snap_event_scrollbar_drag_helper(scroller, scrollbar_width, drag_amt); }, - expected_snap_targets: [snap_area_2.id], + expected_snap_targets: { block: snap_area_2, inline: null }, expected_scroll_offsets: { x: 0, y: snap_area_2.offsetTop } }; - await test_snap_event_deprecated(t, test_data, "snapchanging"); + await test_snap_event(t, test_data, "snapchanging"); }, "scrollbar dragging fires snapchanging."); // Keyboard test. @@ -148,15 +150,20 @@ scroller.focus(); window.test_driver.send_keys(document.documentElement, '\ue015'/*ArrowDown*/); }, - expected_snap_targets: [snap_area_2.id], + expected_snap_targets: { block: snap_area_2, inline: null }, expected_scroll_offsets: { x: 0, y: snap_area_2.offsetTop } }; - await test_snap_event_deprecated(t, test_data, "snapchanging"); + await test_snap_event(t, test_data, "snapchanging"); }, "keyboard scroll triggers snapchanging."); + promise_test(async (t) => { + await test_user_scroll_onsnapchanging(t, scroller, document, + snap_area_2); + }, "Document.onsnapchanging fires when scrolling a snap container."); + // Touch scroll test: peek at snap_area_2 and then drag back to // snap_area_1. promise_test(async (t) => { @@ -183,8 +190,8 @@ .send(); let evts = await evts_promise; assert_equals(evts.length, 2, "2 snapchanging events are seens"); - assertSnapEventDeprecated(evts[0], [snap_area_2.id]); - assertSnapEventDeprecated(evts[1], [snap_area_1.id]); + assertSnapEvent(evts[0], { block: snap_area_2, inline: null }); + assertSnapEvent(evts[1], { block: snap_area_1, inline: null }); }, "snapchanging fires as scroll moves through different snap targets."); // snapchanging doesn't fire test. diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-scroll.tentative.html index 28ca96ec93..27f52efc71 100644 --- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-scroll.tentative.html +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-scroll.tentative.html @@ -9,6 +9,7 @@ <script src="/dom/events/scrolling/scroll_support.js"></script> <script src="/css/css-scroll-snap-2/resources/common.js"></script> <script src="/css/css-scroll-snap-2/resources/user-scroll-common.js"></script> + <script src="/web-animations/testcommon.js"></script> </head> <body> @@ -63,6 +64,8 @@ </div> <script> const scroller = document.getElementById("scroller"); + const snap_area_2 = document.getElementById("snap_area_2"); + const snap_area_1 = document.getElementById("snap_area_1"); // Touch scroll test. promise_test(async (t) => { @@ -75,13 +78,13 @@ const end_pos = { x: scroller_middle, y: 0 }; await snap_event_touch_scroll_helper(start_pos, end_pos); }, - expected_snap_targets: [snap_area_2.id], + expected_snap_targets: { block: snap_area_2, inline: null }, expected_scroll_offsets: { x: 0, y: snap_area_2.offsetTop } }; - await test_snap_event_deprecated(t, test_data, "snapchanging"); + await test_snap_event(t, test_data, "snapchanging"); }, "touch scrolling fires snapchanging."); // Wheel scroll test. @@ -94,13 +97,13 @@ Math.round(snap_area_2.offsetTop / 2) + 1, { origin: scroller }).send(); }, - expected_snap_targets: [snap_area_2.id], + expected_snap_targets: { block: snap_area_2, inline: null }, expected_scroll_offsets: { x: 0, y: snap_area_2.offsetTop } }; - await test_snap_event_deprecated(t, test_data, "snapchanging"); + await test_snap_event(t, test_data, "snapchanging"); }, "mouse wheel scroll triggers snapchanging."); // Scrollbar drag test. @@ -121,13 +124,13 @@ scrollbar_to_scroller_ratio; await snap_event_scrollbar_drag_helper(scroller, scrollbar_width, drag_amt); }, - expected_snap_targets: [snap_area_2.id], + expected_snap_targets: { block: snap_area_2, inline: null }, expected_scroll_offsets: { x: 0, y: snap_area_2.offsetTop } }; - await test_snap_event_deprecated(t, test_data, "snapchanging"); + await test_snap_event(t, test_data, "snapchanging"); }, "scrollbar dragging fires snapchanging."); // Keyboard test. @@ -139,13 +142,13 @@ scroller.focus(); window.test_driver.send_keys(scroller, '\ue015'/*ArrowDown*/); }, - expected_snap_targets: [snap_area_2.id], + expected_snap_targets: { block: snap_area_2, inline: null }, expected_scroll_offsets: { x: 0, y: snap_area_2.offsetTop } }; - await test_snap_event_deprecated(t, test_data, "snapchanging"); + await test_snap_event(t, test_data, "snapchanging"); }, "keyboard scroll triggers snapchanging."); // Touch scroll test: peek at snap_area_2 and then drag back to @@ -174,10 +177,15 @@ .send(); let evts = await evts_promise; assert_equals(evts.length, 2, "2 snapchanging events are seens"); - assertSnapEventDeprecated(evts[0], [snap_area_2.id]); - assertSnapEventDeprecated(evts[1], [snap_area_1.id]); + assertSnapEvent(evts[0], { block: snap_area_2, inline: null }); + assertSnapEvent(evts[1], { block: snap_area_1, inline: null }); }, "snapchanging fires as scroll moves through different snap targets."); + promise_test(async (t) => { + await test_user_scroll_onsnapchanging(t, scroller, scroller, + snap_area_2); + }, "Element.onsnapchanging fires when scrolling a snap container."); + // snapchanging doesn't fire test. promise_test(async (t) => { test_no_snapchanging(t, scroller, 10); |