Skip to main content

Browse the archive

https://github.com/web-platform-tests/wpt
26 December 2018, 22:31:15 UTC
Raw File
Tip revision: 5423d8eda208d09132bddd79710ef3e716746218 authored by Mike Pennisi on 12 September 2018, 23:30:20 UTC
Demonstrate on downstream fork
Tip revision: 5423d8e
shadow-dom.html 
<!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>
back to top