<!DOCTYPE html>
<meta name="timeout" content="long" />
<title>Media Loading State: the :buffering and :stalled pseudo-classes</title>
<link
rel="help"
href="https://drafts.csswg.org/selectors/#media-loading-state"
/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<video width="300" height="300" muted loop controls></video>
<script type="module">
test((t) => {
for (const pseudo of [":buffering", ":stalled"]) {
try {
document.querySelector(`.not-a-thing${pseudo}`);
} catch (e) {
assert_unreached(`${pseudo} is not supported`);
}
}
}, "Test :pseudo-class syntax is supported without throwing a SyntaxError");
promise_test(async (t) => {
const video = document.querySelector("video");
await new Promise((r) => {
video.addEventListener("stalled", r, { once: true });
video.src = `/media/counting.mp4?pipe=trickle(100:d1:r2)&random=${Math.random()}`;
});
const promise = video.play();
assert_equals(
document.querySelector("video:stalled"),
video,
"video is stalled"
);
video.src = "";
// Wait for the video to abort trying to play
try {
await promise;
} catch (err) {}
}, "Test :stalled pseudo-class");
promise_test(async (t) => {
const video = document.querySelector("video");
await new Promise((r) => {
video.addEventListener("stalled", r, { once: true });
video.src = `/media/counting.mp4?pipe=trickle(100:d1:r2)&random=${Math.random()}`;
});
video.currentTime = 10;
const promise = video.play();
assert_equals(
document.querySelector("video:buffering"),
video,
"video is buffering"
);
video.src = "";
// Wait for the video to abort trying to play
try {
await promise;
} catch (err) {}
}, "Test :buffering pseudo-class");
</script>
</body>
Codebase Browser
chromium