media-loading-pseudo-classes-in-has.html (2748B)
1 <!DOCTYPE html> 2 <meta name="timeout" content="long" /> 3 <title>:has() invalidation with :buffering & :stalled pseudo-classes</title> 4 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 5 <link rel="help" href="https://drafts.csswg.org/selectors/#relational"> 6 <link rel="help" href="https://drafts.csswg.org/selectors/#media-loading-state"> 7 8 <style> 9 #subject:has(video:buffering) { 10 background-color: blue; 11 } 12 #subject:has(video:stalled) { 13 border-color: green; 14 } 15 </style> 16 17 <div id="subject"> 18 <video width="300" height="300" muted loop controls></video> 19 </div> 20 21 <script src="/resources/testharness.js"></script> 22 <script src="/resources/testharnessreport.js"></script> 23 <script src="/common/media.js"></script> 24 <script> 25 const BLUE = "rgb(0, 0, 255)"; 26 const GREEN = "rgb(0, 128, 0)"; 27 28 function assert_buffering_state(buffering) { 29 if (buffering) 30 assert_equals(getComputedStyle(subject).backgroundColor, BLUE); 31 else 32 assert_not_equals(getComputedStyle(subject).backgroundColor, BLUE); 33 } 34 35 function assert_stalled_state(stalled) { 36 if (stalled) 37 assert_equals(getComputedStyle(subject).borderColor, GREEN); 38 else 39 assert_not_equals(getComputedStyle(subject).borderColor, GREEN); 40 } 41 42 promise_test(async (t) => { 43 assert_implements(CSS.supports("selector(:stalled)"), ":stalled is not supported"); 44 const video = document.querySelector("video"); 45 assert_stalled_state(false); 46 await new Promise((r) => { 47 video.addEventListener("stalled", r, { once: true }); 48 video.src = `${getVideoURI("/media/counting")}?pipe=trickle(100:d1:r2)&random=${Math.random()}`; 49 }); 50 assert_stalled_state(false); 51 const promise = video.play(); 52 assert_stalled_state(true); 53 video.src = ""; 54 // Wait for the video to abort trying to play 55 try { 56 await promise; 57 } catch (err) {} 58 await video.pause(); 59 assert_stalled_state(false); 60 }, "Test :has(:stalled) invalidation"); 61 62 promise_test(async (t) => { 63 assert_implements(CSS.supports("selector(:buffering)"), ":buffering is not supported"); 64 const video = document.querySelector("video"); 65 assert_buffering_state(false); 66 await new Promise((r) => { 67 video.addEventListener("stalled", r, { once: true }); 68 video.src = `${getVideoURI("/media/counting")}?pipe=trickle(100:d1:r2)&random=${Math.random()}`; 69 }); 70 video.currentTime = 10; 71 assert_buffering_state(false); 72 const promise = video.play(); 73 assert_buffering_state(true); 74 video.src = ""; 75 // Wait for the video to abort trying to play 76 try { 77 await promise; 78 } catch (err) {} 79 await video.pause(); 80 assert_buffering_state(false); 81 }, "Test :has(:buffering) invalidation"); 82 </script>