Bug 1234403 - Part 4: Test for the animation order returned by document.getAnimations(). r=birtles
authorBoris Chiou <boris.chiou@gmail.com>
Wed, 24 Feb 2016 03:13:00 +0100
changeset 285589 a40b8d9d7e46b3f4f7d9fc52d7939cf5d1323cf3
parent 285588 d49c6a43b80a4e95b5dcbac0878a6757011e39db
child 285590 2899d594244e661e00b7cbe47def2164792475d2
push id17831
push userkwierso@gmail.com
push dateThu, 25 Feb 2016 22:42:17 +0000
treeherderfx-team@8e34b12969bf [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbirtles
bugs1234403
milestone47.0a1
Bug 1234403 - Part 4: Test for the animation order returned by document.getAnimations(). r=birtles
dom/animation/test/css-animations/file_document-get-animations.html
dom/animation/test/css-transitions/file_document-get-animations.html
--- a/dom/animation/test/css-animations/file_document-get-animations.html
+++ b/dom/animation/test/css-animations/file_document-get-animations.html
@@ -9,20 +9,16 @@
   to { top: 100px }
 }
 @keyframes animBottom {
   to { bottom: 100px }
 }
 @keyframes animRight {
   to { right: 100px }
 }
-.with-before-animation::before {
-  content: " ";
-  animation: animLeft 100s;
-}
 </style>
 <body>
 <script>
 'use strict';
 
 test(function(t) {
   assert_equals(document.getAnimations().length, 0,
     'getAnimations returns an empty sequence for a document'
@@ -240,20 +236,41 @@ test(function(t) {
   anim.cancel();
   anim.play();
   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.getAnimations().length, 0,
-                'CSS animations on pseudo elements are not returned');
-}, 'CSS Animations targetting pseudo-elements are not returned');
+  addStyle(t, { '#parent::after': 'animation: animLeft 10s;',
+                '#parent::before': 'animation: animRight 10s;' });
+  // create two divs with these arrangement:
+  //       parent
+  //     ::before,
+  //     ::after
+  //        |
+  //       child
+  var parent = addDiv(t, { 'id': 'parent' });
+  var child = addDiv(t);
+  parent.appendChild(child);
+  [parent, child].forEach((div) => {
+    div.setAttribute('style', 'animation: animBottom 10s');
+  });
+
+  var anims = document.getAnimations();
+  assert_equals(anims.length, 4,
+                'CSS animations on both pseudo-elements and elements ' +
+                'are returned');
+  assert_equals(anims[0].effect.target, parent,
+                'The animation targeting the parent element comes first');
+  assert_equals(anims[1].effect.target.type, '::before',
+                'The animation targeting the ::before element comes second');
+  assert_equals(anims[2].effect.target.type, '::after',
+                'The animation targeting the ::after element comes third');
+  assert_equals(anims[3].effect.target, child,
+                'The animation targeting the child element comes last');
+}, 'CSS Animations targetting (pseudo-)elements should have correct order ' +
+   'after sorting');
 
 done();
 </script>
 </body>
--- a/dom/animation/test/css-transitions/file_document-get-animations.html
+++ b/dom/animation/test/css-transitions/file_document-get-animations.html
@@ -26,16 +26,59 @@ test(function(t) {
                 'getAnimations returns two running CSS Transitions');
 
   // Remove both
   div.style.transitionProperty = 'none';
   assert_equals(document.getAnimations().length, 0,
                 'getAnimations returns no running CSS Transitions');
 }, 'getAnimations for CSS Transitions');
 
+test(function(t) {
+  addStyle(t, { '.init::after': 'content: ""; width: 0px; ' +
+                                'transition: all 100s;',
+                '.init::before': 'content: ""; width: 0px; ' +
+                                 'transition: all 10s;',
+                '.change::after': 'width: 100px;',
+                '.change::before': 'width: 100px;' });
+  // create two divs with these arrangement:
+  //       parent
+  //     ::before,
+  //     ::after
+  //        |
+  //       child
+  var parent = addDiv(t);
+  var child = addDiv(t);
+  parent.appendChild(child);
+
+  parent.style.left = '0px';
+  parent.style.transition = 'left 10s';
+  parent.classList.add('init');
+  child.style.left = '0px';
+  child.style.transition = 'left 10s';
+  flushComputedStyle(parent);
+
+  parent.style.left = '100px';
+  parent.classList.add('change');
+  child.style.left = '100px';
+
+  var anims = document.getAnimations();
+  assert_equals(anims.length, 4,
+                'CSS transition on both pseudo-elements and elements ' +
+                'are returned');
+  assert_equals(anims[0].effect.target, parent,
+                'The animation targeting the parent element comes first');
+  assert_equals(anims[1].effect.target.type, '::before',
+                'The animation targeting the ::before element comes second');
+  assert_equals(anims[2].effect.target.type, '::after',
+                'The animation targeting the ::after element comes third');
+  assert_equals(anims[3].effect.target, child,
+                'The animation targeting the child element comes last');
+}, 'CSS Transitions targetting (pseudo-)elements should have correct order ' +
+   'after sorting');
+
 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() {