selectorText-modification-restyle-002.html (1364B)
1 <!DOCTYPE html> 2 <title>CSSOM: Modify selectorText in a shadow tree stylesheet</title> 3 <link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstylerule-selectortext"> 5 <link rel="help" href="https://drafts.csswg.org/css-scoping/#selectors"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 #container { color: red } 10 .subtree * { color: pink } 11 </style> 12 <div id="container"> 13 <div id="host"></div> 14 </div> 15 <script> 16 const root = host.attachShadow({mode:"open"}); 17 root.innerHTML = "<style>nomatch { color: green }</style><div>Green</div>"; 18 const div = root.querySelector("div"); 19 20 test(() => { 21 assert_equals(getComputedStyle(div).color, "rgb(255, 0, 0)", "Color should initial be red."); 22 }, "Check initial color."); 23 24 test(() => { 25 // The combination of the .subtree and CSSOM selector style invalidations 26 // caused the Blink implementation to fail an assertion. 27 container.className = "subtree"; 28 root.styleSheets[0].cssRules[0].selectorText = "div"; 29 assert_equals(getComputedStyle(div).color, "rgb(0, 128, 0)", "Color should be green after stylesheet change."); 30 }, "Check that color changes correctly after shadow stylesheet selector and #container class is changed."); 31 </script>