[@container] Get scrollable scroll-state from the viewport for :root

If the root element is the scroll-container, read 'scrollable' state from the viewport instead, since that is where the scrollbars are for the root element. Bug: 390639816 Change-Id: I6778b6af1ee50e6d3c90e21574537fba897ceb09 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6182362 Reviewed-by: Anders Hartvoll Ruud <[email protected]> Commit-Queue: Rune Lillesveen <[email protected]> Cr-Commit-Position: refs/heads/main@{#1408561}
web-platform-tests · Jan 20, 2025 · c1a7a77 · c1a7a77
1 parent 66bf601
commit c1a7a77
Showing 1 changed file with 51 additions and 0 deletions.
diff --git a/css/css-conditional/container-queries/scroll-state/scroll-state-scrollable-root.html b/css/css-conditional/container-queries/scroll-state/scroll-state-scrollable-root.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<title>@container: scroll-state(scrollable) matching viewport for root element</title>
+<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrollable">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script>
+<script src="/css/css-transitions/support/helper.js"></script>
+<style>
+  :root {
+    container-type: scroll-state;
+  }
+  #target {
+    height: 5000px;
+    --top: no;
+    --bottom: no;
+    @container scroll-state(scrollable: top) {
+      --top: yes;
+    }
+    @container scroll-state(scrollable: bottom) {
+      --bottom: yes;
+    }
+  }
+</style>
+<div id="target"></div>
+<script>
+  setup(() => assert_implements_scroll_state_container_queries());
+
+  const root = document.documentElement;
+
+  promise_test(async t => {
+    await waitForAnimationFrames(2);
+    assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no");
+    assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "yes");
+    assert_equals(root.scrollTop, 0);
+  }, "Check that scroll-state(scrollable) matches bottom before scroll");
+
+  promise_test(async t => {
+    root.scrollTop = 100;
+    await waitForAnimationFrames(2);
+    assert_equals(getComputedStyle(target).getPropertyValue("--top"), "yes");
+    assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "yes");
+  }, "Check that scroll-state(scrollable) matches both top and bottom in a middle position");
+
+  promise_test(async t => {
+    root.scrollTop = 5000;
+    await waitForAnimationFrames(2);
+    assert_equals(getComputedStyle(target).getPropertyValue("--top"), "yes");
+    assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no");
+  }, "Check that scroll-state(scrollable) matches both top when scrolled to the end");
+
+</script>