test_getMatchingCSSRules_shadow_dom.html (1772B)
1 <!DOCTYPE HTML> 2 <title>Test for InspectorUtils.getMatchingCSSRules for starting style</title> 3 <script src="/tests/SimpleTest/SimpleTest.js"></script> 4 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"> 5 <pre id="log"></pre> 6 <div id="host"></div> 7 <script> 8 const sheet = new CSSStyleSheet(); 9 sheet.replaceSync("unknowntagname { color: tomato; background-color: gold;}"); 10 const shadow = host.attachShadow({ mode: "open" }); 11 shadow.adoptedStyleSheets = [sheet]; 12 13 const shadowEl = document.createElement("unknowntagname"); 14 shadowEl.textContent = "Hello from the shadow DOM"; 15 shadow.appendChild(shadowEl); 16 </script> 17 <script> 18 /** 19 * This test checks that InspectorUtils.getMatchingCSSRules returns expected rules 20 * when passed a shadow dom element 21 * To avoid effects from UA sheets, we use an element with "unknowntagname". 22 */ 23 24 const InspectorUtils = SpecialPowers.InspectorUtils; 25 26 add_task(async function() { 27 const shadowRoot = host.shadowRoot; 28 const shadowEl = shadowRoot.querySelector("unknowntagname") 29 const styleSheet = shadowRoot.adoptedStyleSheets[0] 30 31 let rules = InspectorUtils.getMatchingCSSRules(shadowEl); 32 is(rules.length, 1, "Got expected number of rule"); 33 34 is( 35 rules[0].cssText, 36 styleSheet.cssRules[0].cssText, 37 "We're getting a CSSRule and it's the one from the adopted stylesheet" 38 ); 39 40 info("Remove a property from the rule") 41 styleSheet.cssRules[0].style.removeProperty("color"); 42 43 rules = InspectorUtils.getMatchingCSSRules(shadowEl); 44 is(rules.length, 1, "Got expected number of rule after removing a property from the rule"); 45 is( 46 rules[0].cssText, 47 styleSheet.cssRules[0].cssText, 48 "We're still getting the adopted stylesheet CSSRule after removing a property" 49 ); 50 }); 51 52 </script>