shadow-dom.html (3217B)
1 <!DOCTYPE html> 2 <title>Test for Picture-In-Picture and Shadow DOM</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 <script src="../shadow-dom/resources/shadow-dom.js"></script> 10 <style> 11 #host2 { color: rgb(0, 0, 254); } 12 #host2:picture-in-picture { color: rgb(0, 0, 255); } 13 </style> 14 <body> 15 <div id='host'> 16 <template data-mode='open' id='root'> 17 <slot></slot> 18 </template> 19 <div id='host2'> 20 <template data-mode='open' id='root2'> 21 <style> 22 #host3 { color: rgb(0, 0, 127); } 23 #host3:picture-in-picture { color: rgb(0, 0, 128); } 24 </style> 25 <div id='host3'> 26 <template data-mode='open' id='root3'> 27 <style> 28 video { color: rgb(0, 254, 0); } 29 video:picture-in-picture { color: rgb(0, 255, 0); } 30 </style> 31 <video id='video'></video> 32 <div id='host4'> 33 <template data-mode='open' id='root4'> 34 <div></div> 35 </template> 36 </div> 37 </template> 38 </div> 39 <div id='host5'> 40 <template data-mode='open' id='root5'> 41 <div></div> 42 </template> 43 </div> 44 </template> 45 </div> 46 </div> 47 </body> 48 <script> 49 promise_test(async t => { 50 const ids = createTestTree(host); 51 document.body.appendChild(ids.host); 52 53 assert_equals(document.pictureInPictureElement, null); 54 assert_equals(ids.root.pictureInPictureElement, null); 55 assert_equals(ids.root2.pictureInPictureElement, null); 56 assert_equals(ids.root3.pictureInPictureElement, null); 57 assert_equals(ids.root4.pictureInPictureElement, null); 58 assert_equals(ids.root5.pictureInPictureElement, null); 59 60 assert_equals(getComputedStyle(ids.video).color, 'rgb(0, 254, 0)'); 61 assert_equals(getComputedStyle(ids.host3).color, 'rgb(0, 0, 127)'); 62 assert_equals(getComputedStyle(ids.host2).color, 'rgb(0, 0, 254)'); 63 64 await new Promise(resolve => { 65 ids.video.src = getVideoURI('/media/movie_5'); 66 ids.video.onloadeddata = resolve; 67 }) 68 .then(() => requestPictureInPictureWithTrustedClick(ids.video)) 69 .then(() => { 70 assert_equals(document.pictureInPictureElement, ids.host2); 71 assert_equals(ids.root.pictureInPictureElement, null); 72 assert_equals(ids.root2.pictureInPictureElement, ids.host3); 73 assert_equals(ids.root3.pictureInPictureElement, ids.video); 74 assert_equals(ids.root4.pictureInPictureElement, null); 75 assert_equals(ids.root5.pictureInPictureElement, null); 76 77 assert_equals(getComputedStyle(ids.video).color, 'rgb(0, 255, 0)'); 78 assert_equals(getComputedStyle(ids.host3).color, 'rgb(0, 0, 127)'); 79 assert_equals(getComputedStyle(ids.host2).color, 'rgb(0, 0, 254)'); 80 }) 81 .then(() => document.exitPictureInPicture()) 82 .then(() => { 83 assert_equals(getComputedStyle(ids.video).color, 'rgb(0, 254, 0)'); 84 assert_equals(getComputedStyle(ids.host3).color, 'rgb(0, 0, 127)'); 85 assert_equals(getComputedStyle(ids.host2).color, 'rgb(0, 0, 254)'); 86 }); 87 }); 88 </script>