1 files changed, 105 insertions, 0 deletions
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>