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
|
<!DOCTYPE html>
<html>
<head>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
<style>
#target:visited, div {
color: lime;
}
#target:link, div {
color: pink;
}
</style>
</head>
<body>
<a href="test" id="target">test-target</a>
<script>
const VISITED_SELECTOR = "#target:visited";
const LINK_SELECTOR = "#target:link";
const TEST_DATA = [
{
description: "Test for visited style",
isVisitedTest: true,
validSelector: VISITED_SELECTOR,
invalidSelector: LINK_SELECTOR,
},
{
description: "Test for unvisited style",
isVisitedTest: false,
validSelector: LINK_SELECTOR,
invalidSelector: VISITED_SELECTOR,
},
];
function start() {
const target = document.getElementById("target");
for (const { description, isVisitedTest,
validSelector, invalidSelector } of TEST_DATA) {
info(description);
const rules =
InspectorUtils.getCSSStyleRules(target, undefined, isVisitedTest);
ok(getRule(rules, validSelector),
`Rule of ${validSelector} is in rules`);
ok(!getRule(rules, invalidSelector),
`Rule of ${invalidSelector} is not in rules`);
const targetRule = getRule(rules, validSelector);
const isTargetSelectorMatched = targetRule.selectorMatchesElement(0, target, undefined, isVisitedTest);
const isDivSelectorMatched = targetRule.selectorMatchesElement(1, target, undefined, isVisitedTest);
ok(isTargetSelectorMatched,
`${validSelector} selector is matched for the rule`);
ok(!isDivSelectorMatched,
"div selector is not matched for the rule");
}
SimpleTest.finish();
}
function getRule(rules, selector) {
for (const rule of rules) {
if (rule.selectorText.startsWith(selector)) {
return rule;
}
}
return null;
}
SimpleTest.waitForExplicitFinish();
document.addEventListener('DOMContentLoaded', start);
</script>
</body>
</html>
|
