88 lines
3.1 KiB
HTML
88 lines
3.1 KiB
HTML
<!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>
|