invalidation-001.html (850B)
1 <!doctype html> 2 <title>CSS Selectors nested invalidation on changed parent</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 .a { 13 & .b { 14 color: green; 15 } 16 } 17 </style> 18 19 <div id="container"> 20 <div id="child" class="b"> 21 Test passes if color is green. 22 </div> 23 </div> 24 25 <script> 26 test(() => { 27 let container = document.getElementById('container'); 28 let child = document.getElementById('child'); 29 assert_equals(getComputedStyle(child).color, 'rgb(255, 0, 0)'); 30 container.classList.add('a'); 31 assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)'); 32 }); 33 </script>