diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-scroll-snap-2/snapchanging | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-scroll-snap-2/snapchanging')
5 files changed, 722 insertions, 0 deletions
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 new file mode 100644 index 0000000000..5474b7ddce --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-after-layout-change.tentative.html @@ -0,0 +1,118 @@ +<!DOCTYPE html> +<html> +<head> + <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="/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> + <style> + body { + margin: 0px; + } + #space { + height: 200vh; + width: 200vw; + } + .scroller { + scroll-snap-type: x mandatory; + overflow-x: auto; + overflow-y: hidden; + position: relative; + height: 500px; + width: 500px; + } + + .box { + scroll-snap-align: start; + height: 100px; + width: 100px; + position: absolute; + top: 200px; + } + + #box1 { + background-color: red; + } + + #box2 { + background-color: yellow; + left: 200px; + } + + #box3 { + background-color: blue; + left: 400px; + } + </style> +</head> +<body> + <div id="scroller" class="scroller"> + <div id="space"></div> + <div id="box1" class="box"><h1>1</h1></div> + <div id="box2" class="box"><h1>2</h1></div> + <div id="box3" class="box"><h1>3</h1></div> + </div> + <script> + const scroller = document.getElementById("scroller"); + promise_test(async (t) => { + // This tests snapchanging firing after a layout change in the middle of a + // touch scroll. We start a touch scroll far enough that snapchanging + // fires and then, with the pointer still down, we change the layout so + // that snapchanging should fire with a different target. + await waitForScrollReset(t, scroller); + await waitForCompositorCommit(); + + const start_pos_x = Math.round(box2.offsetLeft); + // Drag by enough to ensure box2 is the preferred snap target. + const drag_amt = Math.round(box2.offsetLeft / 2) + 50; + const end_pos_x = start_pos_x - drag_amt; + const pos_y = Math.round(scroller.clientHeight / 2); + let evt_promise; + let snap_evt; + + const save_snapchanging_evt = (evt) => { snap_evt = evt; } + evt_promise = scroller.addEventListener("snapchanging", + save_snapchanging_evt); + // We wait to reach the expected scroll position rather than waiting for a + // snapchanging event to avoid timing out if the snapchanging event does + // not fire. + const scroll_promise = new Promise((resolve) => { + scroller.addEventListener("scroll", async () => { + if (scroller.scrollLeft >= (box2.offsetLeft / 2)) { + await waitForAnimationFrames(2); + resolve(); + } + }); + }); + + await new test_driver.Actions() + .addPointer("TestPointer", "touch") + .pointerMove(start_pos_x, pos_y) + .pointerDown() + .addTick() + .pause(200) + // Drag closer to box2, which should trigger a snapchanging event. + .pointerMove(start_pos_x - drag_amt, pos_y) + .send(); + + // assert snapchanging that should have already happened. + await scroll_promise; + assertSnapEvent(snap_evt, [box2.id]); + + evt_promise = waitForSnapEvent(scroller, "snapchanging", false); + // Change layout while pointer is still down. + let box2_prev_left = getComputedStyle(box2).getPropertyValue("left"); + let box3_prev_left = getComputedStyle(box3).getPropertyValue("left"); + box2.style.left = box3_prev_left; + box3.style.left = box2_prev_left; + snap_evt = await evt_promise; + assertSnapEvent(snap_evt, [box3.id]); + }, "snapchanging fires after layout change"); + </script> +</body> +</html>
\ No newline at end of file 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 new file mode 100644 index 0000000000..d031811c17 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-root-scroll.tentative.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<html> + +<head> + <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="/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> +</head> + +<body> + <style> + :root { + scroll-snap-type: y mandatory; + } + + .box { + position: absolute; + left: 150px; + height: 80vh; + width: 100px; + border: solid 1px white; + } + + .snap { + scroll-snap-align: start; + } + + .blue { + background-color: blue; + } + + .green { + background-color: green; + } + + .yellow { + background-color: yellow; + } + + #snap_area_1 { + top: 0px; + } + + #snap_area_2 { + top: calc(80vh + 2px); + } + + #snap_area_3 { + top: calc(160vh + 4px); + } + + .large_space { + height: 400vh; + width: 400vw; + position: absolute; + } + </style> + <div class="large_space"></div> + <div id="snap_area_1" class="blue snap box"></div> + <div id="snap_area_2" class="green snap box"></div> + <div id="snap_area_3" class="yellow snap box"></div> + <script> + const scroller = document.scrollingElement; + + promise_test(async (t) => { + await waitForCompositorCommit(); + const test_data = { + scroller: scroller, + scrolling_function: async () => { + scroller.scrollTo(0, snap_area_2.offsetTop); + }, + expected_snap_targets: [snap_area_2.id], + expected_scroll_offsets: { + x: 0, + y: snap_area_2.offsetTop + } + }; + await test_snap_event(t, test_data, "snapchanging"); + }, "snapchanging fires on programmatic scrolls that changes a scroller's" + + " snap targets."); + + promise_test(async (t) => { + checkSnapEventSupport("snapchanging"); + await waitForScrollReset(t, scroller); + await waitForCompositorCommit(); + let snap_event_promise = waitForSnapEvent(document, "snapchanging", false); + // The snap areas are far apart enough that 10px is not enough to trigger + // a change in snap targets. + const small_scroll_offset = 10; + scroller.scrollTo(0, small_scroll_offset); + let evt = await snap_event_promise; + 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 does not fire on programmatic scrolls that don't " + + "trigger a change in snap targets."); + </script> +</body> + +</html> 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 new file mode 100644 index 0000000000..5a0de1deb3 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-scroll.tentative.html @@ -0,0 +1,113 @@ +<!DOCTYPE html> +<html> + +<head> + <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="/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> +</head> + +<body> + <style> + #scroller { + height: 400px; + width: 400px; + position: relative; + overflow: scroll; + scroll-snap-type: y mandatory; + border: solid 1px black; + } + + .box { + position: absolute; + left: 150px; + height: 350px; + width: 100px; + border: solid 1px white; + } + + .snap { + scroll-snap-align: start; + } + + .blue { + background-color: blue; + } + + .green { + background-color: green; + } + + .yellow { + background-color: yellow; + } + + #snap_area_1 { + top: 0px; + } + + #snap_area_2 { + top: 352px; + } + + #snap_area_3 { + top: 704px; + } + + .large_space { + height: 400vh; + width: 400vw; + position: absolute; + } + </style> + <div id="scroller"> + <div class="large_space"></div> + <div id="snap_area_1" class="blue snap box"></div> + <div id="snap_area_2" class="green snap box"></div> + <div id="snap_area_3" class="yellow snap box"></div> + </div> + <script> + const scroller = document.getElementById("scroller"); + + promise_test(async (t) => { + await waitForCompositorCommit(); + const test_data = { + scroller: scroller, + scrolling_function: async () => { + scroller.scrollTo(0, snap_area_2.offsetTop); + }, + expected_snap_targets: [snap_area_2.id], + expected_scroll_offsets: { + x: 0, + y: snap_area_2.offsetTop + } + }; + await test_snap_event(t, test_data, "snapchanging"); + }, "snapchanging fires on programmatic scrolls that changes a scroller's" + + " snap targets."); + + promise_test(async (t) => { + checkSnapEventSupport("snapchanging"); + await waitForScrollReset(t, scroller); + await waitForCompositorCommit(); + let snap_event_promise = waitForSnapEvent(scroller, "snapchanging", false); + // The snap areas are far apart enough that 10px is not enough to trigger + // a change in snap targets. + const small_scroll_offset = 10; + // Set the scroll destination to just a little off (0, 0) top so we snap + // back to the top box. + scroller.scrollTo(0, small_scroll_offset); + let evt = await snap_event_promise; + 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"); + }); + </script> +</body> + +</html> 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 new file mode 100644 index 0000000000..29d0239e2d --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-root-scroll.tentative.html @@ -0,0 +1,198 @@ +<!DOCTYPE html> +<html> + +<head> + <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="/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> +</head> + +<body> + <style> + :root { + scroll-snap-type: y mandatory; + } + #scroller { + height: 400px; + width: 400px; + position: relative; + overflow: scroll; + scroll-snap-type: y mandatory; + border: solid 1px black; + } + + .box { + position: absolute; + left: 150px; + height: 80vh; + width: 100px; + border: solid 1px white; + } + + .snap { + scroll-snap-align: start; + } + + .blue { + background-color: blue; + } + + .green { + background-color: green; + } + + .yellow { + background-color: yellow; + } + + #snap_area_1 { + top: 0px; + } + + #snap_area_2 { + top: calc(80vh + 2px); /* height of snap_area_1 + its borders. */ + } + + #snap_area_3 { + top: calc(160vh + 4px); /* heights of snap areas 1 & 2 + their borders */ + } + + .large_space { + height: 400vh; + width: 400vw; + position: absolute; + } + </style> + <div class="large_space"></div> + <div id="snap_area_1" class="blue snap box"></div> + <div id="snap_area_2" class="green snap box"></div> + <div id="snap_area_3" class="yellow snap box"></div> + <script> + const scroller = document.scrollingElement; + + // Touch scroll test. + promise_test(async (t) => { + await waitForCompositorCommit(); + const scroller_middle = Math.round(scroller.clientWidth / 2); + const test_data = { + scroller: scroller, + scrolling_function: async () => { + const start_pos = { x: scroller_middle, y: snap_area_2.offsetTop }; + 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_scroll_offsets: { + x: 0, + y: snap_area_2.offsetTop + } + }; + await test_snap_event(t, test_data, "snapchanging"); + }, "touch scrolling fires snapchanging."); + + // Wheel scroll test. + promise_test(async (t) => { + await waitForCompositorCommit(); + const test_data = { + scroller: scroller, + scrolling_function: async () => { + 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_scroll_offsets: { + x: 0, + y: snap_area_2.offsetTop + } + }; + await test_snap_event(t, test_data, "snapchanging"); + }, "mouse wheel scroll triggers snapchanging."); + + // Scrollbar drag test. + promise_test(async (t) => { + await waitForCompositorCommit(); + // Skip test on platforms that do not have a visible scrollbar (e.g. + // overlay scrollbar). + const scrollbar_width = window.innerWidth - + document.documentElement.clientWidth; + const test_data = { + scroller: scroller, + scrolling_function: async () => { + const scrollbar_to_scroller_ratio = + getScrollbarToScrollerRatio(scroller); + // Scroll by just over half of the top box's height. + const drag_amt = (snap_area_2.offsetTop / 2 + 1) * + scrollbar_to_scroller_ratio; + await snap_event_scrollbar_drag_helper(scroller, scrollbar_width, drag_amt); + }, + expected_snap_targets: [snap_area_2.id], + expected_scroll_offsets: { + x: 0, + y: snap_area_2.offsetTop + } + }; + await test_snap_event(t, test_data, "snapchanging"); + }, "scrollbar dragging fires snapchanging."); + + // Keyboard test. + promise_test(async (t) => { + await waitForCompositorCommit(); + const test_data = { + scroller: scroller, + scrolling_function: async () => { + scroller.focus(); + window.test_driver.send_keys(document.documentElement, '\ue015'/*ArrowDown*/); + }, + expected_snap_targets: [snap_area_2.id], + expected_scroll_offsets: { + x: 0, + y: snap_area_2.offsetTop + } + }; + 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 + // snap_area_1. + promise_test(async (t) => { + await waitForScrollReset(t, scroller); + await waitForCompositorCommit(); + const pos_x = Math.round(scroller.clientWidth / 2); + const start_pos_y = Math.round(snap_area_2.offsetTop); + let evts_promise = waitForEventsUntil(document, "snapchanging", + waitForScrollendEventNoTimeout(document)); + await new test_driver.Actions() + .addPointer("TestPointer", "touch") + .pointerMove(pos_x, start_pos_y) + .pointerDown() + .addTick() + .pause(200) + // Drag up to y=0, which should trigger a snapchanging event. + .pointerMove(pos_x, 0) + .addTick() + .pause(200) + // Drag down again to start position, which should trigger a + // snapchanging event. + .pointerMove(pos_x, start_pos_y) + .pointerUp() + .send(); + let evts = await evts_promise; + assert_equals(evts.length, 2, "2 snapchanging events are seens"); + assertSnapEvent(evts[0], [snap_area_2.id]); + assertSnapEvent(evts[1], [snap_area_1.id]); + }, "snapchanging fires as scroll moves through different snap targets."); + + // snapchanging doesn't fire test. + promise_test(async (t) => { + test_no_snapchanging(t, scroller, 10); + }, "snapchanging doesn't fire if scroll doesn't reach different snap " + + "targets."); + </script> +</body> + +</html>
\ No newline at end of file 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 new file mode 100644 index 0000000000..2c1f9742b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-scroll.tentative.html @@ -0,0 +1,188 @@ +<!DOCTYPE html> +<html> +<head> + <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="/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> +</head> + +<body> + <style> + #scroller { + height: 400px; + width: 400px; + position: relative; + overflow: scroll; + scroll-snap-type: y mandatory; + border: solid 1px black; + } + .box { + position: absolute; + left: 150px; + height: 350px; + width: 100px; + border: solid 1px white; + } + .snap { + scroll-snap-align: start; + } + .blue { + background-color: blue; + } + .green { + background-color: green; + } + .yellow { + background-color: yellow; + } + #snap_area_1 { + top: 0px; + } + #snap_area_2 { + top: 352px; + } + #snap_area_3 { + top: 704px; + } + .large_space { + height: 400vh; + width: 400vw; + position: absolute; + } + </style> + <div id="scroller"> + <div class="large_space"></div> + <div id="snap_area_1" class="blue snap box"></div> + <div id="snap_area_2" class="green snap box"></div> + <div id="snap_area_3" class="yellow snap box"></div> + </div> + <script> + const scroller = document.getElementById("scroller"); + + // Touch scroll test. + promise_test(async (t) => { + await waitForCompositorCommit(); + const scroller_middle = Math.round(scroller.clientWidth / 2); + const test_data = { + scroller: scroller, + scrolling_function: async () => { + const start_pos = { x: scroller_middle, y: snap_area_2.offsetTop }; + 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_scroll_offsets: { + x: 0, + y: snap_area_2.offsetTop + } + }; + await test_snap_event(t, test_data, "snapchanging"); + }, "touch scrolling fires snapchanging."); + + // Wheel scroll test. + promise_test(async (t) => { + await waitForCompositorCommit(); + const test_data = { + scroller: scroller, + scrolling_function: async () => { + await new test_driver.Actions().scroll(0, 0, 0, + Math.round(snap_area_2.offsetTop / 2) + 1, + { origin: scroller }).send(); + }, + expected_snap_targets: [snap_area_2.id], + expected_scroll_offsets: { + x: 0, + y: snap_area_2.offsetTop + } + }; + await test_snap_event(t, test_data, "snapchanging"); + }, "mouse wheel scroll triggers snapchanging."); + + // Scrollbar drag test. + promise_test(async (t) => { + await waitForCompositorCommit(); + // Skip test on platforms that do not have a visible scrollbar (e.g. + // overlay scrollbar). + const scrollbar_width = scroller.offsetWidth - scroller.clientWidth; + if (scrollbar_width == 0) + return; + const test_data = { + scroller: scroller, + scrolling_function: async () => { + const scrollbar_to_scroller_ratio = + getScrollbarToScrollerRatio(scroller); + // Scroll by just over half of the top box's height. + const drag_amt = (snap_area_2.offsetTop / 2 + 1) * + scrollbar_to_scroller_ratio; + await snap_event_scrollbar_drag_helper(scroller, scrollbar_width, drag_amt); + }, + expected_snap_targets: [snap_area_2.id], + expected_scroll_offsets: { + x: 0, + y: snap_area_2.offsetTop + } + }; + await test_snap_event(t, test_data, "snapchanging"); + }, "scrollbar dragging fires snapchanging."); + + // Keyboard test. + promise_test(async (t) => { + await waitForCompositorCommit(); + const test_data = { + scroller: scroller, + scrolling_function: async () => { + scroller.focus(); + window.test_driver.send_keys(scroller, '\ue015'/*ArrowDown*/); + }, + expected_snap_targets: [snap_area_2.id], + expected_scroll_offsets: { + x: 0, + y: snap_area_2.offsetTop + } + }; + 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 + // snap_area_1. + promise_test(async (t) => { + await waitForScrollReset(t, scroller); + await waitForCompositorCommit(); + const pos_x = Math.round(scroller.clientWidth / 2); + const start_pos_y = Math.round(snap_area_2.offsetTop); + let evts_promise = waitForEventsUntil(scroller, "snapchanging", + waitForScrollendEventNoTimeout(scroller)); + await new test_driver.Actions() + .addPointer("TestPointer", "touch") + .pointerMove(pos_x, start_pos_y) + .pointerDown() + .addTick() + .pause(200) + // Drag up to y=0, which should trigger a snapchanging event. + .pointerMove(pos_x, 0) + .addTick() + .pause(200) + // Drag down again to start position, which should trigger a + // snapchanging event. + .pointerMove(pos_x, start_pos_y) + .pointerUp() + .send(); + let evts = await evts_promise; + assert_equals(evts.length, 2, "2 snapchanging events are seens"); + assertSnapEvent(evts[0], [snap_area_2.id]); + assertSnapEvent(evts[1], [snap_area_1.id]); + }, "snapchanging fires as scroll moves through different snap targets."); + + // snapchanging doesn't fire test. + promise_test(async (t) => { + test_no_snapchanging(t, scroller, 10); + }, "snapchanging doesn't fire if scroll doesn't reach different snap " + + "targets."); + </script> + </body> +</html> |