--- 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>