1 files changed, 118 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