<!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>
Codebase Browser
chromium