| <!doctype HTML> |
| <html> |
| <head> |
| <title>Test :volume-locked pseudo-class</title> |
| <style> |
| #subject { |
| background-color: red; |
| } |
| #subject:has(:volume-locked) { |
| background-color: green; |
| } |
| </style> |
| <script src="video-test.js"></script> |
| <script src="media-file.js"></script> |
| <script> |
| window.addEventListener('load', async event => { |
| findMediaElement(); |
| run('video.src = findMediaFile("video", "content/test")'); |
| await waitFor(video, 'canplay'); |
| run('internals.setMediaElementVolumeLocked(video, false)'); |
| testExpected('document.querySelector("video:volume-locked")', null); |
| testExpected('document.querySelector("video:not(:volume-locked)")', video); |
| testExpected('getComputedStyle(subject).backgroundColor', "rgb(255, 0, 0)"); |
| run('internals.setMediaElementVolumeLocked(video, true)'); |
| testExpected('document.querySelector("video:volume-locked")', video); |
| testExpected('document.querySelector("video:not(:volume-locked)")', null); |
| testExpected('getComputedStyle(subject).backgroundColor', "rgb(0, 128, 0)"); |
| endTest(); |
| }); |
| </script> |
| <head> |
| <body> |
| <div id="subject"> |
| <video></video> |
| </div> |
| </body> |
| </html> |
