invalidation-004.html (808B)
1 <!doctype html> 2 <title>CSS Selectors nested invalidation through @media by selectorText</title> 3 <link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-nesting-1/"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <style> 9 .b { 10 color: red; 11 } 12 & { 13 @media screen { 14 &.b { color: green; } 15 } 16 } 17 </style> 18 19 <div id="elem" class="a b"> 20 Test passes if color is green. 21 </div> 22 23 <script> 24 test(() => { 25 let elem = document.getElementById('elem'); 26 assert_equals(getComputedStyle(elem).color, 'rgb(255, 0, 0)'); 27 document.styleSheets[0].rules[1].selectorText = '.a'; 28 assert_equals(getComputedStyle(elem).color, 'rgb(0, 128, 0)'); 29 }); 30 </script>