blob: adcd659762813e05ed1012768f98d8f196b974f4 [file] [log] [blame]
<!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>