media-playback-state.html (3244B)
1 <!DOCTYPE html> 2 <title> 3 Media Playback State: the :playing, :paused, and :seeking pseudo-classes 4 </title> 5 <link 6 rel="help" 7 href="https://drafts.csswg.org/selectors/#video-state" 8 /> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/common/media.js"></script> 12 <body> 13 <video width="300" height="300" muted loop></video> 14 <script> 15 test((t) => { 16 for (const pseudo of [":playing", ":paused", ":seeking"]) { 17 try { 18 document.querySelector(`.not-a-thing${pseudo}`); 19 } catch (e) { 20 assert_unreached(`${pseudo} is not supported`); 21 } 22 } 23 }, "Test :pseudo-class syntax is supported without throwing a SyntaxError"); 24 25 promise_test(async (t) => { 26 assert_implements(CSS.supports("selector(:playing)"), ":playing is not supported"); 27 const video = document.querySelector("video"); 28 await new Promise((r) => { 29 video.addEventListener("canplay", r, { once: true }); 30 video.src = getVideoURI("/media/counting"); 31 }); 32 video.muted = true; // allows us to play the video 33 assert_true(video.muted, "video is muted"); 34 assert_true(video.paused, "video is paused"); 35 await new Promise((r) => { 36 video.addEventListener("playing", r, { once: true }); 37 video.play(); 38 }); 39 assert_false(video.paused, "video is playing"); 40 assert_equals(document.querySelector("video:playing"), video); 41 assert_equals(document.querySelector("video:not(:playing)"), null); 42 assert_equals(document.querySelector("video:paused"), null); 43 assert_equals(document.querySelector("video:not(:paused)"), video); 44 }, "Test :playing pseudo-class"); 45 46 promise_test(async (t) => { 47 assert_implements(CSS.supports("selector(:paused)"), ":paused is not supported"); 48 const video = document.querySelector("video"); 49 await new Promise((r) => { 50 video.addEventListener("canplay", r, { once: true }); 51 video.src = getVideoURI("/media/counting"); 52 }); 53 assert_equals(video.paused, true); 54 assert_equals(document.querySelector("video:playing"), null); 55 assert_equals(document.querySelector("video:not(:playing)"), video); 56 assert_equals(document.querySelector("video:paused"), video); 57 assert_equals(document.querySelector("video:not(:paused)"), null); 58 }, "Test :paused pseudo-class"); 59 60 promise_test(async (t) => { 61 assert_implements(CSS.supports("selector(:seeking)"), ":seeking is not supported"); 62 const video = document.querySelector("video"); 63 await new Promise((r) => { 64 video.addEventListener("canplay", r, { once: true }); 65 video.src = getVideoURI("/media/counting"); 66 }); 67 assert_equals(document.querySelector("video:seeking"), null); 68 assert_equals(document.querySelector("video:not(:seeking)"), video); 69 await new Promise((r) => { 70 video.addEventListener("seeking", r, { once: true }); 71 video.currentTime = 10; 72 }); 73 assert_equals(document.querySelector("video:seeking"), video); 74 assert_equals(document.querySelector("video:not(:seeking)"), null); 75 }, "Test :seeking pseudo-class"); 76 </script> 77 </body>