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
|
<!DOCTYPE html>
<title>Test getMatchingCSSRules for pseudo elements</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css">
<style>
#block:before {
display: block;
content: ":before";
}
#block:after {
display: block;
content: ":after";
}
#table:before {
display: table;
content: ":before";
}
#table:after {
display: table;
content: ":after";
}
#flex:before {
display: flex;
content: ":before";
}
#flex:after {
display: flex;
content: ":after";
}
#grid:before {
display: grid;
content: ":before";
}
#grid:after {
display: grid;
content: ":after";
}
</style>
<div id="block">block pseudos</div>
<div id="table">table pseudos</div>
<div id="flex">flex pseudos</div>
<div id="grid">grid pseudos</div>
<script>
const InspectorUtils = SpecialPowers.InspectorUtils;
function checkPseudoStyleForId(id) {
let element = document.getElementById(id);
let beforeRules = InspectorUtils.getMatchingCSSRules(element, ":before");
is (beforeRules.length, 1, "Element " + id + ":before has expected number of rules.");
let beforeDecl = beforeRules[0].style;
is (beforeDecl.content, '":before"', "Element " + id + ":before has expected style content.");
let afterRules = InspectorUtils.getMatchingCSSRules(element, ":after");
is (afterRules.length, 1, "Element " + id + ":after has expected number of rules.");
let afterDecl = afterRules[0].style;
is (afterDecl.content, '":after"', "Element " + id + ":after has expected style content.");
}
let idsToCheck = [
"block",
"table",
"flex",
"grid",
];
for (let id of idsToCheck) {
checkPseudoStyleForId(id);
}
</script>
|
