diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-scroll-snap-2/snapchanged')
5 files changed, 161 insertions, 0 deletions
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 98ec2e5d75..8360369422 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 @@ -8,6 +8,7 @@ <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.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="/dom/events/scrolling/scroll_support.js"></script> <script src="/web-animations/testcommon.js"></script> </head> @@ -61,6 +62,7 @@ <script> let scroller = document.scrollingElement; + let snap_point_2 = document.getElementById("snap_point_2"); promise_test(async (t) => { await waitForCompositorCommit(); @@ -79,6 +81,23 @@ }, "snapchanged event fires after snap target changes via scrollTo"); promise_test(async (t) => { + await waitForCompositorCommit(); + const test_data = { + scroller: scroller, + scrolling_function: () => { + scroller.scrollTo(snap_point_2.offsetLeft, snap_point_2.offsetTop); + }, + expected_snap_targets: { block: snap_point_2, inline: snap_point_2 }, + expected_scroll_offsets: { + x: snap_point_2.offsetLeft, + y: snap_point_2.offsetTop, + } + }; + await test_snapchanged(t, test_data, /*use_onsnap_member*/true); + }, "Document.onsnapchanged event fires after snap target changes via" + + "scrollTo"); + + promise_test(async (t) => { checkSnapEventSupport("snapchanged"); await waitForScrollReset(t, scroller); await waitForCompositorCommit(); 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 9dff856f34..2b2e6a77c5 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 @@ -8,6 +8,7 @@ <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.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="/dom/events/scrolling/scroll_support.js"></script> <script src="/web-animations/testcommon.js"></script> </head> @@ -68,6 +69,7 @@ <script> function runTests () { let scroller = document.getElementById("scroller"); + let snap_point_2 = document.getElementById("snap_point_2"); promise_test(async (t) => { await waitForCompositorCommit(); @@ -86,6 +88,23 @@ }, "snapchanged event fires after snap target changes via scrollTo"); promise_test(async (t) => { + await waitForCompositorCommit(); + const test_data = { + scroller: scroller, + scrolling_function: () => { + scroller.scrollTo(snap_point_2.offsetLeft, snap_point_2.offsetTop); + }, + expected_snap_targets: { block: snap_point_2, inline: snap_point_2 }, + expected_scroll_offsets: { + x: snap_point_2.offsetLeft, + y: snap_point_2.offsetTop, + } + }; + await test_snapchanged(t, test_data, /*use_onsnap_member*/true); + }, "Element.onsnapchanged event fires after snap target changes via" + + "scrollTo"); + + promise_test(async (t) => { checkSnapEventSupport("snapchanged"); await waitForScrollReset(t, scroller); await waitForCompositorCommit(); 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 127376caa2..a59d9c5859 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 @@ -161,6 +161,29 @@ await test_snapchanged(t, test_data); }, "snapchanged event fires after snap target changes on keydown press"); + // Touch scroll test (onsnapchanged variant). + promise_test(async (t) => { + await waitForCompositorCommit(); + const start_pos = { + x: scroller.clientWidth / 2, + y: scroller.clientHeight / 2, + }; + const end_pos = { x: 0, y: 0 }; + const test_data = { + scroller: scroller, + scrolling_function: async () => { + await snap_event_touch_scroll_helper(start_pos, end_pos); + }, + 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, + } + }; + await test_snapchanged(t, test_data, /*use_onsnap_memeber*/true); + }, "Document.snapchanged event fires after snap target changes on touch " + + "scroll"); + promise_test(async (t) => { await test_no_snapchanged(t, scroller, /*delta*/10); }, "snapchanged is not fired if snap target doesn't change on user scroll"); 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 91194642b5..d2c2789c88 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 @@ -165,6 +165,29 @@ await test_snapchanged(t, test_data); }, "snapchanged event fires after snap target changes on keydown press"); + // Touch scroll test (onsnapchanged variant). + promise_test(async (t) => { + await waitForCompositorCommit(); + const start_pos = { + x: scroller.clientWidth / 2, + y: scroller.clientHeight / 2, + }; + const end_pos = { x: 0, y: 0 }; + const test_data = { + scroller: scroller, + scrolling_function: async () => { + await snap_event_touch_scroll_helper(start_pos, end_pos); + }, + 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, + } + }; + await test_snapchanged(t, test_data, /*use_onsnap_memeber*/true); + }, "Element.onsnapchanged event fires after snap target changes on touch " + + "scroll"); + promise_test(async (t) => { await test_no_snapchanged(t, scroller, /*delta*/10); }, "snapchanged is not fired if snap target doesn't change on user scroll"); diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-scrolling-non-snapping-axis.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-scrolling-non-snapping-axis.tentative.html new file mode 100644 index 0000000000..e39fc0c44e --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-scrolling-non-snapping-axis.tentative.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> + <head> + <title> CSS Scroll Snap 2 Test: snapchanged events</title> + <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="/resources/testdriver.js"></script> + <script src="/resources/testdriver-actions.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/css/css-scroll-snap-2/resources/common.js"></script> + <script src="/dom/events/scrolling/scroll_support.js"></script> + <script src="/css/css-scroll-snap/support/common.js"></script> + </head> + <body> + <style> + .scroller { + overflow: scroll; + width: 200px; + height: 200px; + border: solid 1px black; + scroll-snap-type: y mandatory; + position: absolute; + resize: both; + } + .snaparea { + scroll-snap-align: start; + height: 50px; + width: 50px; + color: white; + margin-top: 100px; + background-color: purple; + } + .space { + height: 300vh; + width: 300vw; + position: absolute; + } + </style> + <div class="scroller" id="scroller"> + <div class="space"></div> + <div class="snaparea"> Area2</div> + <div class="snaparea"> Area1</div> + </div> + + <script> + promise_test(async (t) => { + await waitForCompositorCommit(); + + scroller.focus(); + + const snapchanged_promise = waitForSnapEvent(scroller, "snapchanged"); + await test_driver.send_keys(scroller, KEY_CODE_MAP["ArrowRight"]); + const snap_event = await snapchanged_promise; + + assert_equals(snap_event, null, "no snapchanged event fired as " + + "scroller doesn't snap in the x axis"); + }, "keyboard scroll on non-snapping axis doesn't trigger snapchanged"); + + promise_test(async (t) => { + await waitForScrollReset(t, scroller); + await waitForCompositorCommit(); + scroller.focus(); + + const snapchanged_promise = waitForSnapEvent(scroller, "snapchanged"); + const wheel_scroll_amount = 25; + new test_driver.Actions().scroll(0, 0, + wheel_scroll_amount, + 0, + { origin: scroller }).send(); + const snap_event = await snapchanged_promise; + assert_equals(snap_event, null, "no snapchanged event fired as " + + "scroller doesn't snap in the x axis"); + }, "wheel scroll on non-snapping axis doesn't trigger snapchanged"); + </script> + </body> +</html> |