[css-scroll-snap-2] Add shadow DOM test for scroll-initial-target

Per request[1] from HTML spec reviewers, this adds a test that scroll containers in shadow trees also honor their scroll-initial-targets. [1] whatwg/html#10759 (review) Bug: 40909052 Change-Id: I5ff8029dbe043ebdcf3cc18473e014140247c0e3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6165203 Reviewed-by: Steve Kobes <skobes@chromium.org> Commit-Queue: David Awogbemila <awogbemila@chromium.org> Cr-Commit-Position: refs/heads/main@{#1406768}
web-platform-tests · Jan 15, 2025 · d3a1594 · d3a1594
1 parent 8eca2c2
commit d3a1594
Showing 1 changed file with 136 additions and 0 deletions.
diff --git a/css/css-scroll-snap-2/scroll-initial-target/scroll-initial-target-shadow-dom.tentative.html b/css/css-scroll-snap-2/scroll-initial-target/scroll-initial-target-shadow-dom.tentative.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title> CSS Scroll Snap 2 Test: scroll-initial-target for scroller in shadow DOM</title>
+    <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+  <body>
+    <style>
+      .space {
+        width: 50px;
+        height: 500px;
+      }
+      .scroller {
+        width: 100px;
+        height: 100px;
+        overflow: scroll;
+        border: solid 2px;
+      }
+      .purpleborder {
+        border: solid 2px purple;
+      }
+      .target {
+        scroll-initial-target: nearest;
+        width: 50px;
+        height: 50px;
+        background-color: green
+      }
+      #wrapper {
+        /* Hide everything initially to ensure that the test sees the scroll */
+        /* events from the scrolls to the scroll-initial-targets.            */
+        display: none;
+      }
+    </style>
+    <div id="wrapper">
+      <div id="scroller_before" class="scroller">
+        <div class="space"></div>
+        <div class="target"></div>
+      </div>
+      <div id="shadowDomHost">
+        <template shadowrootmode="open">
+          <style>
+            .space {
+              width: 50px;
+              height: 500px;
+            }
+            .scroller {
+              width: 100px;
+              height: 100px;
+              overflow: scroll;
+              border: solid 2px red;
+            }
+            .target {
+              scroll-initial-target: nearest;
+              width: 50px;
+              height: 50px;
+              background-color: green
+            }
+          </style>
+            <slot name="slot1"></slot>
+            <div id="shadow_scroller" class="scroller">
+              <div id="space" class="space"></div>
+              <div id="target" class="target"></div>
+            </div>
+            <slot name="slot2"></slot>
+        </template>
+        <div id="slot1scroller" slot="slot1" class="purpleborder scroller">
+          <div id="space" class="space"></div>
+          <div class="target"></div>
+        </div>
+        <div id="slot2scroller" slot="slot2" class="purpleborder scroller">
+          <div id="space" class="space"></div>
+          <div class="target"></div>
+        </div>
+      </div>
+      <div id="scroller_after" class="scroller">
+        <div class="space"></div>
+        <div class="target"></div>
+      </div>
+    </div>
+    <script>
+      const scroller_before = document.getElementById("scroller_before");
+      const slot1scroller = document.getElementById("slot1scroller");
+      const shadow_scroller =
+        shadowDomHost.shadowRoot.querySelector(".scroller");
+      const slot2scroller = document.getElementById("slot2scroller");
+      const scroller_after = document.getElementById("scroller_after");
+
+      const scrollers = [scroller_before, slot1scroller, shadow_scroller,
+        slot2scroller, scroller_after];
+      const scroll_log = [];
+
+      function setUpLogging() {
+        let promises = [];
+        for (const scroller of scrollers) {
+          promises.push(new Promise((resolve) => {
+            scroller.addEventListener("scroll", () => {
+              scroll_log.push(scroller.id);
+              resolve();
+            }, { once: true });
+          }));
+        }
+        return Promise.all(promises);
+      }
+
+      function verifyScrollPositions() {
+        for (const scroller of scrollers) {
+          // Each scroller's target is at the scroller's very bottom so the
+          // scroller should be scrolled all the way down.
+          assert_equals(scroller.scrollTop,
+            scroller.scrollHeight - scroller.clientHeight,
+            `${scroller.id} is scrolled to its target`);
+        }
+      }
+
+      promise_test(async (t) => {
+        // Arm the promises that should be resolved due to scrolling to the
+        // scroll-initial-targets.
+        const scroll_promises =  setUpLogging();
+
+        const wrapper = document.getElementById("wrapper");
+        wrapper.style.display = "initial";
+
+        await scroll_promises;
+
+        // Verify that the order in which the scroll containers were scrolled
+        // matches flat tree order.
+        assert_array_equals(scroll_log, ["scroller_before", "slot1scroller",
+          "shadow_scroller", "slot2scroller", "scroller_after"]);
+
+        verifyScrollPositions();
+      }, "scroll-initial-target in shadow DOM is scrolled to initially.");
+    </script>
+  </body>
+</html>