Bug 1466031 - Update test_element-get-animations.html; r?hiro draft
authorBrian Birtles <birtles@gmail.com>
Fri, 01 Jun 2018 16:28:39 +0900
changeset 802587 f0d29e527d539db53a6f6db4adb8b508e0d933c4
parent 802586 fd182bd1f952db8a15134d781978a385c018bc1c
child 802588 6362413cdb8448167a944b50e5beb0e1aedb1b77
push id111920
push userbmo:bbirtles@mozilla.com
push dateFri, 01 Jun 2018 07:32:08 +0000
reviewershiro
bugs1466031
milestone62.0a1
Bug 1466031 - Update test_element-get-animations.html; r?hiro As well as addressing a few FIXMEs this patch drops the checking of start times since that seems out of scope for this file and is covered elsewhere (I believe we only added it at first to bootstrap this work). MozReview-Commit-ID: 9NK4sUcRFM5
dom/animation/test/css-animations/test_element-get-animations.html
--- a/dom/animation/test/css-animations/test_element-get-animations.html
+++ b/dom/animation/test/css-animations/test_element-get-animations.html
@@ -32,47 +32,30 @@ test(t => {
   assert_equals(div.getAnimations().length, 0,
     'getAnimations returns an empty sequence for an element'
     + ' with no animations');
 }, 'getAnimations for non-animated content');
 
 promise_test(async t => {
   const div = addDiv(t);
 
-  // FIXME: This test does too many things. It should be split up.
-
   // Add an animation
   div.style.animation = 'anim1 100s';
   let animations = div.getAnimations();
   assert_equals(animations.length, 1,
     'getAnimations returns an Animation running CSS Animations');
   await animations[0].ready;
 
-  const startTime = animations[0].startTime;
-  assert_true(startTime > 0 && startTime <= document.timeline.currentTime,
-    'CSS animation has a sensible start time');
-
-  // Wait a moment then add a second animation.
-  //
-  // We wait for the next frame so that we can test that the start times of
-  // the animations differ.
-  await waitForFrame();
-
+  // Add a second animation
   div.style.animation = 'anim1 100s, anim2 100s';
   animations = div.getAnimations();
   assert_equals(animations.length, 2,
-    'getAnimations returns one Animation for each value of animation-name');
-  // Wait until both Animations are ready
-  // (We don't make any assumptions about the order of the Animations since
-  //  that is the purpose of the following test.)
-  await waitForAllAnimations(animations);
-
-  assert_true(animations[0].startTime < animations[1].startTime,
-    'Additional Animations for CSS animations start after the original'
-    + ' animation and appear later in the list');
+    'getAnimations returns one CSSAnimation for each value of animation-name');
+  // (We don't check the order of the Animations since that is covered by tests
+  //  later in this file.)
 }, 'getAnimations for CSS Animations');
 
 test(t => {
   const div = addDiv(t, { style: 'animation: anim1 100s' });
   assert_class_string(div.getAnimations()[0], 'CSSAnimation',
                       'Interface of returned animation is CSSAnimation');
 }, 'getAnimations returns CSSAnimation objects for CSS Animations');
 
@@ -251,18 +234,21 @@ test(t => {
                 'animation\'s play state is updated');
   assert_equals(originalAnimation, pendingAnimation,
                 'getAnimations returns the same objects even when their'
                 + ' play state changes');
 
   // Update duration (an Animation change)
   div.style.animationDuration = '200s';
   const extendedAnimation = div.getAnimations()[0];
-  // FIXME: Check extendedAnimation.effect.timing.duration has changed once the
-  // API is available
+  assert_equals(
+    extendedAnimation.effect.getTiming().duration,
+    200 * MS_PER_SEC,
+    'animation\'s duration has been updated'
+  );
   assert_equals(originalAnimation, extendedAnimation,
                 'getAnimations returns the same objects even when their'
                 + ' duration changes');
 }, 'getAnimations returns objects with the same identity');
 
 test(t => {
   const div = addDiv(t);
   div.style.animation = 'anim1 100s';
@@ -317,17 +303,18 @@ test(t => {
   const target = addDiv(t, { 'id': 'target' });
   target.style.animation = 'anim1 100s';
 
   const animations = target.getAnimations({ subtree: false });
   assert_equals(animations.length, 1,
                 'Should find only the element');
   assert_equals(animations[0].effect.target, target,
                 'Effect target should be the element');
-}, 'Test AnimationFilter{ subtree: false } with single element');
+}, '{ subtree: false } on a leaf element returns the element\'s animations'
+   + ' and ignore pseudo-elements');
 
 test(t => {
   addStyle(t, { '#target::after': 'animation: anim1 10s;',
                 '#target::before': 'animation: anim1 10s;' });
   const target = addDiv(t, { 'id': 'target' });
   target.style.animation = 'anim1 100s';
 
   const animations = target.getAnimations({ subtree: true });
@@ -338,17 +325,18 @@ test(t => {
                 'The animation targeting the parent element ' +
                 'should be returned first');
   assert_equals(animations[1].effect.target.type, '::before',
                 'The animation targeting the ::before pseudo-element ' +
                 'should be returned second');
   assert_equals(animations[2].effect.target.type, '::after',
                 'The animation targeting the ::after pesudo-element ' +
                 'should be returned last');
-}, 'Test AnimationFilter{ subtree: true } with single element');
+}, '{ subtree: true } on a leaf element returns the element\'s animations'
+   + ' and its pseudo-elements\' animations');
 
 test(t => {
   addStyle(t, { '#parent::after': 'animation: anim1 10s;',
                 '#parent::before': 'animation: anim1 10s;',
                 '#child::after': 'animation: anim1 10s;',
                 '#child::before': 'animation: anim1 10s;' });
   const parent = addDiv(t, { 'id': 'parent' });
   parent.style.animation = 'anim1 100s';
@@ -356,17 +344,18 @@ test(t => {
   child.style.animation = 'anim1 100s';
   parent.appendChild(child);
 
   const animations = parent.getAnimations({ subtree: false });
   assert_equals(animations.length, 1,
                 'Should find only the element even if it has a child');
   assert_equals(animations[0].effect.target, parent,
                 'Effect target shuld be the element');
-}, 'Test AnimationFilter{ subtree: false } with element that has a child');
+}, '{ subtree: false } on an element with a child returns only the element\'s'
+   + ' animations');
 
 test(t => {
   addStyle(t, { '#parent::after': 'animation: anim1 10s;',
                 '#parent::before': 'animation: anim1 10s;',
                 '#child::after': 'animation: anim1 10s;',
                 '#child::before': 'animation: anim1 10s;' });
   const parent = addDiv(t, { 'id': 'parent' });
   const child = addDiv(t, { 'id': 'child' });
@@ -400,17 +389,18 @@ test(t => {
                 'should be returned fifth');
   assert_equals(animations[4].effect.target.parentElement, child,
                 'This ::before element should be child of child element');
   assert_equals(animations[5].effect.target.type, '::after',
                 'The animation targeting the ::after pesudo-element ' +
                 'should be returned last');
   assert_equals(animations[5].effect.target.parentElement, child,
                 'This ::after element should be child of child element');
-}, 'Test AnimationFilter{ subtree: true } with element that has a child');
+}, '{ subtree: true } on an element with a child returns animations from the'
+   + ' element, its pseudo-elements, its child and its child pseudo-elements');
 
 test(t => {
   const parent = addDiv(t, { 'id': 'parent' });
   const child1 = addDiv(t, { 'id': 'child1' });
   const grandchild1 = addDiv(t, { 'id': 'grandchild1' });
   const grandchild2 = addDiv(t, { 'id': 'grandchild2' });
   const child2 = addDiv(t, { 'id': 'child2' });
 
@@ -445,12 +435,13 @@ test(t => {
   assert_equals(animations[3].effect.target, grandchild2,
                 'The animation targeting the grandchild2 element ' +
                 'should be returned fourth');
 
   assert_equals(animations[4].effect.target, child2,
                 'The animation targeting the child2 element ' +
                 'should be returned last');
 
-}, 'Test AnimationFilter{ subtree: true } with element that has many descendant');
+}, '{ subtree: true } on element with many descendants returns animations'
+   + ' from all the descendants');
 
 </script>
 </body>