1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
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>
|
