commit 2255fe5f9689f11d92c9786c0b79289abca54be2
parent cab605b56ba431d752271c802e46dbc915ac0a1b
Author: Rune Lillesveen <futhark@chromium.org>
Date: Mon, 27 Oct 2025 10:03:01 +0000
Bug 1996026 [wpt PR 55621] - Add size query tests for ::scroll-* on root element, a=testonly
Automatic update from web-platform-tests
Add size query tests for ::scroll-* on root element
::scroll-marker-group and ::scroll-button generate child boxes when the
originating element is the root element. Add tests for this special
case.
Also add a test for ::scroll-marker-group not skipping originating
element for style and scroll-state queries.
Bug: 452345165
Change-Id: I5e8ec129173dbbce7cdeaa75cf72a2e99b57e1da
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7077820
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1534310}
--
wpt-commits: c1f815ff9329381d85d77b924d2fffd423fe77a3
wpt-pr: 55621
Diffstat:
2 files changed, 58 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-overflow/scroll-marker-group-style-and-scroll-container-query.html b/testing/web-platform/tests/css/css-overflow/scroll-marker-group-style-and-scroll-container-query.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>CSS Overflow Test: style and scroll-state container for ::scroll-marker-group</title>
+<link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-group-property">
+<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-queries">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+ #container {
+ container-type: inline-size scroll-state;
+ overflow: auto;
+ width: 200px;
+ height: 200px;
+ --container: outer;
+ }
+ #scroller {
+ container-type: inline-size scroll-state;
+ width: 400px;
+ height: 400px;
+ scroll-marker-group: before;
+ --container: inner;
+ @container not scroll-state(scrollable) {
+ &::scroll-marker-group { --scroll-state-test: pass; }
+ }
+ @container style(--container: inner) {
+ &::scroll-marker-group { --style-test: pass; }
+ }
+ }
+</style>
+<div id="container">
+ <div id="scroller"></div>
+</div>
+<script>
+ test(() => {
+ assert_equals(getComputedStyle(scroller, "::scroll-marker-group").getPropertyValue("--scroll-state-test"), "pass");
+ }, "::scroll-marker-group should not skip originating element for scroll-state queries");
+
+ test(() => {
+ assert_equals(getComputedStyle(scroller, "::scroll-marker-group").getPropertyValue("--style-test"), "pass");
+ }, "::scroll-marker-group should not skip originating element for style queries");
+</script>
diff --git a/testing/web-platform/tests/css/css-overflow/scroll-pseudo-elements-gcs-cq.html b/testing/web-platform/tests/css/css-overflow/scroll-pseudo-elements-gcs-cq.html
@@ -6,6 +6,18 @@
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
+ html {
+ container-type: inline-size;
+ width: 500px;
+ @container (width = 500px) {
+ /* None of these pseudo elements are rendered, but getComputedStyle()
+ should still work. If rendered, they would become child boxes of the
+ root element, thus they can query their originating element for size
+ container queries. */
+ &::scroll-marker-group { --test: pass; }
+ &::scroll-button(left) { --test: pass; }
+ }
+ }
#container {
container-type: inline-size;
width: 400px;
@@ -28,6 +40,12 @@
</div>
<script>
test(() => {
+ assert_equals(getComputedStyle(document.documentElement, "::scroll-marker-group").getPropertyValue("--test"), "pass");
+ }, "::scroll-marker-group queries root originating element for size queries");
+ test(() => {
+ assert_equals(getComputedStyle(document.documentElement, "::scroll-button(left)").getPropertyValue("--test"), "pass");
+ }, "::scroll-button skips queries root originating element for size queries");
+ test(() => {
assert_equals(getComputedStyle(scroller, "::scroll-marker-group").getPropertyValue("--test"), "pass");
}, "::scroll-marker-group skips originating element for size queries");
test(() => {
