Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
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
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>
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