nested-rule-cssom-invalidation.html (1394B)
1 <!DOCTYPE html> 2 <title>CSS Nesting: Style invalidates after CSSOM mutations to nested rules</title> 3 <link rel="help" href="https://drafts.csswg.org/css-nesting-1/#nested-style-rule"> 4 <link rel="help" href="https://drafts.csswg.org/css-nesting-1/#nested-group-rules"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <style id=set_parent_selector_text_style> 9 .set_parent_selector_text { 10 div { 11 color: red; 12 } 13 .a1 { 14 color: green; 15 } 16 } 17 </style> 18 <div class=set_parent_selector_text> 19 <div class=a1>A1</div> 20 <div class=a2>A2</div> 21 </div> 22 <script> 23 test(() => { 24 let a1 = document.querySelector('.set_parent_selector_text > .a1'); 25 let a2 = document.querySelector('.set_parent_selector_text > .a2'); 26 assert_equals(getComputedStyle(a1).color, 'rgb(0, 128, 0)'); 27 assert_equals(getComputedStyle(a2).color, 'rgb(255, 0, 0)'); 28 29 let rules = set_parent_selector_text_style.sheet.cssRules; 30 assert_equals(rules.length, 1); 31 assert_equals(rules[0].cssRules.length, 2); 32 33 let a_rule = rules[0].cssRules[1]; 34 assert_equals(a_rule.selectorText, '& .a1'); 35 a_rule.selectorText = '.a2'; 36 37 assert_equals(getComputedStyle(a1).color, 'rgb(255, 0, 0)'); 38 assert_equals(getComputedStyle(a2).color, 'rgb(0, 128, 0)'); 39 }, 'Nested rule responds to parent selector text change'); 40 </script>