Make snap events bubble when fired at the document.
The CSS working group came to a resolution[1] that snap events should
bubble when targeted at the document.
This aligns with the behavior of scroll and scrollend events.
[1]https://github.com/w3c/csswg-drafts/issues/10173
Bug: 40286359, 40273052
Change-Id: Ie977a39df04c5ee0bd7f62319119603a59ed7c22
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5513923
Reviewed-by: Steve Kobes <skobes@chromium.org>
Commit-Queue: David Awogbemila <awogbemila@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1296898}
diff --git a/css/css-scroll-snap-2/resources/common.js b/css/css-scroll-snap-2/resources/common.js
index 8dce294..d95b605 100644
--- a/css/css-scroll-snap-2/resources/common.js
+++ b/css/css-scroll-snap-2/resources/common.js
@@ -9,7 +9,8 @@
}
function assertSnapEvent(evt, expected_ids) {
- assert_equals(evt.bubbles, false, "snap events don't bubble");
+ assert_equals(evt.bubbles, evt.target == document,
+ "snap events don't bubble except when fired at the document");
assert_false(evt.cancelable, "snap events are not cancelable.");
assert_equals(evt.snapTargetBlock, expected_ids.block,
"snap event supplied expected target in block axis");
diff --git a/css/css-scroll-snap-2/snapevents-at-document-bubble-to-window.html b/css/css-scroll-snap-2/snapevents-at-document-bubble-to-window.html
new file mode 100644
index 0000000..e50be0b
--- /dev/null
+++ b/css/css-scroll-snap-2/snapevents-at-document-bubble-to-window.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title> CSS Scroll Snap 2 Test: snapchanged event on the document bubbles</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="/css/css-scroll-snap-2/resources/common.js"></script>
+ <script src="/dom/events/scrolling/scroll_support.js"></script>
+</head>
+
+<body>
+ <style>
+ :root {
+ margin: 0;
+ padding: 0;
+ scroll-snap-type: y mandatory;
+ }
+
+ div {
+ position: absolute;
+ margin: 0px;
+ }
+
+ #spacer {
+ width: 200vw;
+ height: 200vh;
+ }
+
+ .snap_point {
+ width: 40vw;
+ height: 40vh;
+ scroll-snap-align: start;
+ }
+
+ #snap_point_1 {
+ left: 0px;
+ top: 0px;
+ background-color: red;
+ }
+
+ #snap_point_2 {
+ top: 40vh;
+ left: 40vw;
+ background-color: orange;
+ }
+
+ #snap_point_3 {
+ left: 80vw;
+ top: 80vh;
+ background-color: blue;
+ }
+ </style>
+ <div id="spacer"></div>
+ <div id="snap_point_1" class="snap_point"></div>
+ <div id="snap_point_2" class="snap_point"></div>
+ <div id="snap_point_3" class="snap_point"></div>
+
+ <script>
+
+ promise_test(async(t) => {
+ await waitForCompositorCommit();
+
+ let snapchanging_promise = waitForSnapEvent(window, "snapchanging");
+ let snapchanged_promise = waitForSnapEvent(window, "snapchanged");
+ document.scrollingElement.scrollTo(0, snap_point_2.offsetTop);
+ let snapchanging_evt = await snapchanging_promise;
+ let snapchanged_evt = await snapchanged_promise;
+
+ assertSnapEvent(snapchanging_evt, { inline: null, block: snap_point_2 });
+ assertSnapEvent(snapchanged_evt, { inline: null, block: snap_point_2 });
+ }, "snapchanged bubbles when fired at the document (addEventListener).");
+
+ promise_test(async(t) => {
+ await waitForScrollReset(t, document.scrollingElement);
+ await waitForCompositorCommit();
+
+ let snapchanging_promise = waitForSnapEvent(window, "snapchanging",
+ /*scroll_happens=*/true,
+ /*use_onsnap_member=*/true);
+ let snapchanged_promise = waitForSnapEvent(window, "snapchanged",
+ /*scroll_happens=*/true,
+ /*use_onsnap_member=*/true);
+ document.scrollingElement.scrollTo(0, snap_point_2.offsetTop);
+ let snapchanging_evt = await snapchanging_promise;
+ let snapchanged_evt = await snapchanged_promise;
+
+ assertSnapEvent(snapchanging_evt, { inline: null, block: snap_point_2 });
+ assertSnapEvent(snapchanged_evt, { inline: null, block: snap_point_2 });
+ }, "snapchanged bubbles when fired at the document (onsnapchanged).");
+ </script>
+</body>
+
+</html>
