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
|
<!DOCTYPE HTML>
<html>
<head>
<title>Test InspectorUtils.getRuleIndex</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<style>
@property --color {
syntax: "*";
inherits: false;
}
html {
background: gold;
&:hover {
background: yellow;
}
& body {
color: tomato;
&:focus-visible {
outline: 1px solid cyan;
}
}
}
@keyframes anim {
0% {
color: blue;
}
100% {
color: green;
}
}
</style>
</head>
<body>
<code>InspectorUtils.getRuleIndex</code>
<script>
"use strict";
/** Test for InspectorUtils.getCSSRegisteredProperties **/
const { Assert } = SpecialPowers.ChromeUtils.importESModule(
"resource://testing-common/Assert.sys.mjs"
);
const InspectorUtils = SpecialPowers.InspectorUtils;
const stylesheet = document.styleSheets[1];
const stylesheetRules = stylesheet.cssRules;
let rule = stylesheetRules[0];
is(rule.name, "--color", "Expected @property rule");
Assert.deepEqual(InspectorUtils.getRuleIndex(rule), [0]);
rule = stylesheetRules[1];
is(rule.selectorText, "html", "Expected htlm rule");
Assert.deepEqual(InspectorUtils.getRuleIndex(rule), [1]);
rule = stylesheetRules[1].cssRules[0];
is(rule.selectorText, "&:hover", "Expected nested &:hover rule");
Assert.deepEqual(InspectorUtils.getRuleIndex(rule), [1, 0]);
rule = stylesheetRules[1].cssRules[1];
is(rule.selectorText, "& body", "Expected nested & body rule");
Assert.deepEqual(InspectorUtils.getRuleIndex(rule), [1, 1]);
rule = stylesheetRules[1].cssRules[1].cssRules[0];
is(rule.selectorText, "&:focus-visible", "Expected nested &:focus-visible rule");
Assert.deepEqual(InspectorUtils.getRuleIndex(rule), [1, 1, 0]);
rule = stylesheetRules[2];
is(rule.name, "anim", "Expected @keyframes rule");
Assert.deepEqual(InspectorUtils.getRuleIndex(rule), [2]);
rule = stylesheetRules[2].cssRules[0];
is(rule.keyText, "0%", "Expected 0% keyframe rule");
Assert.deepEqual(InspectorUtils.getRuleIndex(rule), [2, 0]);
rule = stylesheetRules[2].cssRules[1];
is(rule.keyText, "100%", "Expected 100% keyframe rule");
Assert.deepEqual(InspectorUtils.getRuleIndex(rule), [2, 1]);
</script>
</pre>
</body>
</html>
|
