nesting-layer.html (1134B)
1 <!DOCTYPE html> 2 <title>Nested @layers</title> 3 <link rel="help" href="https://drafts.csswg.org/css-nesting/#nested-group-rules"> 4 <link rel="help" href="https://drafts.csswg.org/css-cascade-5/#layering"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 9 .a { 10 /* This should have no effect. Only at-rules containing style rules 11 are vaild when nested. */ 12 @layer theme, base; 13 } 14 15 /* The theme layer wins over the base layer. */ 16 @layer base, theme; 17 18 .a { 19 @layer theme { 20 & { 21 z-index: 1; 22 } 23 24 .b { 25 background-color: green; 26 } 27 } 28 } 29 30 @layer base { 31 .a { 32 z-index: 0; 33 } 34 .a .b { 35 background-color: red; 36 } 37 } 38 </style> 39 <main> 40 <div class="a"> 41 <div class="b"> 42 </div> 43 </div> 44 </main> 45 <script> 46 test(() => { 47 let a = document.querySelector("main > .a"); 48 let b = document.querySelector("main > .a > .b"); 49 assert_equals(getComputedStyle(a).zIndex, "1"); 50 assert_equals(getComputedStyle(b).backgroundColor, "rgb(0, 128, 0)"); 51 }, '@layer can be nested'); 52 </script>