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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
<!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">
<style>
@starting-style {
tagname {
color: red;
}
}
tagname {
color: blue;
opacity: 1;
@starting-style {
opacity: 0;
}
}
@starting-style {
body > tagnametwo {
background-color: salmon;
}
}
body tagnametwo {
background-color: tomato;
@starting-style {
background-color: gold;
}
}
</style>
<pre id="log"></pre>
<tagname></tagname>
<tagnametwo></tagnametwo>
<script>
/**
* This test checks that InspectorUtils.getMatchingCSSRules setting
* withStartingStyle:true returns correct style set in various cases.
* To avoid effects from UA sheets, we use an element with "unknowntagname".
*/
const InspectorUtils = SpecialPowers.InspectorUtils;
add_task(async function testBasic() {
info("Check the basic case of @starting-style")
const styleSheet = document.styleSheets[1];
const el = document.querySelector("tagname");
let rules = InspectorUtils.getMatchingCSSRules(el, "", false, true);
is(rules.length, 3, "Expected rules");
is(
rules[0].cssText,
styleSheet.cssRules[0].cssRules[0].cssText,
"first returned rule is the one in the top-level starting-style rule"
);
is(
rules[1].cssText,
styleSheet.cssRules[1].cssText,
"second returned rule is top-level tagname rule"
);
is(
rules[2].cssText,
styleSheet.cssRules[1].cssRules[0].cssRules[0].cssText,
"third returned rule is the starting-style nested in tagname rule"
);
info(
"Check that starting style rules are not returned when withStartingStyle " +
"param is false"
);
rules = InspectorUtils.getMatchingCSSRules(el, "", false);
is(rules.length, 1, "Expected rules");
is(
rules[0].cssText,
styleSheet.cssRules[1].cssText,
"Only returned rule is top-level tagname rule"
);
});
add_task(async function testCombinator() {
info("Check that @starting-style with child/descendant combinator " +
"selectors are retrieved")
const styleSheet = document.styleSheets[1];
const el = document.querySelector("tagnametwo");
const rules = InspectorUtils.getMatchingCSSRules(el, "", false, true);
is(rules.length, 3, "Got expected rules");
is(
rules[0].cssText,
styleSheet.cssRules[2].cssRules[0].cssText,
"first returned rule for `tagnametwo` is the one in the top-level " +
"starting-style rule"
);
is(
rules[1]?.cssText,
styleSheet.cssRules[3].cssText,
"second returned rule for `tagnametwo` is top-level `body tagnametwo` rule"
);
is(
rules[2]?.cssText,
styleSheet.cssRules[3].cssRules[0].cssRules[0].cssText,
"third returned rule for `tagnametwo` is the starting-style nested " +
"in `body tagnametwo` rule"
);
});
</script>
|
