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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
<!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;
}
}
body tagnamethree {
color: bisque;
@starting-style {
color: hotpink;
}
&::after {
content: "Hi";
}
}
</style>
<pre id="log"></pre>
<tagname></tagname>
<tagnametwo></tagnametwo>
<tagnamethree></tagnamethree>
<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"
);
});
add_task(async function testPseudo() {
info("Check that pseudo element on element with @starting-style are retrieved")
const styleSheet = document.styleSheets[1];
const el = document.querySelector("tagnamethree");
const rules = InspectorUtils.getMatchingCSSRules(el, ":after", false, true);
is(rules.length, 1, "Got expected number of rules");
is(rules[0].selectorText, "&::after", "Got expected ::after rule");
})
</script>
|
