scroll-marker-group-style-and-scroll-container-query.html (1448B)
1 <!DOCTYPE html> 2 <title>CSS Overflow Test: style and scroll-state container for ::scroll-marker-group</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-conditional-5/#container-queries"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 #container { 9 container-type: inline-size scroll-state; 10 overflow: auto; 11 width: 200px; 12 height: 200px; 13 --container: outer; 14 } 15 #scroller { 16 container-type: inline-size scroll-state; 17 width: 400px; 18 height: 400px; 19 scroll-marker-group: before; 20 --container: inner; 21 @container not scroll-state(scrollable) { 22 &::scroll-marker-group { --scroll-state-test: pass; } 23 } 24 @container style(--container: inner) { 25 &::scroll-marker-group { --style-test: pass; } 26 } 27 } 28 </style> 29 <div id="container"> 30 <div id="scroller"></div> 31 </div> 32 <script> 33 test(() => { 34 assert_equals(getComputedStyle(scroller, "::scroll-marker-group").getPropertyValue("--scroll-state-test"), "pass"); 35 }, "::scroll-marker-group should not skip originating element for scroll-state queries"); 36 37 test(() => { 38 assert_equals(getComputedStyle(scroller, "::scroll-marker-group").getPropertyValue("--style-test"), "pass"); 39 }, "::scroll-marker-group should not skip originating element for style queries"); 40 </script>