shadow-dom.html - mozsearch

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /picture-in-picture/shadow-dom.html - WPT Dashboard Interop Dashboard

<!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>