-
Notifications
You must be signed in to change notification settings - Fork 3.3k
/
Copy pathmedia-pseudo-classes-in-has.html
114 lines (107 loc) · 3.51 KB
/
media-pseudo-classes-in-has.html
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
<!DOCTYPE html>
<title>:has() invalidation with :playing, :paused, :seeking and :muted pseudo-classes</title>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
<link rel="help" href="https://drafts.csswg.org/selectors/#video-state">
<style>
#subject {
background-color: black;
accent-color: black;
color: black;
border: 2px solid black;
}
#subject:has(:muted) {
background-color: red;
}
#subject:has(:playing) {
border-color: green;
}
#subject:has(:paused) {
color: orange;
}
#subject:has(:seeking) {
accent-color: blue;
}
</style>
<body>
<div id="subject">
Test media pseudo-classes invalidation with :has()
<input type="checkbox">
<video width="300" height="300" loop></video>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
const GREEN = "rgb(0, 128, 0)";
const ORANGE = "rgb(255, 165, 0)";
const BLUE = "rgb(0, 0, 255)";
const RED = "rgb(255, 0, 0)";
const BLACK = "rgb(0, 0, 0)";
function assert_matches_muted(muted) {
assert_equals(getComputedStyle(subject).backgroundColor, muted ? RED : BLACK);
}
function assert_matches_playing(playing) {
assert_equals(getComputedStyle(subject).borderColor, playing ? GREEN : BLACK);
assert_equals(getComputedStyle(subject).color, !playing ? ORANGE : BLACK);
}
function assert_matches_seeking(seeking) {
assert_equals(getComputedStyle(subject).accentColor, seeking ? BLUE : BLACK);
}
promise_test(async (t) => {
t.add_cleanup(() => {
video.muted = false;
video.pause();
video.removeAttribute("src");
});
const video = document.querySelector("video");
assert_matches_muted(false);
assert_matches_playing(false);
assert_matches_seeking(false);
await new Promise((r) => {
video.addEventListener("canplay", r, { once: true });
video.src = "/media/counting.mp4";
});
video.muted = true; // allows us to play the video
assert_matches_muted(true);
await new Promise((r) => {
video.addEventListener("playing", r, { once: true });
video.play();
});
assert_matches_playing(true);
}, "Test :playing pseudo-classes");
promise_test(async (t) => {
t.add_cleanup(() => {
video.removeAttribute("src");
});
const video = document.querySelector("video");
assert_matches_muted(false);
assert_matches_playing(false);
assert_matches_seeking(false);
await new Promise((r) => {
video.addEventListener("canplay", r, { once: true });
video.src = "/media/counting.mp4";
});
assert_matches_seeking(false);
await new Promise((r) => {
video.addEventListener("seeking", r, { once: true });
video.currentTime = 10;
});
assert_matches_seeking(true);
}, "Test :seeking pseudo-class");
promise_test(async (t) => {
t.add_cleanup(() => {
video.removeAttribute("src");
});
const video = document.querySelector("video");
await new Promise((r) => {
video.addEventListener("canplay", r, { once: true });
video.src = "/media/counting.mp4";
});
assert_matches_muted(false);
video.muted = true;
assert_matches_muted(true);
video.muted = false;
assert_matches_muted(false);
}, "Test :muted pseudo-class");
</script>
</body>