diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index d1399ca7202177f..e934b2a0d884104 100644 --- a/files/en-us/_redirects.txt +++ b/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 diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 94bd18bdd77dbb9..de51048cd7d2a84 100644 --- a/files/en-us/_wikihistory.json +++ b/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" + ] } -} +} \ No newline at end of file diff --git a/files/en-us/mdn/contribute/howto/write_an_api_reference/index.html b/files/en-us/mdn/contribute/howto/write_an_api_reference/index.html index 4eff58b8f84851a..b0b93952fc7f588 100644 --- a/files/en-us/mdn/contribute/howto/write_an_api_reference/index.html +++ b/files/en-us/mdn/contribute/howto/write_an_api_reference/index.html @@ -422,7 +422,7 @@

Method page examples

The following are exemplary examples of Interface pages:

diff --git a/files/en-us/mozilla/firefox/releases/75/index.html b/files/en-us/mozilla/firefox/releases/75/index.html index e3b4272ce8e797f..289c304cc66017e 100644 --- a/files/en-us/mozilla/firefox/releases/75/index.html +++ b/files/en-us/mozilla/firefox/releases/75/index.html @@ -85,7 +85,7 @@

Web animations API

  • The Animation.timeline getter, Document.timeline, DocumentTimeline, and AnimationTimeline features are now enabled by default ({{bug(1619178)}}).
  • -
  • The Document.getAnimations() and Element.getAnimations() methods are now enabled by default ({{bug(1619821)}}).
  • +
  • The Document.getAnimations() and Element.getAnimations() methods are now enabled by default ({{bug(1619821)}}).
  • Media, Web Audio, and WebRTC

    diff --git a/files/en-us/web/accessibility/seizure_disorders/index.html b/files/en-us/web/accessibility/seizure_disorders/index.html index 0bc06c13eb91ef5..aeb8ffe25dbf632 100644 --- a/files/en-us/web/accessibility/seizure_disorders/index.html +++ b/files/en-us/web/accessibility/seizure_disorders/index.html @@ -331,7 +331,7 @@

    JavaScript animation

    JavaScript is often used to control <canvas> elements and SVGs. Most JavaScript code that applies to HTML5 video also applies to audio. HTMLMediaElement.playbackRate 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: HTMLMediaElement.playbackRate = playbackspeed

    -

    document.getAnimations() is an experimental technology, and includes CSS Animations, CSS Transitions, and Web Animations. The MDN document, Document.getAnimations() provides the following code sample of how to slow down all animations on a page to half speed.

    +

    document.getAnimations() is an experimental technology, and includes CSS Animations, CSS Transitions, and Web Animations. The MDN document, Document.getAnimations() provides the following code sample of how to slow down all animations on a page to half speed.

    document.getAnimations().forEach(
       function (animation) {
    diff --git a/files/en-us/web/api/documentorshadowroot/getanimations/index.html b/files/en-us/web/api/document/getanimations/index.html
    similarity index 73%
    rename from files/en-us/web/api/documentorshadowroot/getanimations/index.html
    rename to files/en-us/web/api/document/getanimations/index.html
    index 83296629e1c0df7..5674129e10eb20d 100644
    --- a/files/en-us/web/api/documentorshadowroot/getanimations/index.html
    +++ b/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
     ---
    -

    {{ SeeCompatTable() }}{{APIRef("Web Animations")}}

    +

    {{APIRef("Web Animations")}}

    The getAnimations() method of the {{domxref("Document")}} interface returns an array of all {{domxref("Animation")}} objects currently in effect whose @@ -28,8 +27,7 @@

    Syntax

    -
    var allAnimations = Document.getAnimations();
    -
    +
    getAnimations();

    Parameters

    @@ -58,16 +56,11 @@

    Specifications

    Specification - Status - Comment - {{SpecName('Web Animations', '#dom-animatable-getanimations', - 'document.getAnimations()' )}} - {{Spec2('Web Animations')}} - + {{SpecName('Web Animations', '#dom-documentorshadowroot-getanimations', 'DocumentOrShadowRoot.getAnimations()' )}} diff --git a/files/en-us/web/api/document/index.html b/files/en-us/web/api/document/index.html index 23438fe4c17b8bd..bf14e6b850a1842 100644 --- a/files/en-us/web/api/document/index.html +++ b/files/en-us/web/api/document/index.html @@ -248,6 +248,8 @@

    Methods

    Remove the video from the floating picture-in-picture window back to its original container.
    {{DOMxRef("Document.exitPointerLock()")}} {{Experimental_Inline}}
    Release the pointer lock.
    +
    {{DOMxRef("Document.getAnimations()")}}
    +
    Returns an array of all {{DOMxRef("Animation")}} objects currently in effect, whose target elements are descendants of the document.
    {{DOMxRef("Document.getElementsByClassName()")}}
    Returns a list of elements with the given class name.
    {{DOMxRef("Document.getElementsByTagName()")}}
    @@ -338,8 +340,6 @@

    Methods included from Docume
    Returns the topmost element at the specified coordinates.
    {{DOMxRef("DocumentOrShadowRoot.elementsFromPoint()")}}
    Returns an array of all elements at the specified coordinates.
    -
    {{DOMxRef("DocumentOrShadowRoot.getAnimations()")}} {{Experimental_Inline}}
    -
    Returns an array of all {{DOMxRef("Animation")}} objects currently in effect, whose target elements are descendants of the document
    {{DOMxRef("DocumentOrShadowRoot.getSelection()")}}
    Returns a {{DOMxRef('Selection')}} object representing the range of text selected by the user, or the current position of the caret.
    diff --git a/files/en-us/web/api/shadowroot/getanimations/index.html b/files/en-us/web/api/shadowroot/getanimations/index.html new file mode 100644 index 000000000000000..221c2754b18741e --- /dev/null +++ b/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 +--- +

    {{APIRef("Web Animations")}}

    + +

    The getAnimations() 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 CSS Animations, CSS Transitions, and Web Animations.

    + +

    Syntax

    + +
    getAnimations();
    + +

    Parameters

    + +

    None.

    + +

    Return value

    + +

    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.

    + +

    Examples

    + +

    The following code snippet will slow down all animations in a shadow tree by halving their + {{domxref("Animation.playbackRate")}}.

    + +
    +let customElem = document.querySelector('my-shadow-dom-element');
    +let shadow = customElem.shadowRoot;
    +shadow.getAnimations().forEach(
    +  function (animation) {
    +    animation.playbackRate *= .5;
    +  }
    +);
    + +

    Specifications

    + + + + + + + + + + + + +
    Specification
    {{SpecName('Web Animations', '#dom-documentorshadowroot-getanimations', 'DocumentOrShadowRoot.getAnimations()' )}}
    + +

    Browser compatibility

    + +

    {{Compat("api.ShadowRoot.getAnimations")}}

    + +

    See also

    + + diff --git a/files/en-us/web/api/shadowroot/index.html b/files/en-us/web/api/shadowroot/index.html index e3a2250b58bc9ae..9a14ab70a112aa0 100644 --- a/files/en-us/web/api/shadowroot/index.html +++ b/files/en-us/web/api/shadowroot/index.html @@ -40,16 +40,16 @@

    Properties

    Methods

    -

    The ShadowRoot 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.

    -
    -
    {{domxref("DocumentOrShadowRoot.getSelection()")}}
    +
    {{DOMxRef("ShadowRoot.getAnimations()")}}
    +
    Returns an array of all {{DOMxRef("Animation")}} objects currently in effect, whose target elements are descendants of the shadow tree.
    +
    {{domxref("ShadowRoot.getSelection()")}}
    Returns a {{domxref('Selection')}} object representing the range of text selected by the user, or the current position of the caret.
    -
    {{domxref("DocumentOrShadowRoot.elementFromPoint()")}}
    +
    {{domxref("ShadowRoot.elementFromPoint()")}}
    Returns the topmost element at the specified coordinates.
    -
    {{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}
    +
    {{domxref("ShadowRoot.elementsFromPoint()")}}
    Returns an array of all elements at the specified coordinates.
    -
    {{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}
    +
    {{domxref("ShadowRoot.caretPositionFromPoint()")}}
    Returns a {{domxref('CaretPosition')}} object containing the DOM node containing the caret, and caret's character offset within that node.
    diff --git a/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.html b/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.html index db9cf153f143157..cf6a49745906e02 100644 --- a/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.html +++ b/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.html @@ -234,7 +234,7 @@

    Other useful methods

    Getting information out of animations

    -

    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 playbackRates, like so:

    +

    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 playbackRates, like so:

    document.getAnimations().forEach(
       function (animation) {