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