css-selector.html (1088B)
1 <!DOCTYPE html> 2 <title>Test CSS selector :picture-in-picture</title> 3 <script src="/common/media.js"></script> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 <script src="resources/picture-in-picture-helpers.js"></script> 9 <style> 10 video { 11 color: rgb(0, 0, 255); 12 } 13 :picture-in-picture { 14 color: rgb(0, 255, 0); 15 } 16 /* illegal selector list */ 17 video, :picture-in-picture(*) { 18 color: rgb(255, 0, 0); 19 } 20 </style> 21 <body></body> 22 <script> 23 promise_test(async t => { 24 const video = await loadVideo(); 25 document.body.appendChild(video); 26 assert_equals(getComputedStyle(video).color, 'rgb(0, 0, 255)'); 27 28 await requestPictureInPictureWithTrustedClick(video); 29 assert_equals(getComputedStyle(video).color, 'rgb(0, 255, 0)'); 30 31 await document.exitPictureInPicture(); 32 assert_equals(getComputedStyle(video).color, 'rgb(0, 0, 255)'); 33 }, 'Entering and leaving Picture-in-Picture toggles CSS selector'); 34 </script>