Bug 1212720 - Part 2: Tests for document.getAnimations. r=heycam
authorHiroyuki Ikezoe <hiikezoe@mozilla-japan.org>
Wed, 06 Jan 2016 14:22:00 -0500
changeset 278918 26974dc2a13d5b0f286b6084731e4e47e59d621b
parent 278917 832653b10478c1f7f755ac3d324b4562cea3fded
child 278919 bf320c73ab1a316873dba82cbea85fc28fe671d5
push id29860
push usercbook@mozilla.com
push dateThu, 07 Jan 2016 10:51:20 +0000
treeherdermozilla-central@e0bcd16e1d4b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersheycam
bugs1212720
milestone46.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1212720 - Part 2: Tests for document.getAnimations. r=heycam
dom/animation/test/css-animations/file_document-get-animations.html
dom/animation/test/css-animations/file_timeline-get-animations.html
dom/animation/test/css-animations/test_document-get-animations.html
dom/animation/test/css-animations/test_timeline-get-animations.html
dom/animation/test/css-transitions/file_document-get-animations.html
dom/animation/test/css-transitions/file_timeline-get-animations.html
dom/animation/test/css-transitions/test_document-get-animations.html
dom/animation/test/css-transitions/test_timeline-get-animations.html
dom/animation/test/mochitest.ini
dom/animation/test/testcommon.js
rename from dom/animation/test/css-animations/file_timeline-get-animations.html
rename to dom/animation/test/css-animations/file_document-get-animations.html
--- a/dom/animation/test/css-animations/file_timeline-get-animations.html
+++ b/dom/animation/test/css-animations/file_document-get-animations.html
@@ -19,46 +19,46 @@
   animation: animLeft 100s;
 }
 </style>
 <body>
 <script>
 'use strict';
 
 test(function(t) {
-  assert_equals(document.timeline.getAnimations().length, 0,
+  assert_equals(document.getAnimations().length, 0,
     'getAnimations returns an empty sequence for a document'
     + ' with no animations');
 }, 'getAnimations for non-animated content');
 
 test(function(t) {
   var div = addDiv(t);
 
   // Add an animation
   div.style.animation = 'animLeft 100s';
-  assert_equals(document.timeline.getAnimations().length, 1,
+  assert_equals(document.getAnimations().length, 1,
                 'getAnimations returns a running CSS Animation');
 
   // Add another animation
   div.style.animation = 'animLeft 100s, animTop 100s';
-  assert_equals(document.timeline.getAnimations().length, 2,
+  assert_equals(document.getAnimations().length, 2,
                 'getAnimations returns two running CSS Animations');
 
   // Remove both
   div.style.animation = '';
-  assert_equals(document.timeline.getAnimations().length, 0,
+  assert_equals(document.getAnimations().length, 0,
                 'getAnimations returns no running CSS Animations');
 }, 'getAnimations for CSS Animations');
 
 test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'animLeft 100s, animTop 100s, animRight 100s, ' +
                         'animBottom 100s';
 
-  var animations = document.timeline.getAnimations();
+  var animations = document.getAnimations();
   assert_equals(animations.length, 4,
                 'getAnimations returns all running CSS Animations');
   assert_equals(animations[0].animationName, 'animLeft',
                 'Order of first animation returned');
   assert_equals(animations[1].animationName, 'animTop',
                 'Order of second animation returned');
   assert_equals(animations[2].animationName, 'animRight',
                 'Order of third animation returned');
@@ -67,17 +67,17 @@ test(function(t) {
 }, 'Order of CSS Animations - within an element');
 
 test(function(t) {
   var div1 = addDiv(t, { style: 'animation: animLeft 100s' });
   var div2 = addDiv(t, { style: 'animation: animLeft 100s' });
   var div3 = addDiv(t, { style: 'animation: animLeft 100s' });
   var div4 = addDiv(t, { style: 'animation: animLeft 100s' });
 
-  var animations = document.timeline.getAnimations();
+  var animations = document.getAnimations();
   assert_equals(animations.length, 4,
                 'getAnimations returns all running CSS Animations');
   assert_equals(animations[0].effect.target, div1,
                 'Order of first animation returned');
   assert_equals(animations[1].effect.target, div2,
                 'Order of second animation returned');
   assert_equals(animations[2].effect.target, div3,
                 'Order of third animation returned');
@@ -90,17 +90,17 @@ test(function(t) {
   //       /  |
   //      2   3
   //    /  \
   //   1   4
   //
   // Which should give: 2, 1, 4, 3
   div2.appendChild(div1);
   div2.appendChild(div4);
-  animations = document.timeline.getAnimations();
+  animations = document.getAnimations();
   assert_equals(animations[0].effect.target, div2,
                 'Order of first animation returned after tree surgery');
   assert_equals(animations[1].effect.target, div1,
                 'Order of second animation returned after tree surgery');
   assert_equals(animations[2].effect.target, div4,
                 'Order of third animation returned after tree surgery');
   assert_equals(animations[3].effect.target, div3,
                 'Order of fourth animation returned after tree surgery');
@@ -109,17 +109,17 @@ test(function(t) {
 
 test(function(t) {
   var div1 = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
   var div2 = addDiv(t, { style: 'animation: animBottom 100s' });
 
   var expectedResults = [ [ div1, 'animLeft' ],
                           [ div1, 'animTop' ],
                           [ div2, 'animBottom' ] ];
-  var animations = document.timeline.getAnimations();
+  var animations = document.getAnimations();
   assert_equals(animations.length, expectedResults.length,
                 'getAnimations returns all running CSS Animations');
   animations.forEach(function(anim, i) {
     assert_equals(anim.effect.target, expectedResults[i][0],
                   'Target of animation in position ' + i);
     assert_equals(anim.animationName, expectedResults[i][1],
                   'Name of animation in position ' + i);
   });
@@ -127,139 +127,139 @@ test(function(t) {
   // Modify tree structure and animation list
   div2.appendChild(div1);
   div1.style.animation = 'animLeft 100s, animRight 100s, animTop 100s';
 
   expectedResults = [ [ div2, 'animBottom' ],
                       [ div1, 'animLeft' ],
                       [ div1, 'animRight' ],
                       [ div1, 'animTop' ] ];
-  animations = document.timeline.getAnimations();
+  animations = document.getAnimations();
   assert_equals(animations.length, expectedResults.length,
                 'getAnimations returns all running CSS Animations after ' +
                 'making changes');
   animations.forEach(function(anim, i) {
     assert_equals(anim.effect.target, expectedResults[i][0],
                   'Target of animation in position ' + i + ' after changes');
     assert_equals(anim.animationName, expectedResults[i][1],
                   'Name of animation in position ' + i + ' after changes');
   });
 }, 'Order of CSS Animations - across and within elements');
 
 test(function(t) {
   cancelAllAnimationsOnEnd(t);
 
   var div = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
-  var animLeft = document.timeline.getAnimations()[0];
+  var animLeft = document.getAnimations()[0];
   assert_equals(animLeft.animationName, 'animLeft',
                 'Originally, animLeft animation comes first');
 
   // Disassociate animLeft from markup and restart
   div.style.animation = 'animTop 100s';
   animLeft.play();
 
-  var animations = document.timeline.getAnimations();
+  var animations = document.getAnimations();
   assert_equals(animations.length, 2,
                 'getAnimations returns markup-bound and free animations');
   assert_equals(animations[0].animationName, 'animTop',
                 'Markup-bound animations come first');
   assert_equals(animations[1], animLeft, 'Free animations come last');
 }, 'Order of CSS Animations - markup-bound vs free animations');
 
 test(function(t) {
   cancelAllAnimationsOnEnd(t);
 
   var div = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
-  var animLeft = document.timeline.getAnimations()[0];
-  var animTop  = document.timeline.getAnimations()[1];
+  var animLeft = document.getAnimations()[0];
+  var animTop  = document.getAnimations()[1];
 
   // Disassociate both animations from markup and restart in opposite order
   div.style.animation = '';
   animTop.play();
   animLeft.play();
 
-  var animations = document.timeline.getAnimations();
+  var animations = document.getAnimations();
   assert_equals(animations.length, 2,
                 'getAnimations returns free animations');
   assert_equals(animations[0], animTop,
                 'Free animations are returned in the order they are started');
   assert_equals(animations[1], animLeft,
                 'Animations started later are returned later');
 
   // Restarting an animation should have no effect
   animTop.cancel();
   animTop.play();
-  assert_equals(document.timeline.getAnimations()[0], animTop,
+  assert_equals(document.getAnimations()[0], animTop,
                 'After restarting, the ordering of free animations' +
                 ' does not change');
 }, 'Order of CSS Animations - free animations');
 
 test(function(t) {
   // Add an animation first
   var div = addDiv(t, { style: 'animation: animLeft 100s' });
   div.style.top = '0px';
   div.style.transition = 'all 100s';
   flushComputedStyle(div);
 
   // *Then* add a transition
   div.style.top = '100px';
   flushComputedStyle(div);
 
   // Although the transition was added later, it should come first in the list
-  var animations = document.timeline.getAnimations();
+  var animations = document.getAnimations();
   assert_equals(animations.length, 2,
                 'Both CSS animations and transitions are returned');
   assert_class_string(animations[0], 'CSSTransition', 'Transition comes first');
   assert_class_string(animations[1], 'CSSAnimation', 'Animation comes second');
 }, 'Order of CSS Animations and CSS Transitions');
 
 test(function(t) {
   var div = addDiv(t, { style: 'animation: animLeft 100s forwards' });
   div.getAnimations()[0].finish();
-  assert_equals(document.timeline.getAnimations().length, 1,
+  assert_equals(document.getAnimations().length, 1,
                 'Forwards-filling CSS animations are returned');
 }, 'Finished but filling CSS Animations are returned');
 
 test(function(t) {
   var div = addDiv(t, { style: 'animation: animLeft 100s' });
   div.getAnimations()[0].finish();
-  assert_equals(document.timeline.getAnimations().length, 0,
+  assert_equals(document.getAnimations().length, 0,
                 'Non-filling finished CSS animations are not returned');
 }, 'Finished but not filling CSS Animations are not returned');
 
 test(function(t) {
   var div = addDiv(t, { style: 'animation: animLeft 100s 100s' });
-  assert_equals(document.timeline.getAnimations().length, 1,
+  assert_equals(document.getAnimations().length, 1,
                 'Yet-to-start CSS animations are returned');
 }, 'Yet-to-start CSS Animations are returned');
 
 test(function(t) {
   var div = addDiv(t, { style: 'animation: animLeft 100s' });
   div.getAnimations()[0].cancel();
-  assert_equals(document.timeline.getAnimations().length, 0,
+  assert_equals(document.getAnimations().length, 0,
                 'CSS animations cancelled by the API are not returned');
 }, 'CSS Animations cancelled via the API are not returned');
 
 test(function(t) {
   cancelAllAnimationsOnEnd(t);
 
   var div = addDiv(t, { style: 'animation: animLeft 100s' });
   var anim = div.getAnimations()[0];
   anim.cancel();
   anim.play();
-  assert_equals(document.timeline.getAnimations().length, 1,
+  assert_equals(document.getAnimations().length, 1,
                 'CSS animations cancelled and restarted by the API are ' +
                 'returned');
 }, 'CSS Animations cancelled and restarted via the API are returned');
 
 test(function(t) {
   var div = addDiv(t, { class: 'with-before-animation' });
   // FIXME: This should actually return the animation on the pseudo element
   // but we haven't implemented a PseudoElement interface to use as
   // animation's target (bug 1174575) so we simply don't return these animations
   // until we can support them properly.
-  assert_equals(document.timeline.getAnimations().length, 0,
+  assert_equals(document.getAnimations().length, 0,
                 'CSS animations on pseudo elements are not returned');
 }, 'CSS Animations targetting pseudo-elements are not returned');
 
 done();
 </script>
 </body>
rename from dom/animation/test/css-animations/test_timeline-get-animations.html
rename to dom/animation/test/css-animations/test_document-get-animations.html
--- a/dom/animation/test/css-animations/test_timeline-get-animations.html
+++ b/dom/animation/test/css-animations/test_document-get-animations.html
@@ -4,12 +4,12 @@
 <script src="/resources/testharnessreport.js"></script>
 <div id="log"></div>
 <script>
 'use strict';
 setup({explicit_done: true});
 SpecialPowers.pushPrefEnv(
   { "set": [["dom.animations-api.core.enabled", true]]},
   function() {
-    window.open("file_timeline-get-animations.html");
+    window.open("file_document-get-animations.html");
   });
 </script>
 </html>
rename from dom/animation/test/css-transitions/file_timeline-get-animations.html
rename to dom/animation/test/css-transitions/file_document-get-animations.html
--- a/dom/animation/test/css-transitions/file_timeline-get-animations.html
+++ b/dom/animation/test/css-transitions/file_document-get-animations.html
@@ -1,50 +1,50 @@
 <!doctype html>
 <meta charset=utf-8>
 <script src="../testcommon.js"></script>
 <body>
 <script>
 'use strict';
 
 test(function(t) {
-  assert_equals(document.timeline.getAnimations().length, 0,
+  assert_equals(document.getAnimations().length, 0,
     'getAnimations returns an empty sequence for a document'
     + ' with no animations');
 }, 'getAnimations for non-animated content');
 
 test(function(t) {
   var div = addDiv(t);
 
   // Add a couple of transitions
   div.style.left = '0px';
   div.style.top = '0px';
   getComputedStyle(div).transitionProperty;
 
   div.style.transition = 'all 100s';
   div.style.left = '100px';
   div.style.top = '100px';
-  assert_equals(document.timeline.getAnimations().length, 2,
+  assert_equals(document.getAnimations().length, 2,
                 'getAnimations returns two running CSS Transitions');
 
   // Remove both
   div.style.transitionProperty = 'none';
-  assert_equals(document.timeline.getAnimations().length, 0,
+  assert_equals(document.getAnimations().length, 0,
                 'getAnimations returns no running CSS Transitions');
 }, 'getAnimations for CSS Transitions');
 
 async_test(function(t) {
   var div = addDiv(t, { style: 'left: 0px; transition: all 50ms' });
   flushComputedStyle(div);
 
   div.style.left = '100px';
   var animations = div.getAnimations();
   assert_equals(animations.length, 1, 'Got transition');
   animations[0].finished.then(t.step_func(function() {
-    assert_equals(document.timeline.getAnimations().length, 0,
+    assert_equals(document.getAnimations().length, 0,
                   'No animations returned');
     t.done();
   }));
 }, 'Transitions are not returned after they have finished');
 
 done();
 </script>
 </body>
rename from dom/animation/test/css-transitions/test_timeline-get-animations.html
rename to dom/animation/test/css-transitions/test_document-get-animations.html
--- a/dom/animation/test/css-transitions/test_timeline-get-animations.html
+++ b/dom/animation/test/css-transitions/test_document-get-animations.html
@@ -4,12 +4,12 @@
 <script src="/resources/testharnessreport.js"></script>
 <div id="log"></div>
 <script>
 'use strict';
 setup({explicit_done: true});
 SpecialPowers.pushPrefEnv(
   { "set": [["dom.animations-api.core.enabled", true]]},
   function() {
-    window.open("file_timeline-get-animations.html");
+    window.open("file_document-get-animations.html");
   });
 </script>
 </html>
--- a/dom/animation/test/mochitest.ini
+++ b/dom/animation/test/mochitest.ini
@@ -29,50 +29,50 @@ support-files = css-animations/file_anim
 [css-animations/test_animation-ready.html]
 support-files = css-animations/file_animation-ready.html
 [css-animations/test_animation-reverse.html]
 support-files = css-animations/file_animation-reverse.html
 [css-animations/test_animation-starttime.html]
 support-files = css-animations/file_animation-starttime.html
 [css-animations/test_cssanimation-animationname.html]
 support-files = css-animations/file_cssanimation-animationname.html
-[css-animations/test_keyframeeffect-getframes.html]
-support-files = css-animations/file_keyframeeffect-getframes.html
+[css-animations/test_document-get-animations.html]
+support-files = css-animations/file_document-get-animations.html
 [css-animations/test_effect-target.html]
 support-files = css-animations/file_effect-target.html
 [css-animations/test_element-get-animations.html]
 skip-if = buildapp == 'mulet'
 support-files = css-animations/file_element-get-animations.html
-[css-animations/test_timeline-get-animations.html]
-support-files = css-animations/file_timeline-get-animations.html
+[css-animations/test_keyframeeffect-getframes.html]
+support-files = css-animations/file_keyframeeffect-getframes.html
 [css-transitions/test_animation-cancel.html]
 support-files = css-transitions/file_animation-cancel.html
 [css-transitions/test_animation-computed-timing.html]
 support-files = css-transitions/file_animation-computed-timing.html
 [css-transitions/test_animation-currenttime.html]
 support-files = css-transitions/file_animation-currenttime.html
 [css-transitions/test_animation-finished.html]
 support-files = css-transitions/file_animation-finished.html
 [css-transitions/test_animation-pausing.html]
 support-files = css-transitions/file_animation-pausing.html
 [css-transitions/test_animation-ready.html]
 support-files = css-transitions/file_animation-ready.html
 [css-transitions/test_animation-starttime.html]
 support-files = css-transitions/file_animation-starttime.html
 [css-transitions/test_csstransition-transitionproperty.html]
 support-files = css-transitions/file_csstransition-transitionproperty.html
-[css-transitions/test_keyframeeffect-getframes.html]
-support-files = css-transitions/file_keyframeeffect-getframes.html
+[css-transitions/test_document-get-animations.html]
+support-files = css-transitions/file_document-get-animations.html
 [css-transitions/test_effect-target.html]
 support-files = css-transitions/file_effect-target.html
 [css-transitions/test_element-get-animations.html]
 skip-if = buildapp == 'mulet'
 support-files = css-transitions/file_element-get-animations.html
-[css-transitions/test_timeline-get-animations.html]
-support-files = css-transitions/file_timeline-get-animations.html
+[css-transitions/test_keyframeeffect-getframes.html]
+support-files = css-transitions/file_keyframeeffect-getframes.html
 [document-timeline/test_document-timeline.html]
 support-files = document-timeline/file_document-timeline.html
 [document-timeline/test_request_animation_frame.html]
 skip-if = buildapp == 'mulet'
 [mozilla/test_deferred_start.html]
 support-files = mozilla/file_deferred_start.html
 skip-if = (toolkit == 'gonk' && debug)
 [mozilla/test_hide_and_show.html]
--- a/dom/animation/test/testcommon.js
+++ b/dom/animation/test/testcommon.js
@@ -32,17 +32,17 @@ function addDiv(t, attrs) {
 /**
  * Some tests cause animations to continue to exist even after their target
  * element has been removed from the document tree. To ensure that these
  * animations do not impact other tests we should cancel them when the test
  * is complete.
  */
 function cancelAllAnimationsOnEnd(t) {
   t.add_cleanup(function() {
-    document.timeline.getAnimations().forEach(animation => animation.cancel());
+    document.getAnimations().forEach(animation => animation.cancel());
   });
 }
 
 /**
  * Promise wrapper for requestAnimationFrame.
  */
 function waitForFrame() {
   return new Promise(function(resolve, reject) {