diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /testing/web-platform/tests/css/selectors/media | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-upstream.tar.xz firefox-esr-upstream.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/selectors/media')
3 files changed, 180 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/selectors/media/media-loading-state.html b/testing/web-platform/tests/css/selectors/media/media-loading-state.html new file mode 100644 index 0000000000..b48cfc13fb --- /dev/null +++ b/testing/web-platform/tests/css/selectors/media/media-loading-state.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<meta name="timeout" content="long" /> +<title>Media Loading State: the :buffering and :stalled pseudo-classes</title> +<link + rel="help" + href="https://w3c.github.io/csswg-drafts/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> diff --git a/testing/web-platform/tests/css/selectors/media/media-playback-state.html b/testing/web-platform/tests/css/selectors/media/media-playback-state.html new file mode 100644 index 0000000000..628daa2521 --- /dev/null +++ b/testing/web-platform/tests/css/selectors/media/media-playback-state.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<title> + Media Playback State: the :playing, :paused, and :seeking pseudo-classes +</title> +<link + rel="help" + href="https://w3c.github.io/csswg-drafts/selectors/#video-state" +/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> + <video width="300" height="300" muted loop></video> + <script> + test((t) => { + for (const pseudo of [":playing", ":paused", ":seeking"]) { + 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("canplay", r, { once: true }); + video.src = "/media/counting.mp4"; + }); + video.muted = true; // allows us to play the video + assert_true(video.muted, "video is muted"); + assert_true(video.paused, "video is paused"); + await new Promise((r) => { + video.addEventListener("playing", r, { once: true }); + video.play(); + }); + assert_false(video.paused, "video is playing"); + assert_equals(document.querySelector("video:playing"), video); + assert_equals(document.querySelector("video:not(:playing)"), null); + assert_equals(document.querySelector("video:paused"), null); + assert_equals(document.querySelector("video:not(:paused)"), video); + }, "Test :playing pseudo-classes"); + + promise_test(async (t) => { + const video = document.querySelector("video"); + await new Promise((r) => { + video.addEventListener("canplay", r, { once: true }); + video.src = "/media/counting.mp4"; + }); + assert_equals(video.paused, true); + assert_equals(document.querySelector("video:playing"), null); + assert_equals(document.querySelector("video:not(:playing)"), video); + assert_equals(document.querySelector("video:paused"), video); + assert_equals(document.querySelector("video:not(:paused)"), null); + }, "Test :paused pseudo-classes"); + + promise_test(async (t) => { + const video = document.querySelector("video"); + await new Promise((r) => { + video.addEventListener("canplay", r, { once: true }); + video.src = "/media/counting.mp4"; + }); + assert_equals(document.querySelector("video:seeking"), null); + assert_equals(document.querySelector("video:not(:seeking)"), video); + await new Promise((r) => { + video.addEventListener("seeking", r, { once: true }); + video.currentTime = 10; + }); + assert_equals(document.querySelector("video:seeking"), video); + assert_equals(document.querySelector("video:not(:seeking)"), null); + }, "Test :seeking pseudo-class"); + </script> +</body> diff --git a/testing/web-platform/tests/css/selectors/media/sound-state.html b/testing/web-platform/tests/css/selectors/media/sound-state.html new file mode 100644 index 0000000000..d9eb86a5eb --- /dev/null +++ b/testing/web-platform/tests/css/selectors/media/sound-state.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<title>Sound State: the :muted and :volume-locked pseudo-classes</title> +<link + rel="help" + href="https://w3c.github.io/csswg-drafts/selectors/#sound-state" +/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> + <video width="300" height="300" loop></video> + <script type="module"> + // Unfortunately, we can't test the volume-locked state because it's not + // possible to lock the volume of a video element with JS. + + test((t) => { + for (const pseudo of [":muted", ":volume-locked"]) { + 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) => { + assert_equals( + document.querySelector("video:muted"), + null, + "must know :muted" + ); + const video = document.querySelector("video"); + await new Promise((r) => { + video.addEventListener("canplay", r, { once: true }); + video.src = "/media/counting.mp4"; + }); + video.muted = false; + assert_false(video.muted, "video is unmuted"); + assert_equals(document.querySelector("video:muted"), null); + assert_equals(document.querySelector("video:not(:muted)"), video); + video.muted = true; + assert_equals(document.querySelector("video:muted"), video); + assert_equals(document.querySelector("video:not(:muted)"), null); + }, "Test :muted pseudo-class"); + </script> +</body> |