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