scroll-pseudo-elements-gcs-cq.html (2335B)
1 <!DOCTYPE html> 2 <title>CSS Overflow Test: getComputedStyle for ::scroll-* pseudo elements inside size container</title> 3 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-group-property"> 4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-buttons"> 5 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-queries"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 html { 10 container-type: inline-size; 11 width: 500px; 12 @container (width = 500px) { 13 /* None of these pseudo elements are rendered, but getComputedStyle() 14 should still work. If rendered, they would become child boxes of the 15 root element, thus they can query their originating element for size 16 container queries. */ 17 &::scroll-marker-group { --test: pass; } 18 &::scroll-button(left) { --test: pass; } 19 } 20 } 21 #container { 22 container-type: inline-size; 23 width: 400px; 24 } 25 #scroller { 26 container-type: inline-size; 27 width: 200px; 28 height: 200px; 29 @container (width = 400px) { 30 /* None of these pseudo elements are rendered, but getComputedStyle() 31 should still work and skip the originating element as an eligible 32 size container. */ 33 &::scroll-marker-group { --test: pass; } 34 &::scroll-button(left) { --test: pass; } 35 } 36 } 37 </style> 38 <div id="container"> 39 <div id="scroller"></div> 40 </div> 41 <script> 42 test(() => { 43 assert_equals(getComputedStyle(document.documentElement, "::scroll-marker-group").getPropertyValue("--test"), "pass"); 44 }, "::scroll-marker-group queries root originating element for size queries"); 45 test(() => { 46 assert_equals(getComputedStyle(document.documentElement, "::scroll-button(left)").getPropertyValue("--test"), "pass"); 47 }, "::scroll-button skips queries root originating element for size queries"); 48 test(() => { 49 assert_equals(getComputedStyle(scroller, "::scroll-marker-group").getPropertyValue("--test"), "pass"); 50 }, "::scroll-marker-group skips originating element for size queries"); 51 test(() => { 52 assert_equals(getComputedStyle(scroller, "::scroll-button(left)").getPropertyValue("--test"), "pass"); 53 }, "::scroll-button skips originating element for size queries"); 54 </script>