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
|
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Selectors Invalidation: :link, :visited :any-link, pseudo-class in :has() argument</title>
<link rel="author" title="Byungwoo Lee" href="blee@igalia.com">
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#parent { color: blue; }
#grandparent { color: blue; }
#parent:has(> :not(:link)) { color: grey; }
#parent:has(> :link) { color: green; }
#parent:has(> :visited) { color: red; }
#grandparent:has(:not(:any-link)) { color: grey; }
#grandparent:has(:any-link) { color: green; }
</style>
<div id="grandparent"></div>
<script>
const BLUE = "rgb(0, 0, 255)";
const GREY = "rgb(128, 128, 128)";
const GREEN = "rgb(0, 128, 0)";
const RED = "rgb(255, 0, 0)";
function checkColor(id, color, target_matches) {
let element = document.getElementById(id);
let message = ["location.hash ==", location.hash, ": #" + id, "should be",
color, (target_matches ? "with" : "without"),
":target"].join(" ");
assert_equals(getComputedStyle(element).color, color, message);
}
promise_test(async () => {
assert_equals(getComputedStyle(grandparent).color, BLUE,
"grandparent should be blue without any element");
let parent = document.createElement("div");
parent.id = "parent";
grandparent.appendChild(parent);
assert_equals(getComputedStyle(grandparent).color, GREY,
"grandparent should be grey after parent added");
assert_equals(getComputedStyle(parent).color, BLUE,
"parent should be blue without any link");
let div = document.createElement("div");
parent.appendChild(div);
assert_equals(getComputedStyle(grandparent).color, GREY,
"grandparent should be grey after div added");
assert_equals(getComputedStyle(parent).color, GREY,
"parent should be grey after div added");
let visited = document.createElement("a");
visited.href = "";
parent.appendChild(visited);
assert_equals(getComputedStyle(grandparent).color, GREEN,
"grandparent should be green after visited link added");
assert_equals(getComputedStyle(parent).color, GREEN,
"parent should be green after visited link added");
let unvisited = document.createElement("a");
unvisited.href = "unvisited";
parent.appendChild(unvisited);
assert_equals(getComputedStyle(grandparent).color, GREEN,
"grandparent should be green after unvisited link added");
assert_equals(getComputedStyle(parent).color, GREEN,
"parent should be green after unvisited link added");
unvisited.remove();
assert_equals(getComputedStyle(grandparent).color, GREEN,
"grandparent should be green after unvisited link removed");
assert_equals(getComputedStyle(parent).color, GREEN,
"parent should be blue after unvisited link removed");
visited.remove();
assert_equals(getComputedStyle(grandparent).color, GREY,
"grandparent should be grey after visited link removed");
assert_equals(getComputedStyle(parent).color, GREY,
"parent should be grey after visited link removed");
div.remove();
assert_equals(getComputedStyle(grandparent).color, GREY,
"grandparent should be grey after div removed");
assert_equals(getComputedStyle(parent).color, BLUE,
"parent should be blue after div removed");
parent.remove();
assert_equals(getComputedStyle(grandparent).color, BLUE,
"grandparent should be blue after parent removed");
});
</script>
|
