sound-state.html (1752B)
1 <!DOCTYPE html> 2 <title>Sound State: the :muted and :volume-locked pseudo-classes</title> 3 <link 4 rel="help" 5 href="https://drafts.csswg.org/selectors/#sound-state" 6 /> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/common/media.js"></script> 10 <body> 11 <video width="300" height="300" loop></video> 12 <script type="module"> 13 // Unfortunately, we can't test the volume-locked state because it's not 14 // possible to lock the volume of a video element with JS. 15 16 test((t) => { 17 for (const pseudo of [":muted", ":volume-locked"]) { 18 try { 19 document.querySelector(`.not-a-thing${pseudo}`); 20 } catch (e) { 21 assert_unreached(`${pseudo} is not supported`); 22 } 23 } 24 }, "Test :pseudo-class syntax is supported without throwing a SyntaxError"); 25 26 promise_test(async (t) => { 27 assert_implements(CSS.supports("selector(:muted)"), ":muted is not supported"); 28 assert_equals( 29 document.querySelector("video:muted"), 30 null, 31 "must know :muted" 32 ); 33 const video = document.querySelector("video"); 34 await new Promise((r) => { 35 video.addEventListener("canplay", r, { once: true }); 36 video.src = getVideoURI("/media/counting"); 37 }); 38 video.muted = false; 39 assert_false(video.muted, "video is unmuted"); 40 assert_equals(document.querySelector("video:muted"), null); 41 assert_equals(document.querySelector("video:not(:muted)"), video); 42 video.muted = true; 43 assert_equals(document.querySelector("video:muted"), video); 44 assert_equals(document.querySelector("video:not(:muted)"), null); 45 }, "Test :muted pseudo-class"); 46 </script> 47 </body>