| <!DOCTYPE html> |
| <meta charset=utf-8> |
| <title>Document.getAnimations</title> |
| <link rel="help" href="https://drafts.csswg.org/web-animations/#dom-document-getanimations"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="../../testcommon.js"></script> |
| <body> |
| <div id="log"></div> |
| <div id="target"></div> |
| <script> |
| 'use strict'; |
| |
| const gKeyFrames = { 'marginLeft': ['100px', '200px'] }; |
| |
| test(t => { |
| assert_equals(document.getAnimations().length, 0, |
| 'getAnimations returns an empty sequence for a document ' + |
| 'with no animations'); |
| }, 'Test document.getAnimations for non-animated content'); |
| |
| test(t => { |
| const div = createDiv(t); |
| const anim1 = div.animate(gKeyFrames, 100 * MS_PER_SEC); |
| const anim2 = div.animate(gKeyFrames, 100 * MS_PER_SEC); |
| assert_equals(document.getAnimations().length, 2, |
| 'getAnimation returns running animations'); |
| |
| anim1.finish(); |
| anim2.finish(); |
| assert_equals(document.getAnimations().length, 0, |
| 'getAnimation only returns running animations'); |
| }, 'Test document.getAnimations for script-generated animations') |
| |
| test(t => { |
| const div = createDiv(t); |
| const anim1 = div.animate(gKeyFrames, 100 * MS_PER_SEC); |
| const anim2 = div.animate(gKeyFrames, 100 * MS_PER_SEC); |
| assert_array_equals(document.getAnimations(), |
| [ anim1, anim2 ], |
| 'getAnimations() returns running animations'); |
| }, 'Test the order of document.getAnimations with script generated animations') |
| |
| test(t => { |
| // This element exists but is not a descendent of any document, so isn't |
| // picked up by getAnimations. |
| const div = document.createElement('div'); |
| const anim = div.animate(gKeyFrames, 100 * MS_PER_SEC); |
| assert_equals(document.getAnimations().length, 0); |
| |
| // Now connect the div; it should appear in the list of animations. |
| document.body.appendChild(div); |
| t.add_cleanup(() => { div.remove(); }); |
| assert_equals(document.getAnimations().length, 1); |
| }, 'Test document.getAnimations for a disconnected node'); |
| |
| test(t => { |
| const effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC); |
| const anim = new Animation(effect, document.timeline); |
| anim.play(); |
| |
| assert_equals(document.getAnimations().length, 0, |
| 'document.getAnimations() only returns animations targeting ' + |
| 'elements in this document'); |
| }, 'Test document.getAnimations with null target'); |
| |
| promise_test(async t => { |
| const iframe = document.createElement('iframe'); |
| |
| const eventWatcher = new EventWatcher(t, iframe, ['load']); |
| const event_promise = eventWatcher.wait_for('load'); |
| |
| document.body.appendChild(iframe); |
| t.add_cleanup(() => { document.body.removeChild(iframe); }); |
| |
| await event_promise; |
| |
| const div = createDiv(t, iframe.contentDocument) |
| const effect = new KeyframeEffect(div, null, 100 * MS_PER_SEC); |
| const anim = new Animation(effect, document.timeline); |
| anim.play(); |
| |
| // The animation's timeline is from the main document, but the effect's |
| // target element is part of the iframe document and that is what matters |
| // for getAnimations. |
| assert_equals(document.getAnimations().length, 0); |
| assert_equals(iframe.contentDocument.getAnimations().length, 1); |
| anim.finish(); |
| }, 'Test document.getAnimations for elements inside same-origin iframes'); |
| |
| promise_test(async t => { |
| const div = createDiv(t); |
| const watcher = EventWatcher(t, div, 'transitionrun'); |
| |
| // Create a covering animation to prevent transitions from firing after |
| // calling getAnimations(). |
| const coveringAnimation = new Animation( |
| new KeyframeEffect(div, { opacity: [0, 1] }, 100 * MS_PER_SEC) |
| ); |
| |
| // Setup transition start point. |
| div.style.transition = 'opacity 100s'; |
| getComputedStyle(div).opacity; |
| |
| // Update specified style but don't flush style. |
| div.style.opacity = '0.5'; |
| |
| // Fetch animations |
| document.getAnimations(); |
| |
| // Play the covering animation to ensure that only the call to |
| // getAnimations() has a chance to trigger transitions. |
| coveringAnimation.play(); |
| |
| // If getAnimations() flushed style, we should get a transitionrun event. |
| await watcher.wait_for('transitionrun'); |
| }, 'Triggers a style change event'); |
| |
| </script> |
| </body> |
