<!DOCTYPE html>
<title>Test for pictureInPictureElement adjustment for 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>
<body>
<div id='host'>
<template data-mode='open' id='root'>
<slot></slot>
</template>
<div id='host2'>
<template data-mode='open' id='root2'>
<div id='host3'>
<template data-mode='open' id='root3'>
<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);
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);
})
.then(() => document.exitPictureInPicture());
});
</script>