Bug 1203009 part 6 - Add tests for new composite order; r=heycam
authorBrian Birtles <birtles@gmail.com>
Tue, 15 Sep 2015 13:58:17 +0900
changeset 295305 1444325d48409dac0531e73f2df9d56ac7776557
parent 295304 44462cfe313478176cb383aa4b1068b6d3feaea8
child 295306 e37d0c2d053a28f4361a495a4ec20d8488406d64
push id5245
push userraliiev@mozilla.com
push dateThu, 29 Oct 2015 11:30:51 +0000
treeherdermozilla-beta@dac831dc1bd0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersheycam
bugs1203009
milestone43.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 1203009 part 6 - Add tests for new composite order; r=heycam
dom/animation/test/css-animations/file_timeline-get-animations.html
dom/animation/test/testcommon.js
--- a/dom/animation/test/css-animations/file_timeline-get-animations.html
+++ b/dom/animation/test/css-animations/file_timeline-get-animations.html
@@ -140,16 +140,64 @@ test(function(t) {
     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];
+  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();
+  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];
+
+  // Disassociate both animations from markup and restart in opposite order
+  div.style.animation = '';
+  animTop.play();
+  animLeft.play();
+
+  var animations = document.timeline.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,
+                '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';
@@ -186,16 +234,18 @@ test(function(t) {
 test(function(t) {
   var div = addDiv(t, { style: 'animation: animLeft 100s' });
   div.getAnimations()[0].cancel();
   assert_equals(document.timeline.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,
                 'CSS animations cancelled and restarted by the API are ' +
                 'returned');
 }, 'CSS Animations cancelled and restarted via the API are returned');
--- a/dom/animation/test/testcommon.js
+++ b/dom/animation/test/testcommon.js
@@ -25,16 +25,28 @@ function addDiv(t, attrs) {
         div.parentNode.removeChild(div);
       }
     });
   }
   return div;
 }
 
 /**
+ * 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());
+  });
+}
+
+/**
  * Promise wrapper for requestAnimationFrame.
  */
 function waitForFrame() {
   return new Promise(function(resolve, reject) {
     window.requestAnimationFrame(resolve);
   });
 }