commit efc2cf7f6e9c3540315c21e6be3498937e7b66da
parent eacffc0c9446ccaab4b593816a14c913aa5e4971
Author: Rune Lillesveen <futhark@chromium.org>
Date: Mon, 27 Oct 2025 10:02:55 +0000
Bug 1995993 [wpt PR 55615] - Handle sibling-box container queries everywhere, a=testonly
Automatic update from web-platform-tests
Handle sibling-box container queries everywhere
::scroll-marker-group and ::scroll-button() pseudo elements generate
sibling boxes of their originating element. That means we need to be
careful not to allow the originating element's box to be considered a
query container for size queries everywhere we set the container member
of StyleRecalcContext.
Fixes issues with getComputedStyle() and devtools inspection of matching
style rules.
Bug: 452345165
Change-Id: I1d39ab5f0d5ee825bfc5b4c9c8a463fe2ffee66b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7072033
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1534276}
--
wpt-commits: f3157b3d4128468f2bb2adde6b1b3efe37cf588c
wpt-pr: 55615
Diffstat:
1 file changed, 36 insertions(+), 0 deletions(-)
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
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>CSS Overflow Test: getComputedStyle for ::scroll-* pseudo elements inside size container</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-overflow-5/#scroll-buttons">
+<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;
+ width: 400px;
+ }
+ #scroller {
+ container-type: inline-size;
+ width: 200px;
+ height: 200px;
+ @container (width = 400px) {
+ /* None of these pseudo elements are rendered, but getComputedStyle()
+ should still work and skip the originating element as an eligible
+ size container. */
+ &::scroll-marker-group { --test: pass; }
+ &::scroll-button(left) { --test: pass; }
+ }
+ }
+</style>
+<div id="container">
+ <div id="scroller"></div>
+</div>
+<script>
+ test(() => {
+ assert_equals(getComputedStyle(scroller, "::scroll-marker-group").getPropertyValue("--test"), "pass");
+ }, "::scroll-marker-group skips originating element for size queries");
+ test(() => {
+ assert_equals(getComputedStyle(scroller, "::scroll-button(left)").getPropertyValue("--test"), "pass");
+ }, "::scroll-button skips originating element for size queries");
+</script>
