shadow-dom.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/external/wpt/picture-in-picture/shadow-dom.html
