diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/picture-in-picture/shadow-dom.html | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/picture-in-picture/shadow-dom.html')
| -rw-r--r-- | testing/web-platform/tests/picture-in-picture/shadow-dom.html | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/testing/web-platform/tests/picture-in-picture/shadow-dom.html b/testing/web-platform/tests/picture-in-picture/shadow-dom.html new file mode 100644 index 0000000000..adcd659762 --- /dev/null +++ b/testing/web-platform/tests/picture-in-picture/shadow-dom.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<title>Test for Picture-In-Picture and Shadow DOM</title> +<script src="/common/media.js"></script> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="resources/picture-in-picture-helpers.js"></script> +<script src="../shadow-dom/resources/shadow-dom.js"></script> +<style> + #host2 { color: rgb(0, 0, 254); } + #host2:picture-in-picture { color: rgb(0, 0, 255); } +</style> +<body> +<div id='host'> + <template data-mode='open' id='root'> + <slot></slot> + </template> + <div id='host2'> + <template data-mode='open' id='root2'> + <style> + #host3 { color: rgb(0, 0, 127); } + #host3:picture-in-picture { color: rgb(0, 0, 128); } + </style> + <div id='host3'> + <template data-mode='open' id='root3'> + <style> + video { color: rgb(0, 254, 0); } + video:picture-in-picture { color: rgb(0, 255, 0); } + </style> + <video id='video'></video> + <div id='host4'> + <template data-mode='open' id='root4'> + <div></div> + </template> + </div> + </template> + </div> + <div id='host5'> + <template data-mode='open' id='root5'> + <div></div> + </template> + </div> + </template> + </div> +</div> +</body> +<script> +promise_test(async t => { + const ids = createTestTree(host); + document.body.appendChild(ids.host); + + assert_equals(document.pictureInPictureElement, null); + assert_equals(ids.root.pictureInPictureElement, null); + assert_equals(ids.root2.pictureInPictureElement, null); + assert_equals(ids.root3.pictureInPictureElement, null); + assert_equals(ids.root4.pictureInPictureElement, null); + assert_equals(ids.root5.pictureInPictureElement, null); + + assert_equals(getComputedStyle(ids.video).color, 'rgb(0, 254, 0)'); + assert_equals(getComputedStyle(ids.host3).color, 'rgb(0, 0, 127)'); + assert_equals(getComputedStyle(ids.host2).color, 'rgb(0, 0, 254)'); + + await new Promise(resolve => { + ids.video.src = getVideoURI('/media/movie_5'); + ids.video.onloadeddata = resolve; + }) + .then(() => requestPictureInPictureWithTrustedClick(ids.video)) + .then(() => { + assert_equals(document.pictureInPictureElement, ids.host2); + assert_equals(ids.root.pictureInPictureElement, null); + assert_equals(ids.root2.pictureInPictureElement, ids.host3); + assert_equals(ids.root3.pictureInPictureElement, ids.video); + assert_equals(ids.root4.pictureInPictureElement, null); + assert_equals(ids.root5.pictureInPictureElement, null); + + assert_equals(getComputedStyle(ids.video).color, 'rgb(0, 255, 0)'); + assert_equals(getComputedStyle(ids.host3).color, 'rgb(0, 0, 127)'); + assert_equals(getComputedStyle(ids.host2).color, 'rgb(0, 0, 254)'); + }) + .then(() => document.exitPictureInPicture()) + .then(() => { + assert_equals(getComputedStyle(ids.video).color, 'rgb(0, 254, 0)'); + assert_equals(getComputedStyle(ids.host3).color, 'rgb(0, 0, 127)'); + assert_equals(getComputedStyle(ids.host2).color, 'rgb(0, 0, 254)'); + }); +}); +</script> |