media-loading-state.html (2276B)
1 <!DOCTYPE html> 2 <meta name="timeout" content="long" /> 3 <title>Media Loading State: the :buffering and :stalled pseudo-classes</title> 4 <link 5 rel="help" 6 href="https://drafts.csswg.org/selectors/#media-loading-state" 7 /> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/common/media.js"></script> 11 <body> 12 <video width="300" height="300" muted loop controls></video> 13 <script type="module"> 14 test((t) => { 15 for (const pseudo of [":buffering", ":stalled"]) { 16 try { 17 document.querySelector(`.not-a-thing${pseudo}`); 18 } catch (e) { 19 assert_unreached(`${pseudo} is not supported`); 20 } 21 } 22 }, "Test :pseudo-class syntax is supported without throwing a SyntaxError"); 23 24 promise_test(async (t) => { 25 assert_implements(CSS.supports("selector(:stalled)"), ":stalled is not supported"); 26 const video = document.querySelector("video"); 27 await new Promise((r) => { 28 video.addEventListener("stalled", r, { once: true }); 29 video.src = `${getVideoURI("/media/counting")}?pipe=trickle(100:d1:r2)&random=${Math.random()}`; 30 }); 31 const promise = video.play(); 32 assert_equals( 33 document.querySelector("video:stalled"), 34 video, 35 "video is stalled" 36 ); 37 video.src = ""; 38 // Wait for the video to abort trying to play 39 try { 40 await promise; 41 } catch (err) {} 42 }, "Test :stalled pseudo-class"); 43 44 promise_test(async (t) => { 45 assert_implements(CSS.supports("selector(:buffering)"), ":buffering is not supported"); 46 const video = document.querySelector("video"); 47 await new Promise((r) => { 48 video.addEventListener("stalled", r, { once: true }); 49 video.src = `${getVideoURI("/media/counting")}?pipe=trickle(100:d1:r2)&random=${Math.random()}`; 50 }); 51 video.currentTime = 10; 52 const promise = video.play(); 53 assert_equals( 54 document.querySelector("video:buffering"), 55 video, 56 "video is buffering" 57 ); 58 video.src = ""; 59 // Wait for the video to abort trying to play 60 try { 61 await promise; 62 } catch (err) {} 63 }, "Test :buffering pseudo-class"); 64 </script> 65 </body>