summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/picture-in-picture/picture-in-picture-window.html
blob: ed1ad8e2cc903a14a9d08a79eb7faf14643a3ea5 (plain)
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
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<title>Test Picture-in-Picture window</title>
<meta name="timeout" content="long">
<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>
<body></body>
<script>
promise_test(async t => {
  const video = await loadVideo();
  return requestPictureInPictureWithTrustedClick(video)
  .then(pipWindow => {
    assert_not_equals(pipWindow.width, 0);
    assert_not_equals(pipWindow.height, 0);
    const videoAspectRatio = video.videoWidth / video.videoHeight;
    const pipWindowAspectRatio = pipWindow.width / pipWindow.height;
    assert_approx_equals(videoAspectRatio, pipWindowAspectRatio, 0.01);
  });
}, 'Picture-in-Picture window dimensions are set after entering Picture-in-Picture');

promise_test(async t => {
  const video1 = await loadVideo();
  const video2 = await loadVideo();
  return requestPictureInPictureWithTrustedClick(video1)
  .then(pipWindow1 => {
    return requestPictureInPictureWithTrustedClick(video2)
    .then(pipWindow2 => {
      assert_equals(pipWindow1.width, 0);
      assert_equals(pipWindow1.height, 0);
      assert_not_equals(pipWindow2.width, 0);
      assert_not_equals(pipWindow2.height, 0);
    });
  });
}, 'Picture-in-Picture window dimensions are set to 0 after entering ' +
   'Picture-in-Picture for another video');

promise_test(async t => {
  const video = await loadVideo();

  video.addEventListener('leavepictureinpicture', t.step_func_done(event => {
    assert_unreached('leavepictureinpicture event should not fire.')
  }));

  let enterCounts = 0;
  video.addEventListener('enterpictureinpicture', event => {
    enterCounts++;
  });

  return requestPictureInPictureWithTrustedClick(video)
  .then(pipWindow1 => {
    pipWindow1.onresize = function foo() {};
    return requestPictureInPictureWithTrustedClick(video)
    .then(pipWindow2 => {
      assert_equals(pipWindow1, pipWindow2);
      assert_equals(pipWindow1.width, pipWindow2.width);
      assert_equals(pipWindow1.height, pipWindow2.height);
      assert_equals(pipWindow1.onresize, pipWindow2.onresize);
      assert_equals(enterCounts, 1);
    });
  });
}, 'Picture-in-Picture window is unchanged after entering ' +
   'Picture-in-Picture for video already in Picture-in-Picture');

promise_test(async t => {
  const video = await loadVideo();

  return requestPictureInPictureWithTrustedClick(video)
  .then(pipWindow => {
    return document.exitPictureInPicture()
    .then(() => {
      assert_equals(pipWindow.width, 0);
      assert_equals(pipWindow.height, 0);
    });
  });
}, 'Picture-in-Picture window dimensions are set to 0 after exiting Picture-in-Picture');

promise_test(async t => {
  const video = await loadVideo();
  let thePipWindow;

  video.addEventListener('leavepictureinpicture', t.step_func_done(event => {
    assert_equals(thePipWindow.width, 0);
    assert_equals(thePipWindow.height, 0);
  }));

  return requestPictureInPictureWithTrustedClick(video)
  .then(pipWindow => {
    thePipWindow = pipWindow;
    video.disablePictureInPicture = true;
  });
}, 'Picture-in-Picture window dimensions are set to 0 if ' +
   'disablePictureInPicture becomes true');
</script>