scope-container.html (1205B)
1 <!DOCTYPE html> 2 <title>@scope - inner @container</title> 3 <link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scope-atrule"> 4 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule"> 5 <link rel="help" href="https://drafts.csswg.org/css-cascade-5/#scope-scope"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 main { 10 width: 100px; 11 height: 100px; 12 container-type: size; 13 } 14 15 @scope (.a) { 16 @container (width > 0px) { 17 :scope { 18 z-index: 1; 19 } 20 21 .b { 22 background-color: green; 23 } 24 } 25 } 26 </style> 27 <main> 28 <div class=a> 29 <div class=b> 30 </div> 31 </div> 32 <div class=b></div> 33 </main> 34 <script> 35 test(() => { 36 let a = document.querySelector('main > .a'); 37 let b = document.querySelector('main > .a > .b'); 38 assert_equals(getComputedStyle(a).zIndex, '1'); 39 assert_equals(getComputedStyle(b).backgroundColor, 'rgb(0, 128, 0)'); 40 41 let out_of_scope_b = document.querySelector('main > .b'); 42 assert_equals(getComputedStyle(out_of_scope_b).backgroundColor, 'rgba(0, 0, 0, 0)'); 43 }, 'Style rules within @container are scoped'); 44 </script>