[Picture-in-Picture] Add Shadow DOM support for pictureInPictureElement

Until now, pictureInPictureElement was supported only in Document. This CL makes it compliant with the spec by adding Shadow DOM support to pictureInPictureElement. Note that I wish I could have used a partial interface DocumentOrShadowRoot but partial interface for mix-in IDL are not supported at that time (crbug.com/656517). Bug: 806249, 656517 Change-Id: I5f9666ea9c52ded9a6d07a238fc7756371b7550e Reviewed-on: https://chromium-review.googlesource.com/897513 Commit-Queue: Mounir Lamouri <[email protected]> Reviewed-by: apacible <[email protected]> Reviewed-by: Hayato Ito <[email protected]> Reviewed-by: Mounir Lamouri <[email protected]> Reviewed-by: Kentaro Hara <[email protected]> Cr-Commit-Position: refs/heads/master@{#535747}
web-platform-tests · Feb 9, 2018 · 92d4935 · 92d4935
1 parent 972d403
commit 92d4935
Showing 1 changed file with 57 additions and 0 deletions.
diff --git a/picture-in-picture/shadow-dom.html b/picture-in-picture/shadow-dom.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<title>Test for pictureInPictureElement adjustment for Shadow DOM</title>
+<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(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);
+
+  return 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);
+  })
+});
+</script>