Split pictureInPictureElement to avoid mixin page (#2653)

* yarn content move Web/API/DocumentOrShadowRoot/pictureInPictureElement Web/API/Document/pictureInPictureElement * Update document.pictureInPictureElement * Add propety to document interface page * Fix various links * Add property to ShadowRoot page * Change HTMLVideoElement to Element (as per spec) * Add new page for ShadowRoot.pictureInPictureElement * copy edit * Address feedback * Manually update wrong redirect Co-authored-by: Chris Mills <cmills@mozilla.com>
mdn · Mar 3, 2021 · 69b0fa8 · 69b0fa8
1 parent ec35fbd
commit 69b0fa8
Show file tree

Hide file tree

Showing 11 changed files with 104 additions and 49 deletions.
diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
@@ -7564,7 +7564,8 @@
 /en-US/docs/Web/API/DocumentOrShadowRoot/fullscreenElement	/en-US/docs/Web/API/Document/fullscreenElement
 /en-US/docs/Web/API/DocumentOrShadowRoot/nodeFromPoint	/en-US/docs/Web/API/DocumentOrShadowRoot
 /en-US/docs/Web/API/DocumentOrShadowRoot/nodesFromPoint	/en-US/docs/Web/API/DocumentOrShadowRoot
-/en-US/docs/Web/API/DocumentOrShadowRoot/pictureInPictureEnabled	/en-US/docs/Web/API/DocumentOrShadowRoot/pictureInPictureElement
+/en-US/docs/Web/API/DocumentOrShadowRoot/pictureInPictureElement	/en-US/docs/Web/API/Document/pictureInPictureElement
+/en-US/docs/Web/API/DocumentOrShadowRoot/pictureInPictureEnabled	/en-US/docs/Web/API/Document/pictureInPictureEnabled
 /en-US/docs/Web/API/DocumentTouch.createTouch	/en-US/docs/Web/API/Document/createTouch
 /en-US/docs/Web/API/DocumentTouch.createTouchList	/en-US/docs/Web/API/Document/createTouchList
 /en-US/docs/Web/API/DocumentTouch/createTouch	/en-US/docs/Web/API/Document/createTouch

diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json
@@ -44381,13 +44381,6 @@
       "mattwojo"
     ]
   },
-  "Web/API/DocumentOrShadowRoot/pictureInPictureElement": {
-    "modified": "2020-10-25T11:04:35.581Z",
-    "contributors": [
-      "chrisdavidmills",
-      "germain"
-    ]
-  },
   "Web/API/DocumentOrShadowRoot/pointerLockElement": {
     "modified": "2020-10-15T21:25:15.470Z",
     "contributors": [
@@ -165819,5 +165812,12 @@
       "ziyunfei",
       "ernestd"
     ]
+  },
+  "Web/API/Document/pictureInPictureElement": {
+    "modified": "2020-10-25T11:04:35.581Z",
+    "contributors": [
+      "chrisdavidmills",
+      "germain"
+    ]
   }
-}
+}
diff --git a/files/en-us/web/api/document/exitpictureinpicture/index.html b/files/en-us/web/api/document/exitpictureinpicture/index.html
@@ -82,6 +82,6 @@ <h2 id="See_also">See also</h2>
   <li>{{DOMxRef("HTMLVideoElement.autoPictureInPicture")}}</li>
   <li>{{DOMxRef("HTMLVideoElement.disablePictureInPicture")}}</li>
   <li>{{DOMxRef("Document.pictureInPictureEnabled")}}</li>
-  <li>{{DOMxRef("DocumentOrShadowRoot.pictureInPictureElement")}}</li>
+  <li>{{DOMxRef("Document.pictureInPictureElement")}}</li>
   <li>{{CSSxRef(":picture-in-picture")}}</li>
 </ul>
diff --git a/files/en-us/web/api/document/index.html b/files/en-us/web/api/document/index.html
@@ -64,8 +64,10 @@ <h2 id="Properties">Properties</h2>
  <dd>Returns a list of all the hyperlinks in the document.</dd>
  <dt>{{DOMxRef("Document.mozSyntheticDocument")}} {{Non-standard_Inline}}</dt>
  <dd>Returns a {{JSxRef("Boolean")}} that is <code>true</code> only if this document is synthetic, such as a standalone image, video, audio file, or the like.</dd>
- <dt>{{DOMxRef("Document.pictureInPictureEnabled")}}{{ReadOnlyInline}}</dt>
- <dd>Returns true if the picture-in-picture feature is enabled</dd>
+ <dt>{{DOMxRef("Document.pictureInPictureElement")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the {{DOMxRef('Element')}} currently being presented in picture-in-picture mode in this document.</dd>
+ <dt>{{DOMxRef("Document.pictureInPictureEnabled")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns true if the picture-in-picture feature is enabled.</dd>
  <dt>{{DOMxRef("Document.plugins")}}{{ReadOnlyInline}}</dt>
  <dd>Returns a list of the available plugins.</dd>
  <dt>{{DOMxRef("Document.featurePolicy")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>

diff --git a/...owroot/pictureinpictureelement/index.html → ...cument/pictureinpictureelement/index.html b/...owroot/pictureinpictureelement/index.html → ...cument/pictureinpictureelement/index.html
@@ -1,24 +1,23 @@
 ---
-title: DocumentOrShadowRoot.pictureInPictureElement
-slug: Web/API/DocumentOrShadowRoot/pictureInPictureElement
+title: Document.pictureInPictureElement
+slug: Web/API/Document/pictureInPictureElement
 tags:
-- API
-- Document
-- DocumentOrShadowRoot
-- Graphics
-- Picture-in-Picture
-- Picture-in-Picture API
-- Property
-- Read-only
-- Reference
-- pictureInPictureElement
-- pip
+  - API
+  - Document
+  - Graphics
+  - Picture-in-Picture
+  - Picture-in-Picture API
+  - Property
+  - Read-only
+  - Reference
+  - pictureInPictureElement
+  - pip
 ---
 <div>{{ApiRef("Fullscreen API")}}</div>
 
 <p><span class="seoSummary">The
-    <code><strong>DocumentOrShadowRoot.pictureInPictureElement</strong></code> read-only
-    property returns the {{ domxref("HTMLVideoElement") }} that is currently being
+    <code><strong>Document.pictureInPictureElement</strong></code> read-only
+    property returns the {{ domxref("Element") }} that is currently being
     presented in picture-in-picture mode in this document, or <code>null</code> if
     picture-in-picture mode is not currently in use.</span></p>
 
@@ -28,21 +27,20 @@
 <h2 id="Syntax">Syntax</h2>
 
 <pre
-  class="brush: js"><var>var video</var> = <var>document</var>.pictureInPictureElement;</pre>
+  class="brush: js"><var>document</var>.pictureInPictureElement;</pre>
 
 <h3 id="Return_value">Return value</h3>
 
-<p>A reference to the {{domxref("HTMLVideoElement")}} object that's currently in
+<p>A reference to the {{domxref("Element")}} object that's currently in
   picture-in-picture mode; if picture-in-picture mode isn't currently in use by the
   <code><var>document</var></code>, the returned value is <code>null</code>.</p>
 
 <h2 id="Example">Examples</h2>
 
-<p>This example presents a function,
-  <code><a href="/en-US/docs/Web/API/Document/exitPictureInPicture">Document.exitPictureInPicture()</a></code>,
+<p>This example presents a function, <code>exitPictureInPicture()</code>,
   which tests the value returned by <code>pictureInPictureElement</code>. If the document
   is in picture-in-picture mode (<code>pictureInPictureElement</code> isn't
-  <code>null</code>), <code>exitPictureInPicture()</code> is run to exit
+  <code>null</code>), <code><a href="/en-US/docs/Web/API/Document/exitPictureInPicture">Document.exitPictureInPicture()</a></code> is run to exit
   picture-in-picture mode.</p>
 
 <pre class="brush: js">function exitPictureInPicture() {
@@ -57,24 +55,18 @@ <h2 id="Specifications">Specifications</h2>
   <thead>
     <tr>
       <th scope="col">Specification</th>
-      <th scope="col">Status</th>
-      <th scope="col">Comment</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <td>{{SpecName("Picture-in-Picture",
-        "#dom-documentorshadowroot-pictureinpictureelement",
-        "Document.pictureInPictureElement")}}</td>
-      <td>{{Spec2("Picture-in-Picture")}}</td>
-      <td>Initial definition</td>
+      <td>{{SpecName("Picture-in-Picture", "#dom-documentorshadowroot-pictureinpictureelement", "Document.pictureInPictureElement")}}</td>
     </tr>
   </tbody>
 </table>
 
 <h2 id="Browser_compatibility">Browser compatibility</h2>
 
-<p>{{Compat("api.DocumentOrShadowRoot.pictureInPictureElement")}}</p>
+<p>{{Compat("api.Document.pictureInPictureElement")}}</p>
 
 <h2 id="See_also">See also</h2>
 

diff --git a/files/en-us/web/api/document/pictureinpictureenabled/index.html b/files/en-us/web/api/document/pictureinpictureenabled/index.html
@@ -82,6 +82,6 @@ <h2 id="See_also">See also</h2>
   <li>{{DOMxRef("HTMLVideoElement.autoPictureInPicture")}}</li>
   <li>{{DOMxRef("HTMLVideoElement.disablePictureInPicture")}}</li>
   <li>{{DOMxRef("Document.exitPictureInPicture()")}}</li>
-  <li>{{DOMxRef("DocumentOrShadowRoot.pictureInPictureElement")}}</li>
+  <li>{{DOMxRef("Document.pictureInPictureElement")}}</li>
   <li>{{CSSxRef(":picture-in-picture")}}</li>
 </ul>
diff --git a/files/en-us/web/api/htmlvideoelement/requestpictureinpicture/index.html b/files/en-us/web/api/htmlvideoelement/requestpictureinpicture/index.html
@@ -77,6 +77,6 @@ <h2 id="See_also">See also</h2>
   <li>{{DOMxRef("HTMLVideoElement.disablePictureInPicture")}}</li>
   <li>{{DOMxRef("Document.pictureInPictureEnabled")}}</li>
   <li>{{DOMxRef("Document.exitPictureInPicture()")}}</li>
-  <li>{{DOMxRef("DocumentOrShadowRoot.pictureInPictureElement")}}</li>
+  <li>{{DOMxRef("Document.pictureInPictureElement")}}</li>
   <li>{{CSSxRef(":picture-in-picture")}}</li>
 </ul>
diff --git a/files/en-us/web/api/picture-in-picture_api/index.html b/files/en-us/web/api/picture-in-picture_api/index.html
@@ -63,11 +63,11 @@ <h3 id="Properties_on_the_Document_interface">Properties on the Document interfa
  <dd>The <code>pictureInPictureEnabled</code> property tells you whether or not it is possible to engage picture-in-picture mode. This is <code>false</code> if picture-in-picture mode is not available for any reason (e.g. the <a href="/en-US/docs/Web/HTTP/Headers/Feature-Policy/picture-in-picture"><code>"picture-in-picture"</code> feature</a> has been disallowed, or picture-in-picture mode is not supported).</dd>
 </dl>
 
-<h3 id="Properties_on_the_DocumentOrShadowRoot_interface">Properties on the DocumentOrShadowRoot interface</h3>
+<h3 id="Properties_on_the_Document_or_ShadowRoot_interfaces">Properties on the Document or ShadowRoot interfaces</h3>
 
 <dl>
- <dt>{{DOMxRef("DocumentOrShadowRoot.pictureInPictureElement")}}</dt>
- <dd>The <code>pictureInPictureElement</code> property tells you which {{DOMxRef("Element")}} is currently being displayed in the floating window. If this is <code>null</code>, the document has no node currently in picture-in-picture mode.</dd>
+ <dt>{{DOMxRef("Document.pictureInPictureElement")}} / {{DOMxRef("ShadowRoot.pictureInPictureElement")}}</dt>
+ <dd>The <code>pictureInPictureElement</code> property tells you which {{DOMxRef("Element")}} is currently being displayed in the floating window (or in the shadow DOM). If this is <code>null</code>, the document (or shadow DOM) has no node currently in picture-in-picture mode.</dd>
 </dl>
 
 <h2 id="Events">Events</h2>
@@ -164,11 +164,11 @@ <h3 id="Document.exitPictureInPicture"><code>Document.exitPictureInPicture</code
 
 <p>{{Compat("api.Document.exitPictureInPicture")}}</p>
 
-<h3 id="DocumentOrShadowRoot.pictureInPictureElement"><code>DocumentOrShadowRoot.pictureInPictureElement</code></h3>
+<h3 id="Document.pictureInPictureElement"><code>Document.pictureInPictureElement</code></h3>
 
 <div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
 
-<p>{{Compat("api.DocumentOrShadowRoot.pictureInPictureElement")}}</p>
+<p>{{Compat("api.Document.pictureInPictureElement")}}</p>
 
 <h3 id="PictureInPictureWindow"><code>PictureInPictureWindow</code></h3>
 
@@ -184,6 +184,6 @@ <h2 id="See_also">See also</h2>
  <li>{{DOMxRef("HTMLVideoElement.disablePictureInPicture")}}</li>
  <li>{{DOMxRef("Document.pictureInPictureEnabled")}}</li>
  <li>{{DOMxRef("Document.exitPictureInPicture()")}}</li>
- <li>{{DOMxRef("DocumentOrShadowRoot.pictureInPictureElement")}}</li>
+ <li>{{DOMxRef("Document.pictureInPictureElement")}}</li>
  <li>{{CSSxRef(":picture-in-picture")}}</li>
 </ul>
diff --git a/files/en-us/web/api/shadowroot/index.html b/files/en-us/web/api/shadowroot/index.html
@@ -30,6 +30,8 @@ <h2 id="Properties">Properties</h2>
  <dd>Sets or returns a reference to the DOM tree inside the <code>ShadowRoot</code>.</dd>
  <dt>{{domxref("ShadowRoot.mode")}} {{readonlyinline}}</dt>
  <dd>The mode of the <code>ShadowRoot</code> — either <code>open</code> or <code>closed</code>. This defines whether or not the shadow root's internal features are accessible from JavaScript.</dd>
+ <dt>{{DOMxRef("ShadowRoot.pictureInPictureElement")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the {{DOMxRef('Element')}} within the shadow tree that is currently being presented in picture-in-picture mode.</dd>
 </dl>
 
 <h3 id="Properties_included_from_DocumentOrShadowRoot">Properties included from DocumentOrShadowRoot</h3>

diff --git a/files/en-us/web/api/shadowroot/pictureinpictureelement/index.html b/files/en-us/web/api/shadowroot/pictureinpictureelement/index.html
@@ -0,0 +1,58 @@
+---
+title: ShadowRoot.pictureInPictureElement
+slug: Web/API/ShadowRoot/pictureInPictureElement
+tags:
+- API
+- Property
+- Reference
+- ShadowRoot
+- Web Components
+- shadow dom
+---
+<div>{{APIRef("Shadow DOM")}}</div>
+
+<p>The <strong><code>pictureInPictureElement</code></strong> read-only property of the
+{{domxref("ShadowRoot")}} interface returns the {{domxref("Element")}} that is currently being
+presented in picture-in-picture mode in this shadow tree, or <code>null</code> if
+picture-in-picture mode is not currently in use.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js"><var>shadowRoot</var>.pictureInPictureElement</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A reference to the {{domxref("Element")}} object that's currently in
+  picture-in-picture mode, or, if picture-in-picture mode isn't currently in use by the
+  shadow tree, the returned value is <code>null</code>.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">let customElem = document.querySelector('my-shadow-dom-element');
+let shadow = customElem.shadowRoot;
+let pipElem = shadow.pictureInPictureElement;</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Specification</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('Picture-in-Picture','#dom-documentorshadowroot-pictureinpictureelement', 'pictureInPictureElement')}}</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.ShadowRoot.pictureInPictureElement")}}</p>
+
+<h2>See also</h2>
+
+<ul>
+  <li>{{domxref("Document.pictureInPictureElement")}}</li>
+</ul>
diff --git a/files/en-us/web/css/_colon_picture-in-picture/index.html b/files/en-us/web/css/_colon_picture-in-picture/index.html
@@ -81,5 +81,5 @@ <h2 id="See_also">See also</h2>
  <li>{{DOMxRef("HTMLVideoElement.disablePictureInPicture")}}</li>
  <li>{{DOMxRef("Document.pictureInPictureEnabled")}}</li>
  <li>{{DOMxRef("Document.exitPictureInPicture()")}}</li>
- <li>{{DOMxRef("DocumentOrShadowRoot.pictureInPictureElement")}}</li>
+ <li>{{DOMxRef("Document.pictureInPictureElement")}}</li>
 </ul>