Split DocumentOrShadowRoot/getAnimations mixin page under real interface pages

files/en-us/_redirects.txt

@@ -7516,7 +7516,6 @@
 /en-US/docs/Web/API/Document/elementFromPoint	/en-US/docs/Web/API/DocumentOrShadowRoot/elementFromPoint
 /en-US/docs/Web/API/Document/elementsFromPoint	/en-US/docs/Web/API/DocumentOrShadowRoot/elementsFromPoint
 /en-US/docs/Web/API/Document/firstElementChild	/en-US/docs/Web/API/ParentNode/firstElementChild
-/en-US/docs/Web/API/Document/getAnimations	/en-US/docs/Web/API/DocumentOrShadowRoot/getAnimations
 /en-US/docs/Web/API/Document/getSelection	/en-US/docs/Web/API/DocumentOrShadowRoot/getSelection
 /en-US/docs/Web/API/Document/inputEncoding	/en-US/docs/Web/API/document/characterSet
 /en-US/docs/Web/API/Document/lastElementChild	/en-US/docs/Web/API/ParentNode/lastElementChild
@@ -7558,6 +7557,7 @@
 /en-US/docs/Web/API/DocumentFragment/lastElementChild	/en-US/docs/Web/API/ParentNode/lastElementChild
 /en-US/docs/Web/API/DocumentOrShadowRoot/activeElement	/en-US/docs/Web/API/Document/activeElement
 /en-US/docs/Web/API/DocumentOrShadowRoot/fullscreenElement	/en-US/docs/Web/API/Document/fullscreenElement
+/en-US/docs/Web/API/DocumentOrShadowRoot/getAnimations	/en-US/docs/Web/API/Document/getAnimations
 /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/pictureInPictureElement	/en-US/docs/Web/API/Document/pictureInPictureElement

files/en-us/_wikihistory.json

@@ -44334,19 +44334,6 @@
       "jpmedley"
     ]
   },
-  "Web/API/DocumentOrShadowRoot/getAnimations": {
-    "modified": "2020-12-13T19:52:52.030Z",
-    "contributors": [
-      "sideshowbarker",
-      "Rumyra",
-      "mfuji09",
-      "birtles",
-      "fscholz",
-      "Sheppy",
-      "chrisdavidmills",
-      "rachelnabors"
-    ]
-  },
   "Web/API/DocumentOrShadowRoot/getSelection": {
     "modified": "2020-10-15T21:49:28.182Z",
     "contributors": [
@@ -165798,5 +165785,18 @@
       "david_ross",
       "jpmedley"
     ]
+  },
+  "Web/API/Document/getAnimations": {
+    "modified": "2020-12-13T19:52:52.030Z",
+    "contributors": [
+      "sideshowbarker",
+      "Rumyra",
+      "mfuji09",
+      "birtles",
+      "fscholz",
+      "Sheppy",
+      "chrisdavidmills",
+      "rachelnabors"
+    ]
   }
-}
+}

files/en-us/mdn/contribute/howto/write_an_api_reference/index.html

@@ -422,7 +422,7 @@ <h4 id="Method_page_examples">Method page examples</h4>
 <p>The following are exemplary examples of Interface pages:</p>
 
 <ul>
- <li>{{domxref("DocumentOrShadowRoot/getAnimations")}} from the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>.</li>
+ <li>{{domxref("Document.getAnimations")}} from the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>.</li>
  <li>{{domxref("WindowOrWorkerGlobalScope/fetch")}} from the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</li>
 </ul>
 

files/en-us/mozilla/firefox/releases/75/index.html

@@ -85,7 +85,7 @@ <h4 id="Web_animations_API">Web animations API</h4>
   </ul>
  </li>
  <li>The <code><a href="/en-US/docs/Web/API/Animation/timeline">Animation.timeline</a></code> getter, <code><a href="/en-US/docs/Web/API/Document/timeline">Document.timeline</a></code>, <code><a href="/en-US/docs/Web/API/DocumentTimeline">DocumentTimeline</a></code>, and <code><a href="/en-US/docs/Web/API/AnimationTimeline">AnimationTimeline</a></code> features are now enabled by default ({{bug(1619178)}}).</li>
- <li>The <code><a href="/en-US/docs/Web/API/DocumentOrShadowRoot/getAnimations">Document.getAnimations()</a></code> and <code><a href="/en-US/docs/Web/API/Element/getAnimations">Element.getAnimations()</a></code> methods are now enabled by default ({{bug(1619821)}}).</li>
+ <li>The <code><a href="/en-US/docs/Web/API/Document/getAnimations">Document.getAnimations()</a></code> and <code><a href="/en-US/docs/Web/API/Element/getAnimations">Element.getAnimations()</a></code> methods are now enabled by default ({{bug(1619821)}}).</li>
 </ul>
 
 <h4 id="Media_Web_Audio_and_WebRTC">Media, Web Audio, and WebRTC</h4>

files/en-us/web/accessibility/seizure_disorders/index.html

@@ -331,7 +331,7 @@ <h3 id="JavaScript_animation">JavaScript animation</h3>
 
 <p>JavaScript is often used to control &lt;canvas&gt; elements and SVGs. Most JavaScript code that applies to HTML5 video also applies to audio. <strong><code>HTMLMediaElement.playbackRate</code></strong> is used to implement user controls for the playback rate for both video and audio. A value of 1.0 is default and considered normal speed; a value of 0.5 is half the speed, a value of 2.0 is twice the speed. A negative number plays the video or audio backwards. Set the playback rate property: <strong><code>HTMLMediaElement.playbackRate = playbackspeed</code></strong></p>
 
-<p><strong><a href="/en-US/docs/Web/API/DocumentOrShadowRoot/getAnimations">document.getAnimations()</a></strong> is an experimental technology, and includes <strong><a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a></strong>, <strong><a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a></strong>, and <strong><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations</a></strong>. The MDN document, <strong><a href="/en-US/docs/Web/API/DocumentOrShadowRoot/getAnimations">Document.getAnimations()</a></strong> provides the following code sample of how to slow down all animations on a page to half speed.</p>
+<p><strong><a href="/en-US/docs/Web/API/Document/getAnimations">document.getAnimations()</a></strong> is an experimental technology, and includes <strong><a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a></strong>, <strong><a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a></strong>, and <strong><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations</a></strong>. The MDN document, <strong><a href="/en-US/docs/Web/API/Document/getAnimations">Document.getAnimations()</a></strong> provides the following code sample of how to slow down all animations on a page to half speed.</p>
 
 <pre class="brush: js">document.getAnimations().forEach(
   function (animation) {

files/en-us/web/api/documentorshadowroot/getanimations/index.html → files/en-us/web/api/document/getanimations/index.html

@@ -1,23 +1,22 @@
 ---
-title: DocumentOrShadowRoot.getAnimations()
-slug: Web/API/DocumentOrShadowRoot/getAnimations
+title: Document.getAnimations()
+slug: Web/API/Document/getAnimations
 tags:
-- API
-- Animation
-- CSS
-- CSS Animations
-- CSS Transitions
-- Document
-- Experimental
-- Method
-- Reference
-- Transitions
-- Web Animations
-- getAnimations
-- waapi
-- web animations api
+  - API
+  - Animation
+  - CSS
+  - CSS Animations
+  - CSS Transitions
+  - Document
+  - Method
+  - Reference
+  - Transitions
+  - Web Animations
+  - getAnimations
+  - waapi
+  - web animations api
 ---
-<p>{{ SeeCompatTable() }}{{APIRef("Web Animations")}}</p>
+<p>{{APIRef("Web Animations")}}</p>
 
 <p>The <code>getAnimations()</code> method of the {{domxref("Document")}} interface
   returns an array of all {{domxref("Animation")}} objects currently in effect whose
@@ -28,8 +27,7 @@
 
 <h2 id="Syntax">Syntax</h2>
 
-<pre class="brush: js">var <var>allAnimations</var> = <var>Document</var>.getAnimations();
-</pre>
+<pre class="brush: js">getAnimations();</pre>
 
 <h3 id="Parameters">Parameters</h3>
 
@@ -58,16 +56,11 @@ <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('Web Animations', '#dom-animatable-getanimations',
-        'document.getAnimations()' )}}</td>
-      <td>{{Spec2('Web Animations')}}</td>
-      <td></td>
+      <td>{{SpecName('Web Animations', '#dom-documentorshadowroot-getanimations', 'DocumentOrShadowRoot.getAnimations()' )}}</td>
     </tr>
   </tbody>
 </table>

files/en-us/web/api/document/index.html

@@ -248,6 +248,8 @@ <h2 id="Methods">Methods</h2>
  <dd>Remove the video from the floating picture-in-picture window back to its original container.</dd>
  <dt>{{DOMxRef("Document.exitPointerLock()")}} {{Experimental_Inline}}</dt>
  <dd>Release the pointer lock.</dd>
+ <dt>{{DOMxRef("Document.getAnimations()")}}</dt>
+ <dd>Returns an array of all {{DOMxRef("Animation")}} objects currently in effect, whose target elements are descendants of the <code>document</code>.</dd>
  <dt>{{DOMxRef("Document.getElementsByClassName()")}}</dt>
  <dd>Returns a list of elements with the given class name.</dd>
  <dt>{{DOMxRef("Document.getElementsByTagName()")}}</dt>
@@ -338,8 +340,6 @@ <h3 id="Methods_included_from_DocumentOrShadowRoot">Methods included from Docume
  <dd>Returns the topmost element at the specified coordinates.</dd>
  <dt>{{DOMxRef("DocumentOrShadowRoot.elementsFromPoint()")}}</dt>
  <dd>Returns an array of all elements at the specified coordinates.</dd>
- <dt>{{DOMxRef("DocumentOrShadowRoot.getAnimations()")}} {{Experimental_Inline}}</dt>
- <dd>Returns an array of all {{DOMxRef("Animation")}} objects currently in effect, whose target elements are descendants of the <code>document</code></dd>
  <dt>{{DOMxRef("DocumentOrShadowRoot.getSelection()")}}</dt>
  <dd>Returns a {{DOMxRef('Selection')}} object representing the range of text selected by the user, or the current position of the caret.</dd>
 </dl>

files/en-us/web/api/shadowroot/getanimations/index.html

@@ -0,0 +1,84 @@
+---
+title: ShadowRoot.getAnimations()
+slug: Web/API/ShadowRoot/getAnimations
+tags:
+  - API
+  - Animation
+  - CSS
+  - CSS Animations
+  - CSS Transitions
+  - ShadowRoot
+  - Method
+  - Reference
+  - Transitions
+  - Web Animations
+  - getAnimations
+  - waapi
+  - web animations api
+---
+<p>{{APIRef("Web Animations")}}</p>
+
+<p>The <code>getAnimations()</code> method of the {{domxref("ShadowRoot")}} interface
+  returns an array of all {{domxref("Animation")}} objects currently in effect whose
+  target elements are descendants of the shadow tree. This array includes <a
+    href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a>, <a
+    href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a>, and <a
+    href="/en-US/docs/Web/API/Web_Animations_API">Web Animations</a>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">getAnimations();</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<p>None.</p>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>An {{jsxref("Array")}} of {{domxref("Animation")}} objects, each representing one
+  animation currently associated with elements which are descendants of the
+  {{domxref("ShadowRoot")}} on which it's called.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The following code snippet will slow down all animations in a shadow tree by halving their
+  {{domxref("Animation.playbackRate")}}.</p>
+
+<pre class="brush: js">
+let customElem = document.querySelector('my-shadow-dom-element');
+let shadow = customElem.shadowRoot;
+shadow.getAnimations().forEach(
+  function (animation) {
+    animation.playbackRate *= .5;
+  }
+);</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Specification</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('Web Animations', '#dom-documentorshadowroot-getanimations', 'DocumentOrShadowRoot.getAnimations()' )}}</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.ShadowRoot.getAnimations")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+  <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+  <li><a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a></li>
+  <li><a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a></li>
+  <li>{{domxref("Element.getAnimations()")}} - Fetch only the animations on a single
+    {{domxref("Element")}} and its descendants.</li>
+  <li>{{domxref("Animation")}}</li>
+</ul>

files/en-us/web/api/shadowroot/index.html

@@ -40,16 +40,16 @@ <h2 id="Properties">Properties</h2>
 
 <h2 id="Methods">Methods</h2>
 
-<p><em>The <code>ShadowRoot</code> interface includes the following methods defined on the {{domxref("DocumentOrShadowRoot")}} mixin. Note that this is currently only implemented by Chrome; other browsers still implement them on the {{domxref("Document")}} interface.</em></p>
-
 <dl>
- <dt>{{domxref("DocumentOrShadowRoot.getSelection()")}}</dt>
+ <dt>{{DOMxRef("ShadowRoot.getAnimations()")}}</dt>
+ <dd>Returns an array of all {{DOMxRef("Animation")}} objects currently in effect, whose target elements are descendants of the shadow tree.</dd>
+ <dt>{{domxref("ShadowRoot.getSelection()")}}</dt>
  <dd>Returns a {{domxref('Selection')}} object representing the range of text selected by the user, or the current position of the caret.</dd>
- <dt>{{domxref("DocumentOrShadowRoot.elementFromPoint()")}}</dt>
+ <dt>{{domxref("ShadowRoot.elementFromPoint()")}}</dt>
  <dd>Returns the topmost element at the specified coordinates.</dd>
- <dt>{{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}</dt>
+ <dt>{{domxref("ShadowRoot.elementsFromPoint()")}}</dt>
  <dd>Returns an array of all elements at the specified coordinates.</dd>
- <dt>{{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt>
+ <dt>{{domxref("ShadowRoot.caretPositionFromPoint()")}}</dt>
  <dd>Returns a {{domxref('CaretPosition')}} object containing the DOM node containing the caret, and caret's character offset within that node.</dd>
 </dl>
 

files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.html

@@ -234,7 +234,7 @@ <h3 id="Other_useful_methods">Other useful methods</h3>
 
 <h2 id="Getting_information_out_of_animations">Getting information out of animations</h2>
 
-<p>Imagine other ways we could use playbackRate, such as improving accessibility for users with vestibular disorders by letting them slow down animations across an entire site. That’s impossible to do with CSS without recalculating durations in every CSS rule, but with the Web Animations API, we could use the {{domxref("DocumentOrShadowRoot.getAnimations")}} method to loop over each animation on the page and halve their <code>playbackRate</code>s, like so:</p>
+<p>Imagine other ways we could use playbackRate, such as improving accessibility for users with vestibular disorders by letting them slow down animations across an entire site. That’s impossible to do with CSS without recalculating durations in every CSS rule, but with the Web Animations API, we could use the {{domxref("Document.getAnimations")}} method to loop over each animation on the page and halve their <code>playbackRate</code>s, like so:</p>
 
 <pre class="brush: js">document.getAnimations().forEach(
   function (animation) {