--- a/dom/animation/test/css-animations/test_animation-cancel.html
+++ b/dom/animation/test/css-animations/test_animation-cancel.html
@@ -16,98 +16,98 @@
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
promise_test(t => {
- var div = addDiv(t, { style: 'animation: translateAnim 100s' });
- var animation = div.getAnimations()[0];
+ const div = addDiv(t, { style: 'animation: translateAnim 100s' });
+ const animation = div.getAnimations()[0];
return animation.ready.then(() => {
assert_not_equals(getComputedStyle(div).transform, 'none',
'transform style is animated before cancelling');
animation.cancel();
assert_equals(getComputedStyle(div).transform, 'none',
'transform style is no longer animated after cancelling');
});
}, 'Animated style is cleared after cancelling a running CSS animation');
promise_test(t => {
- var div = addDiv(t, { style: 'animation: translateAnim 100s forwards' });
- var animation = div.getAnimations()[0];
+ const div = addDiv(t, { style: 'animation: translateAnim 100s forwards' });
+ const animation = div.getAnimations()[0];
animation.finish();
return animation.ready.then(() => {
assert_not_equals(getComputedStyle(div).transform, 'none',
'transform style is filling before cancelling');
animation.cancel();
assert_equals(getComputedStyle(div).transform, 'none',
'fill style is cleared after cancelling');
});
}, 'Animated style is cleared after cancelling a filling CSS animation');
test(t => {
- var div = addDiv(t, { style: 'animation: marginLeftAnim 100s linear' });
- var animation = div.getAnimations()[0];
+ const div = addDiv(t, { style: 'animation: marginLeftAnim 100s linear' });
+ const animation = div.getAnimations()[0];
animation.cancel();
assert_equals(getComputedStyle(div).marginLeft, '0px',
'margin-left style is not animated after cancelling');
animation.currentTime = 50 * 1000;
assert_equals(getComputedStyle(div).marginLeft, '50px',
'margin-left style is updated when cancelled animation is'
+ ' seeked');
}, 'After canceling an animation, it can still be seeked');
promise_test(t => {
- var div =
+ const div =
addDiv(t, { style: 'animation: marginLeftAnim100To200 100s linear' });
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
return animation.ready.then(() => {
animation.cancel();
assert_equals(getComputedStyle(div).marginLeft, '0px',
'margin-left style is not animated after cancelling');
animation.play();
assert_equals(getComputedStyle(div).marginLeft, '100px',
'margin-left style is animated after re-starting animation');
return animation.ready;
}).then(() => {
assert_equals(animation.playState, 'running',
'Animation succeeds in running after being re-started');
});
}, 'After cancelling an animation, it can still be re-used');
test(t => {
- var div =
+ const div =
addDiv(t, { style: 'animation: marginLeftAnim100To200 100s linear' });
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
animation.cancel();
assert_equals(getComputedStyle(div).marginLeft, '0px',
'margin-left style is not animated after cancelling');
// Trigger a change to some animation properties and check that this
// doesn't cause the animation to become live again
div.style.animationDuration = '200s';
assert_equals(getComputedStyle(div).marginLeft, '0px',
'margin-left style is still not animated after updating'
+ ' animation-duration');
assert_equals(animation.playState, 'idle',
'Animation is still idle after updating animation-duration');
}, 'After cancelling an animation, updating animation properties doesn\'t make'
+ ' it live again');
test(t => {
- var div =
+ const div =
addDiv(t, { style: 'animation: marginLeftAnim100To200 100s linear' });
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
animation.cancel();
assert_equals(getComputedStyle(div).marginLeft, '0px',
'margin-left style is not animated after cancelling');
// Make some changes to animation-play-state and check that the
// animation doesn't become live again. This is because it should be
// possible to cancel an animation from script such that all future
// changes to style are ignored.
@@ -129,57 +129,57 @@ test(t => {
assert_equals(animation.playState, 'idle',
'Animation is still idle after re-setting'
+ ' animation-play-state: running');
}, 'After cancelling an animation, updating animation-play-state doesn\'t'
+ ' make it live again');
promise_test(t => {
- var div = addDiv(t, { style: 'animation: translateAnim 10s both' });
+ const div = addDiv(t, { style: 'animation: translateAnim 10s both' });
div.style.marginLeft = '0px';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
return animation.ready.then(() => {
assert_equals(animation.playState, 'running');
div.style.animationName = 'none';
flushComputedStyle(div);
return waitForFrame();
}).then(() => {
assert_equals(animation.playState, 'idle');
assert_equals(getComputedStyle(div).marginLeft, '0px');
});
}, 'Setting animation-name to \'none\' cancels the animation');
promise_test(t => {
- var div = addDiv(t, { style: 'animation: translateAnim 10s both' });
- var animation = div.getAnimations()[0];
+ const div = addDiv(t, { style: 'animation: translateAnim 10s both' });
+ const animation = div.getAnimations()[0];
return animation.ready.then(() => {
assert_equals(animation.playState, 'running');
div.style.display = 'none';
return waitForFrame();
}).then(() => {
assert_equals(animation.playState, 'idle');
assert_equals(getComputedStyle(div).marginLeft, '0px');
});
}, 'Setting display:none on an element cancel its animations');
promise_test(t => {
- var parentDiv = addDiv(t);
- var childDiv = document.createElement('div');
+ const parentDiv = addDiv(t);
+ const childDiv = document.createElement('div');
parentDiv.appendChild(childDiv);
childDiv.setAttribute('style', 'animation: translateAnim 10s both');
flushComputedStyle(childDiv);
- var animation = childDiv.getAnimations()[0];
+ const animation = childDiv.getAnimations()[0];
return animation.ready.then(() => {
assert_equals(animation.playState, 'running');
parentDiv.style.display = 'none';
return waitForFrame();
}).then(() => {
assert_equals(animation.playState, 'idle');
--- a/dom/animation/test/css-animations/test_animation-computed-timing.html
+++ b/dom/animation/test/css-animations/test_animation-computed-timing.html
@@ -15,60 +15,60 @@
'use strict';
// --------------------
// delay
// --------------------
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
- var effect = div.getAnimations()[0].effect;
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
+ const effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().delay, 0,
'Initial value of delay');
}, 'delay of a new animation');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s -10s'});
- var effect = div.getAnimations()[0].effect;
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s -10s'});
+ const effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().delay, -10 * MS_PER_SEC,
'Initial value of delay');
}, 'Negative delay of a new animation');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s 10s'});
- var effect = div.getAnimations()[0].effect;
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s 10s'});
+ const effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().delay, 10 * MS_PER_SEC,
'Initial value of delay');
}, 'Positive delay of a new animation');
// --------------------
// endDelay
// --------------------
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
- var effect = div.getAnimations()[0].effect;
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
+ const effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().endDelay, 0,
'Initial value of endDelay');
}, 'endDelay of a new animation');
// --------------------
// fill
// --------------------
test(t => {
- var getEffectWithFill = fill => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s ' + fill});
+ const getEffectWithFill = fill => {
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s ' + fill});
return div.getAnimations()[0].effect;
};
- var effect = getEffectWithFill('');
+ let effect = getEffectWithFill('');
assert_equals(effect.getComputedTiming().fill, 'none',
'Initial value of fill');
effect = getEffectWithFill('forwards');
assert_equals(effect.getComputedTiming().fill, 'forwards',
'Fill forwards');
effect = getEffectWithFill('backwards');
assert_equals(effect.getComputedTiming().fill, 'backwards',
'Fill backwards');
@@ -78,72 +78,72 @@ test(t => {
}, 'fill of a new animation');
// --------------------
// iterationStart
// --------------------
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
- var effect = div.getAnimations()[0].effect;
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
+ const effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().iterationStart, 0,
'Initial value of iterationStart');
}, 'iterationStart of a new animation');
// --------------------
// iterations
// --------------------
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
- var effect = div.getAnimations()[0].effect;
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
+ const effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().iterations, 1,
'Initial value of iterations');
}, 'iterations of a new animation');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s 2016.5'});
- var effect = div.getAnimations()[0].effect;
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s 2016.5'});
+ const effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().iterations, 2016.5,
'Initial value of iterations');
}, 'iterations of a finitely repeating animation');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s infinite'});
- var effect = div.getAnimations()[0].effect;
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s infinite'});
+ const effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().iterations, Infinity,
'Initial value of iterations');
}, 'iterations of an infinitely repeating animation');
// --------------------
// duration
// --------------------
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s -10s infinite'});
- var effect = div.getAnimations()[0].effect;
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s -10s infinite'});
+ const effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().duration, 100 * MS_PER_SEC,
'Initial value of duration');
}, 'duration of a new animation');
// --------------------
// direction
// --------------------
test(t => {
- var getEffectWithDir = dir => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s ' + dir});
+ const getEffectWithDir = dir => {
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s ' + dir});
return div.getAnimations()[0].effect;
};
- var effect = getEffectWithDir('');
+ let effect = getEffectWithDir('');
assert_equals(effect.getComputedTiming().direction, 'normal',
'Initial value of normal direction');
effect = getEffectWithDir('reverse');
assert_equals(effect.getComputedTiming().direction, 'reverse',
'Initial value of reverse direction');
effect = getEffectWithDir('alternate');
assert_equals(effect.getComputedTiming().direction, 'alternate',
'Initial value of alternate direction');
@@ -153,144 +153,144 @@ test(t => {
}, 'direction of a new animation');
// --------------------
// easing
// --------------------
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
- var effect = div.getAnimations()[0].effect;
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
+ const effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().easing, 'linear',
'Initial value of easing');
}, 'easing of a new animation');
// ------------------------------
// endTime
// = max(start delay + active duration + end delay, 0)
// --------------------
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
- var effect = div.getAnimations()[0].effect;
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
+ const effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().endTime, 100 * MS_PER_SEC,
'Initial value of endTime');
}, 'endTime of an new animation');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s -5s'});
- var effect = div.getAnimations()[0].effect;
- var answer = (100 - 5) * MS_PER_SEC;
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s -5s'});
+ const effect = div.getAnimations()[0].effect;
+ const answer = (100 - 5) * MS_PER_SEC;
assert_equals(effect.getComputedTiming().endTime, answer,
'Initial value of endTime');
}, 'endTime of an animation with a negative delay');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 10s -100s infinite'});
- var effect = div.getAnimations()[0].effect;
+ const div = addDiv(t, {style: 'animation: moveAnimation 10s -100s infinite'});
+ const effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().endTime, Infinity,
'Initial value of endTime');
}, 'endTime of an infinitely repeating animation');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 0s 100s infinite'});
- var effect = div.getAnimations()[0].effect;
+ const div = addDiv(t, {style: 'animation: moveAnimation 0s 100s infinite'});
+ const effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().endTime, 100 * MS_PER_SEC,
'Initial value of endTime');
}, 'endTime of an infinitely repeating zero-duration animation');
test(t => {
// Fill forwards so div.getAnimations()[0] won't return an
// undefined value.
- var div = addDiv(t, {style: 'animation: moveAnimation 10s -100s forwards'});
- var effect = div.getAnimations()[0].effect;
+ const div = addDiv(t, {style: 'animation: moveAnimation 10s -100s forwards'});
+ const effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().endTime, 0,
'Initial value of endTime');
}, 'endTime of an animation that finishes before its startTime');
// --------------------
// activeDuration
// = iteration duration * iteration count
// --------------------
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s 5'});
- var effect = div.getAnimations()[0].effect;
- var answer = 100 * MS_PER_SEC * 5;
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s 5'});
+ const effect = div.getAnimations()[0].effect;
+ const answer = 100 * MS_PER_SEC * 5;
assert_equals(effect.getComputedTiming().activeDuration, answer,
'Initial value of activeDuration');
}, 'activeDuration of a new animation');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s infinite'});
- var effect = div.getAnimations()[0].effect;
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s infinite'});
+ const effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().activeDuration, Infinity,
'Initial value of activeDuration');
}, 'activeDuration of an infinitely repeating animation');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 0s 1s infinite'});
- var effect = div.getAnimations()[0].effect;
+ const div = addDiv(t, {style: 'animation: moveAnimation 0s 1s infinite'});
+ const effect = div.getAnimations()[0].effect;
// If either the iteration duration or iteration count are zero,
// the active duration is zero.
assert_equals(effect.getComputedTiming().activeDuration, 0,
'Initial value of activeDuration');
}, 'activeDuration of an infinitely repeating zero-duration animation');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s 1s 0'});
- var effect = div.getAnimations()[0].effect;
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s 1s 0'});
+ const effect = div.getAnimations()[0].effect;
// If either the iteration duration or iteration count are zero,
// the active duration is zero.
assert_equals(effect.getComputedTiming().activeDuration, 0,
'Initial value of activeDuration');
}, 'activeDuration of an animation with zero iterations');
// --------------------
// localTime
// --------------------
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
- var effect = div.getAnimations()[0].effect;
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
+ const effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().localTime, 0,
'Initial value of localTime');
}, 'localTime of a new animation');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
- var anim = div.getAnimations()[0];
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
+ const anim = div.getAnimations()[0];
anim.currentTime = 5 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
'current localTime after setting currentTime');
}, 'localTime of an animation is always equal to currentTime');
promise_test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
- var anim = div.getAnimations()[0];
+ const anim = div.getAnimations()[0];
anim.playbackRate = 2; // 2 times faster
return anim.ready.then(() => {
assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
'localTime is equal to currentTime');
return waitForFrame();
}).then(() => {
assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
'localTime is equal to currentTime');
});
}, 'localTime reflects playbackRate immediately');
test(t => {
- var div = addDiv(t);
- var effect = new KeyframeEffect(div, {left: ["0px", "100px"]});
+ const div = addDiv(t);
+ const effect = new KeyframeEffect(div, {left: ["0px", "100px"]});
assert_equals(effect.getComputedTiming().localTime, null,
'localTime for orphaned effect');
}, 'localTime of an AnimationEffect without an Animation');
// --------------------
// progress
@@ -299,30 +299,30 @@ test(t => {
test(t => {
[{fill: '', progress: [ null, null ]},
{fill: 'none', progress: [ null, null ]},
{fill: 'forwards', progress: [ null, 1.0 ]},
{fill: 'backwards', progress: [ 0.0, null ]},
{fill: 'both', progress: [ 0.0, 1.0 ]}]
.forEach(test => {
- var div =
+ const div =
addDiv(t, {style: 'animation: moveAnimation 100s 10s ' + test.fill});
- var anim = div.getAnimations()[0];
+ const anim = div.getAnimations()[0];
assert_true(anim.effect.getComputedTiming().progress === test.progress[0],
'initial progress with "' + test.fill + '" fill');
anim.finish();
assert_true(anim.effect.getComputedTiming().progress === test.progress[1],
'finished progress with "' + test.fill + '" fill');
});
}, 'progress of an animation with different fill modes');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 10s 10 both'});
- var anim = div.getAnimations()[0];
+ const div = addDiv(t, {style: 'animation: moveAnimation 10s 10 both'});
+ const anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().progress, 0.0,
'Initial value of progress');
anim.currentTime += 2.5 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
'Value of progress');
anim.currentTime += 5 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
@@ -331,79 +331,78 @@ test(t => {
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
'Value of progress');
anim.finish()
assert_equals(anim.effect.getComputedTiming().progress, 1.0,
'Value of progress');
}, 'progress of an integral repeating animation with normal direction');
test(t => {
- var div = addDiv(t);
// Note: FillMode here is "both" because
// 1. Since this a zero-duration animation, it will already have finished
// so it won't be returned by getAnimations() unless it fills forwards.
// 2. Fill backwards, so the progress before phase wouldn't be
// unresolved (null value).
- var div = addDiv(t, {style: 'animation: moveAnimation 0s infinite both'});
- var anim = div.getAnimations()[0];
+ const div = addDiv(t, {style: 'animation: moveAnimation 0s infinite both'});
+ const anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().progress, 1.0,
'Initial value of progress in after phase');
// Seek backwards
anim.currentTime -= 1 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().progress, 0.0,
'Value of progress before phase');
}, 'progress of an infinitely repeating zero-duration animation');
test(t => {
// Default iterations = 1
- var div = addDiv(t, {style: 'animation: moveAnimation 0s both'});
- var anim = div.getAnimations()[0];
+ const div = addDiv(t, {style: 'animation: moveAnimation 0s both'});
+ const anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().progress, 1.0,
'Initial value of progress in after phase');
// Seek backwards
anim.currentTime -= 1 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().progress, 0.0,
'Value of progress before phase');
}, 'progress of a finitely repeating zero-duration animation');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 0s 5s 10.25 both'});
- var anim = div.getAnimations()[0];
+ const div = addDiv(t, {style: 'animation: moveAnimation 0s 5s 10.25 both'});
+ const anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().progress, 0.0,
'Initial value of progress (before phase)');
// Using iteration duration of 1 now.
// currentIteration now is floor(10.25) = 10, so progress should be 25%.
anim.finish();
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
'Value of progress in after phase');
}, 'progress of a non-integral repeating zero-duration animation');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 0s 5s 10.25 both reverse'});
- var anim = div.getAnimations()[0];
+ const div = addDiv(t, {style: 'animation: moveAnimation 0s 5s 10.25 both reverse'});
+ const anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().progress, 1.0,
'Initial value of progress (before phase)');
// Seek forwards
anim.finish();
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
'Value of progress in after phase');
}, 'Progress of a non-integral repeating zero-duration animation ' +
'with reversing direction');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 10s 10.25 both alternate'});
- var anim = div.getAnimations()[0];
+ const div = addDiv(t, {style: 'animation: moveAnimation 10s 10.25 both alternate'});
+ const anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().progress, 0.0,
'Initial value of progress');
anim.currentTime += 2.5 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
'Value of progress');
anim.currentTime += 5 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
@@ -413,18 +412,18 @@ test(t => {
'Value of progress');
anim.finish()
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
'Value of progress');
}, 'progress of a non-integral repeating animation ' +
'with alternate direction');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 10s 10.25 both alternate-reverse'});
- var anim = div.getAnimations()[0];
+ const div = addDiv(t, {style: 'animation: moveAnimation 10s 10.25 both alternate-reverse'});
+ const anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().progress, 1.0,
'Initial value of progress');
anim.currentTime += 2.5 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
'Value of progress');
anim.currentTime += 5 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
@@ -434,36 +433,36 @@ test(t => {
'Value of progress');
anim.finish()
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
'Value of progress');
}, 'progress of a non-integral repeating animation ' +
'with alternate-reversing direction');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 0s 10.25 both alternate'});
- var anim = div.getAnimations()[0];
+ const div = addDiv(t, {style: 'animation: moveAnimation 0s 10.25 both alternate'});
+ const anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
'Initial value of progress');
anim.currentTime += 2.5 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
'Value of progress');
anim.currentTime -= 5 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().progress, 0.0,
'Value of progress');
anim.finish()
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
'Value of progress');
}, 'progress of a non-integral repeating zero-duration animation ' +
'with alternate direction');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 0s 10.25 both alternate-reverse'});
- var anim = div.getAnimations()[0];
+ const div = addDiv(t, {style: 'animation: moveAnimation 0s 10.25 both alternate-reverse'});
+ const anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
'Initial value of progress');
anim.currentTime += 2.5 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
'Value of progress');
anim.currentTime -= 5 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().progress, 1.0,
@@ -475,105 +474,105 @@ test(t => {
'with alternate-reverse direction');
// --------------------
// currentIteration
// --------------------
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s 2s'});
- var effect = div.getAnimations()[0].effect;
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s 2s'});
+ const effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().currentIteration, null,
'Initial value of currentIteration before phase');
}, 'currentIteration of a new animation with no backwards fill is unresolved ' +
'in before phase');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
- var anim = div.getAnimations()[0];
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
+ const anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
'Initial value of currentIteration');
}, 'currentIteration of a new animation is zero');
test(t => {
// Note: FillMode here is "both" because
// 1. Since this a zero-duration animation, it will already have finished
// so it won't be returned by getAnimations() unless it fills forwards.
// 2. Fill backwards, so the currentIteration (before phase) wouldn't be
// unresolved (null value).
- var div = addDiv(t, {style: 'animation: moveAnimation 0s infinite both'});
- var anim = div.getAnimations()[0];
+ const div = addDiv(t, {style: 'animation: moveAnimation 0s infinite both'});
+ const anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().currentIteration, Infinity,
'Initial value of currentIteration in after phase');
// Seek backwards
anim.currentTime -= 2 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
'Value of currentIteration count during before phase');
}, 'currentIteration of an infinitely repeating zero-duration animation');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 0s 10.5 both'});
- var anim = div.getAnimations()[0];
+ const div = addDiv(t, {style: 'animation: moveAnimation 0s 10.5 both'});
+ const anim = div.getAnimations()[0];
// Note: currentIteration = ceil(iteration start + iteration count) - 1
assert_equals(anim.effect.getComputedTiming().currentIteration, 10,
'Initial value of currentIteration');
// Seek backwards
anim.currentTime -= 2 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
'Value of currentIteration count during before phase');
}, 'currentIteration of a finitely repeating zero-duration animation');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s 5.5 forwards'});
- var anim = div.getAnimations()[0];
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s 5.5 forwards'});
+ const anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
'Initial value of currentIteration');
// The 3rd iteration
// Note: currentIteration = floor(scaled active time / iteration duration)
anim.currentTime = 250 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().currentIteration, 2,
'Value of currentIteration during the 3rd iteration');
// Finish
anim.finish();
assert_equals(anim.effect.getComputedTiming().currentIteration, 5,
'Value of currentIteration in after phase');
}, 'currentIteration of an animation with a non-integral iteration count');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s 2 forwards'});
- var anim = div.getAnimations()[0];
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s 2 forwards'});
+ const anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
'Initial value of currentIteration');
// Finish
anim.finish();
assert_equals(anim.effect.getComputedTiming().currentIteration, 1,
'Value of currentIteration in after phase');
}, 'currentIteration of an animation with an integral iteration count');
test(t => {
- var div = addDiv(t, {style: 'animation: moveAnimation 100s forwards'});
- var anim = div.getAnimations()[0];
+ const div = addDiv(t, {style: 'animation: moveAnimation 100s forwards'});
+ const anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
'Initial value of currentIteration');
// Finish
anim.finish();
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
'Value of currentIteration in after phase');
}, 'currentIteration of an animation with a default iteration count');
test(t => {
- var div = addDiv(t);
- var effect = new KeyframeEffect(div, {left: ["0px", "100px"]});
+ const div = addDiv(t);
+ const effect = new KeyframeEffect(div, {left: ["0px", "100px"]});
assert_equals(effect.getComputedTiming().currentIteration, null,
'currentIteration for orphaned effect');
}, 'currentIteration of an AnimationEffect without an Animation');
// TODO: If iteration duration is Infinity, currentIteration is 0.
// However, we cannot set iteration duration to Infinity in CSS Animation now.
--- a/dom/animation/test/css-animations/test_animation-currenttime.html
+++ b/dom/animation/test/css-animations/test_animation-currenttime.html
@@ -41,39 +41,39 @@
// checker helpers to ensure that computedTiming's properties are updated as
// expected.
// See https://bugzilla.mozilla.org/show_bug.cgi?id=1108055
const CSS_ANIM_EVENTS =
['animationstart', 'animationiteration', 'animationend'];
test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
+ const div = addDiv(t, {'class': 'animated-div'});
div.style.animation = "anim 100s";
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
// Animations shouldn't start until the next paint tick, so:
assert_equals(animation.currentTime, 0,
'Animation.currentTime should be zero when an animation ' +
'is initially created');
// Make sure the animation is running before we set the current time.
animation.startTime = animation.timeline.currentTime;
animation.currentTime = 50 * MS_PER_SEC;
assert_time_equals_literal(animation.currentTime, 50 * MS_PER_SEC,
'Check setting of currentTime actually works');
}, 'Sanity test to check round-tripping assigning to new animation\'s ' +
'currentTime');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
- var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
+ const div = addDiv(t, {'class': 'animated-div'});
+ const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
return animation.ready.then(() => {
// the 0.0001 here is for rounding error
assert_less_than_equal(animation.currentTime,
animation.timeline.currentTime - animation.startTime + 0.0001,
'Animation.currentTime should be less than the local time ' +
'equivalent of the timeline\'s currentTime on the first paint tick ' +
'after animation creation');
@@ -82,22 +82,22 @@ promise_test(t => {
return eventWatcher.wait_for('animationstart');
}).then(() => {
animation.currentTime = 200 * MS_PER_SEC;
return eventWatcher.wait_for('animationend');
});
}, 'Skipping forward through animation');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
- var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
+ const div = addDiv(t, {'class': 'animated-div'});
+ const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
animation.currentTime = 200 * MS_PER_SEC;
- var previousTimelineTime = animation.timeline.currentTime;
+ const previousTimelineTime = animation.timeline.currentTime;
return eventWatcher.wait_for(['animationstart', 'animationend']).then(() => {
assert_true(document.timeline.currentTime - previousTimelineTime <
100 * MS_PER_SEC,
'Sanity check that seeking worked rather than the events ' +
'firing after normal playback through the very long ' +
'animation duration');
@@ -114,188 +114,188 @@ promise_test(t => {
// dispatched and events just taking an incredibly long time to dispatch
// without waiting an infinitely long time. Obviously we don't want to do that
// (block this test from finishing forever), so instead we just listen for
// events until two animation frames (i.e. requestAnimationFrame callbacks)
// have happened, then assume that no events will ever be dispatched for the
// redundant changes if no events were detected in that time.
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
- var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
+ const div = addDiv(t, {'class': 'animated-div'});
+ const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
animation.currentTime = 150 * MS_PER_SEC;
animation.currentTime = 50 * MS_PER_SEC;
return waitForAnimationFrames(2);
}, 'Redundant change, before -> active, then back');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
- var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
+ const div = addDiv(t, {'class': 'animated-div'});
+ const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
animation.currentTime = 250 * MS_PER_SEC;
animation.currentTime = 50 * MS_PER_SEC;
return waitForAnimationFrames(2);
}, 'Redundant change, before -> after, then back');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
- var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
+ const div = addDiv(t, {'class': 'animated-div'});
+ const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
- var retPromise = eventWatcher.wait_for('animationstart').then(() => {
+ const retPromise = eventWatcher.wait_for('animationstart').then(() => {
animation.currentTime = 50 * MS_PER_SEC;
animation.currentTime = 150 * MS_PER_SEC;
return waitForAnimationFrames(2);
});
// get us into the initial state:
animation.currentTime = 150 * MS_PER_SEC;
return retPromise;
}, 'Redundant change, active -> before, then back');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
- var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
+ const div = addDiv(t, {'class': 'animated-div'});
+ const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
- var retPromise = eventWatcher.wait_for('animationstart').then(() => {
+ const retPromise = eventWatcher.wait_for('animationstart').then(() => {
animation.currentTime = 250 * MS_PER_SEC;
animation.currentTime = 150 * MS_PER_SEC;
return waitForAnimationFrames(2);
});
// get us into the initial state:
animation.currentTime = 150 * MS_PER_SEC;
return retPromise;
}, 'Redundant change, active -> after, then back');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
- var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
+ const div = addDiv(t, {'class': 'animated-div'});
+ const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
- var retPromise = eventWatcher.wait_for(['animationstart',
- 'animationend']).then(() => {
+ const retPromise = eventWatcher.wait_for(['animationstart',
+ 'animationend']).then(() => {
animation.currentTime = 50 * MS_PER_SEC;
animation.currentTime = 250 * MS_PER_SEC;
return waitForAnimationFrames(2);
});
// get us into the initial state:
animation.currentTime = 250 * MS_PER_SEC;
return retPromise;
}, 'Redundant change, after -> before, then back');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
- var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
+ const div = addDiv(t, {'class': 'animated-div'});
+ const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
- var retPromise = eventWatcher.wait_for(['animationstart',
- 'animationend']).then(() => {
+ const retPromise = eventWatcher.wait_for(['animationstart',
+ 'animationend']).then(() => {
animation.currentTime = 150 * MS_PER_SEC;
animation.currentTime = 250 * MS_PER_SEC;
return waitForAnimationFrames(2);
});
// get us into the initial state:
animation.currentTime = 250 * MS_PER_SEC;
return retPromise;
}, 'Redundant change, after -> active, then back');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
- var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
+ const div = addDiv(t, {'class': 'animated-div'});
+ const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s"
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
animation.pause();
animation.currentTime = 150 * MS_PER_SEC;
return eventWatcher.wait_for(['animationstart', 'animationend']).then(() => {
animation.currentTime = 50 * MS_PER_SEC;
return eventWatcher.wait_for('animationstart');
});
}, 'Seeking finished -> paused dispatches animationstart');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
+ const div = addDiv(t, {'class': 'animated-div'});
div.style.animation = "anim 100s";
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
return animation.ready.then(() => {
- var exception;
+ let exception;
try {
animation.currentTime = null;
} catch (e) {
exception = e;
}
assert_equals(exception.name, 'TypeError',
'Expect TypeError exception on trying to set ' +
'Animation.currentTime to null');
});
}, 'Setting currentTime to null');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
+ const div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s';
- var animation = div.getAnimations()[0];
- var pauseTime;
+ const animation = div.getAnimations()[0];
+ let pauseTime;
return animation.ready.then(() => {
assert_not_equals(animation.currentTime, null,
'Animation.currentTime not null on ready Promise resolve');
animation.pause();
return animation.ready;
}).then(() => {
pauseTime = animation.currentTime;
return waitForFrame();
}).then(() => {
assert_equals(animation.currentTime, pauseTime,
'Animation.currentTime is unchanged after pausing');
});
}, 'Animation.currentTime after pausing');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
+ const div = addDiv(t, {'class': 'animated-div'});
div.style.animation = "anim 100s";
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
return animation.ready.then(() => {
// just before animation ends:
animation.currentTime = 100 * MS_PER_SEC - 1;
return waitForAnimationFrames(2);
}).then(() => {
assert_equals(animation.currentTime, 100 * MS_PER_SEC,
'Animation.currentTime should not continue to increase after the ' +
'animation has finished');
});
}, 'Animation.currentTime clamping');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
+ const div = addDiv(t, {'class': 'animated-div'});
div.style.animation = "anim 100s";
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
return animation.ready.then(() => {
// play backwards:
animation.playbackRate = -1;
// just before animation ends (at the "start"):
animation.currentTime = 1;
@@ -303,29 +303,29 @@ promise_test(t => {
}).then(() => {
assert_equals(animation.currentTime, 0,
'Animation.currentTime should not continue to decrease after an ' +
'animation running in reverse has finished and currentTime is zero');
});
}, 'Animation.currentTime clamping for reversed animation');
test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
+ const div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
animation.cancel();
assert_equals(animation.currentTime, null,
'The currentTime of a cancelled animation should be null');
}, 'Animation.currentTime after cancelling');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
+ const div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
return animation.ready.then(() => {
animation.finish();
// Initiate a pause then abort it
animation.pause();
animation.play();
--- a/dom/animation/test/css-animations/test_animation-finish.html
+++ b/dom/animation/test/css-animations/test_animation-finish.html
@@ -14,57 +14,57 @@
<script>
'use strict';
const ANIM_PROP_VAL = 'anim 100s';
const ANIM_DURATION = 100000; // ms
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = ANIM_PROP_VAL;
div.style.animationIterationCount = 'infinite';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
- var threw = false;
+ let threw = false;
try {
animation.finish();
} catch (e) {
threw = true;
assert_equals(e.name, 'InvalidStateError',
'Exception should be an InvalidStateError exception when ' +
'trying to finish an infinite animation');
}
assert_true(threw,
'Expect InvalidStateError exception trying to finish an ' +
'infinite animation');
}, 'Test exceptions when finishing infinite animation');
async_test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = ANIM_PROP_VAL + ' paused';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
animation.ready.then(t.step_func(() => {
animation.finish();
assert_equals(animation.playState, 'finished',
'The play state of a paused animation should become ' +
'"finished" after finish() is called');
assert_times_equal(animation.startTime,
animation.timeline.currentTime - ANIM_DURATION,
'The start time of a paused animation should be set ' +
'after calling finish()');
t.done();
}));
}, 'Test finish() while paused');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = ANIM_PROP_VAL + ' paused';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
// Update playbackRate so we can test that the calculated startTime
// respects it
animation.playbackRate = 2;
// While animation is still pause-pending call finish()
animation.finish();
@@ -73,19 +73,19 @@ test(t => {
'"finished" after finish() is called');
assert_times_equal(animation.startTime,
animation.timeline.currentTime - ANIM_DURATION / 2,
'The start time of a pause-pending animation should ' +
'be set after calling finish()');
}, 'Test finish() while pause-pending with positive playbackRate');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = ANIM_PROP_VAL + ' paused';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
animation.playbackRate = -2;
animation.finish();
assert_equals(animation.playState, 'finished',
'The play state of a pause-pending animation should become ' +
'"finished" after finish() is called');
assert_equals(animation.startTime, animation.timeline.currentTime,
--- a/dom/animation/test/css-animations/test_animation-finished.html
+++ b/dom/animation/test/css-animations/test_animation-finished.html
@@ -13,23 +13,23 @@
<div id="log"></div>
<script>
'use strict';
const ANIM_PROP_VAL = 'abc 100s';
const ANIM_DURATION = 100 * MS_PER_SEC;
promise_test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
// Set up pending animation
div.style.animation = ANIM_PROP_VAL;
- var animation = div.getAnimations()[0];
- var previousFinishedPromise = animation.finished;
+ const animation = div.getAnimations()[0];
+ const previousFinishedPromise = animation.finished;
// Set up listeners on finished promise
- var retPromise = animation.finished.then(() => {
+ const retPromise = animation.finished.then(() => {
assert_unreached('finished promise is fulfilled');
}).catch(err => {
assert_equals(err.name, 'AbortError',
'finished promise is rejected with AbortError');
assert_not_equals(animation.finished, previousFinishedPromise,
'Finished promise should change after the original is ' +
'rejected');
});
@@ -38,28 +38,28 @@ promise_test(t => {
div.style.animation = '';
getComputedStyle(div).animation;
return retPromise;
}, 'finished promise is rejected when an animation is cancelled by resetting ' +
'the animation property');
promise_test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
// As before, but this time instead of removing all animations, simply update
// the list of animations. At least for Firefox, updating is a different
// code path.
// Set up pending animation
div.style.animation = ANIM_PROP_VAL;
- var animation = div.getAnimations()[0];
- var previousFinishedPromise = animation.finished;
+ const animation = div.getAnimations()[0];
+ const previousFinishedPromise = animation.finished;
// Set up listeners on finished promise
- var retPromise = animation.finished.then(() => {
+ const retPromise = animation.finished.then(() => {
assert_unreached('finished promise was fulfilled');
}).catch(err => {
assert_equals(err.name, 'AbortError',
'finished promise is rejected with AbortError');
assert_not_equals(animation.finished, previousFinishedPromise,
'Finished promise should change after the original is ' +
'rejected');
});
@@ -68,20 +68,20 @@ promise_test(t => {
div.style.animation = 'def 100s';
getComputedStyle(div).animation;
return retPromise;
}, 'finished promise is rejected when an animation is cancelled by changing ' +
'the animation property');
promise_test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = ANIM_PROP_VAL;
- var animation = div.getAnimations()[0];
- var previousFinishedPromise = animation.finished;
+ const animation = div.getAnimations()[0];
+ const previousFinishedPromise = animation.finished;
animation.currentTime = ANIM_DURATION;
return animation.finished.then(() => {
div.style.animationPlayState = 'running';
return waitForAnimationFrames(2);
}).then(() => {
assert_equals(animation.finished, previousFinishedPromise,
'Should not replay when animation-play-state changes to ' +
'"running" on finished animation');
--- a/dom/animation/test/css-animations/test_animation-id.html
+++ b/dom/animation/test/css-animations/test_animation-id.html
@@ -7,19 +7,19 @@
@keyframes abc { }
</style>
<body>
<div id="log"></div>
<script>
'use strict';
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'abc 100s';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
assert_equals(animation.id, '', 'id for CSS Animation is initially empty');
animation.id = 'anim'
assert_equals(animation.id, 'anim', 'animation.id reflects the value set');
}, 'Animation.id for CSS Animations');
</script>
</body>
--- a/dom/animation/test/css-animations/test_animation-pausing.html
+++ b/dom/animation/test/css-animations/test_animation-pausing.html
@@ -12,58 +12,58 @@
<body>
<div id="log"></div>
<script>
'use strict';
const getMarginLeft = cs => parseFloat(cs.marginLeft);
promise_test(t => {
- var div = addDiv(t);
- var cs = getComputedStyle(div);
+ const div = addDiv(t);
+ const cs = getComputedStyle(div);
div.style.animation = 'anim 1000s paused';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero');
animation.play();
return animation.ready.then(waitForNextFrame).then(() => {
assert_greater_than(getMarginLeft(cs), 0,
'Playing value of margin-left is greater than zero');
});
}, 'play() overrides animation-play-state');
promise_test(t => {
- var div = addDiv(t);
- var cs = getComputedStyle(div);
+ const div = addDiv(t);
+ const cs = getComputedStyle(div);
div.style.animation = 'anim 1000s paused';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero');
animation.pause();
div.style.animationPlayState = 'running';
return animation.ready.then(waitForNextFrame).then(() => {
assert_equals(cs.animationPlayState, 'running',
'animation-play-state is running');
assert_equals(getMarginLeft(cs), 0,
'Paused value of margin-left is zero');
});
}, 'pause() overrides animation-play-state');
promise_test(t => {
- var div = addDiv(t);
- var cs = getComputedStyle(div);
+ const div = addDiv(t);
+ const cs = getComputedStyle(div);
div.style.animation = 'anim 1000s paused';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero');
animation.play();
- var previousAnimVal;
+ let previousAnimVal;
return animation.ready.then(() => {
div.style.animationPlayState = 'running';
cs.animationPlayState; // Trigger style resolution
return waitForNextFrame();
}).then(() => {
assert_equals(cs.animationPlayState, 'running',
'animation-play-state is running');
@@ -77,73 +77,73 @@ promise_test(t => {
}).then(() => {
assert_equals(getMarginLeft(cs), previousAnimVal,
'Animated value of margin-left does not change when'
+ ' paused by style');
});
}, 'play() is overridden by later setting "animation-play-state: paused"');
promise_test(t => {
- var div = addDiv(t);
- var cs = getComputedStyle(div);
+ const div = addDiv(t);
+ const cs = getComputedStyle(div);
div.style.animation = 'anim 1000s';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero');
// Set the specified style first. If implementations fail to
// apply the style changes first, they will ignore the redundant
// call to play() and fail to correctly override the pause style.
div.style.animationPlayState = 'paused';
animation.play();
- var previousAnimVal = getMarginLeft(cs);
+ const previousAnimVal = getMarginLeft(cs);
return animation.ready.then(waitForNextFrame).then(() => {
assert_equals(cs.animationPlayState, 'paused',
'animation-play-state is paused');
assert_greater_than(getMarginLeft(cs), previousAnimVal,
'Playing value of margin-left is increasing');
});
}, 'play() flushes pending changes to animation-play-state first');
promise_test(t => {
- var div = addDiv(t);
- var cs = getComputedStyle(div);
+ const div = addDiv(t);
+ const cs = getComputedStyle(div);
div.style.animation = 'anim 1000s paused';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero');
// Unlike the previous test for play(), since calling pause() is sticky,
// we'll apply it even if the underlying style also says we're paused.
//
// We would like to test that implementations flush styles before running
// pause() but actually there's no style we can currently set that will
// change the behavior of pause(). That may change in the future
// (e.g. if we introduce animation-timeline or animation-playback-rate etc.).
//
// For now this just serves as a sanity check that we do the same thing
// even if we set style before calling the API.
div.style.animationPlayState = 'running';
animation.pause();
- var previousAnimVal = getMarginLeft(cs);
+ const previousAnimVal = getMarginLeft(cs);
return animation.ready.then(waitForNextFrame).then(() => {
assert_equals(cs.animationPlayState, 'running',
'animation-play-state is running');
assert_equals(getMarginLeft(cs), previousAnimVal,
'Paused value of margin-left does not change');
});
}, 'pause() applies pending changes to animation-play-state first');
// (Note that we can't actually test for this; see comment above, in test-body.)
promise_test(t => {
- var div = addDiv(t, { style: 'animation: anim 1000s' });
- var animation = div.getAnimations()[0];
- var readyPromiseRun = false;
+ const div = addDiv(t, { style: 'animation: anim 1000s' });
+ const animation = div.getAnimations()[0];
+ let readyPromiseRun = false;
return animation.ready.then(() => {
div.style.animationPlayState = 'paused';
assert_true(animation.pending && animation.playState === 'paused',
'Animation is pause-pending');
// Set current time
animation.currentTime = 5 * MS_PER_SEC;
--- a/dom/animation/test/css-animations/test_animation-playstate.html
+++ b/dom/animation/test/css-animations/test_animation-playstate.html
@@ -7,55 +7,55 @@
@keyframes anim { }
</style>
<body>
<div id="log"></div>
<script>
'use strict';
test(t => {
- var div = addDiv(t);
- var cs = getComputedStyle(div);
+ const div = addDiv(t);
+ const cs = getComputedStyle(div);
div.style.animation = 'anim 1000s';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
assert_equals(animation.playState, 'running');
}, 'Animation returns correct playState when running');
test(t => {
- var div = addDiv(t);
- var cs = getComputedStyle(div);
+ const div = addDiv(t);
+ const cs = getComputedStyle(div);
div.style.animation = 'anim 1000s paused';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
assert_equals(animation.playState, 'paused');
}, 'Animation returns correct playState when paused');
test(t => {
- var div = addDiv(t);
- var cs = getComputedStyle(div);
+ const div = addDiv(t);
+ const cs = getComputedStyle(div);
div.style.animation = 'anim 1000s';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
animation.pause();
assert_equals(animation.playState, 'paused');
}, 'Animation.playState updates when paused by script');
test(t => {
- var div = addDiv(t);
- var cs = getComputedStyle(div);
+ const div = addDiv(t);
+ const cs = getComputedStyle(div);
div.style.animation = 'anim 1000s paused';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
div.style.animationPlayState = 'running';
// This test also checks that calling playState flushes style
assert_equals(animation.playState, 'running',
'Animation.playState reports running after updating'
+ ' animation-play-state (got: ' + animation.playState + ')');
}, 'Animation.playState updates when resumed by setting style');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim 1000s';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
animation.cancel();
assert_equals(animation.playState, 'idle');
}, 'Animation returns correct playState when cancelled');
</script>
</body>
--- a/dom/animation/test/css-animations/test_animation-ready.html
+++ b/dom/animation/test/css-animations/test_animation-ready.html
@@ -9,135 +9,135 @@
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
promise_test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'abc 100s paused';
- var animation = div.getAnimations()[0];
- var originalReadyPromise = animation.ready;
+ const animation = div.getAnimations()[0];
+ const originalReadyPromise = animation.ready;
return animation.ready.then(() => {
div.style.animationPlayState = 'running';
assert_not_equals(animation.ready, originalReadyPromise,
'After updating animation-play-state a new ready promise'
+ ' object is created');
});
}, 'A new ready promise is created when setting animation-play-state: running');
promise_test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
// Set up pending animation
div.style.animation = 'abc 100s';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
assert_true(animation.pending, 'Animation is initially pending');
// Set up listeners on ready promise
- var retPromise = animation.ready.then(() => {
+ const retPromise = animation.ready.then(() => {
assert_unreached('ready promise is fulfilled');
}).catch(err => {
assert_equals(err.name, 'AbortError',
'ready promise is rejected with AbortError');
});
// Now cancel the animation and flush styles
div.style.animation = '';
getComputedStyle(div).animation;
return retPromise;
}, 'ready promise is rejected when an animation is canceled by resetting'
+ ' the animation property');
promise_test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
// As before, but this time instead of removing all animations, simply update
// the list of animations. At least for Firefox, updating is a different
// code path.
// Set up pending animation
div.style.animation = 'abc 100s';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
assert_true(animation.pending, 'Animation is initially pending');
// Set up listeners on ready promise
- var retPromise = animation.ready.then(() => {
+ const retPromise = animation.ready.then(() => {
assert_unreached('ready promise was fulfilled');
}).catch(err => {
assert_equals(err.name, 'AbortError',
'ready promise is rejected with AbortError');
});
// Now update the animation and flush styles
div.style.animation = 'def 100s';
getComputedStyle(div).animation;
return retPromise;
}, 'ready promise is rejected when an animation is cancelled by updating'
+ ' the animation property');
promise_test(t => {
- var div = addDiv(t, { style: 'animation: abc 100s' });
- var animation = div.getAnimations()[0];
- var originalReadyPromise = animation.ready;
+ const div = addDiv(t, { style: 'animation: abc 100s' });
+ const animation = div.getAnimations()[0];
+ const originalReadyPromise = animation.ready;
return animation.ready.then(() => {
div.style.animationPlayState = 'paused';
assert_not_equals(animation.ready, originalReadyPromise,
'A new Promise object is generated when setting'
+ ' animation-play-state: paused');
});
}, 'A new ready promise is created when setting animation-play-state: paused');
promise_test(t => {
- var div = addDiv(t, { style: 'animation: abc 100s' });
- var animation = div.getAnimations()[0];
+ const div = addDiv(t, { style: 'animation: abc 100s' });
+ const animation = div.getAnimations()[0];
return animation.ready.then(() => {
div.style.animationPlayState = 'paused';
- var firstReadyPromise = animation.ready;
+ const firstReadyPromise = animation.ready;
animation.pause();
assert_equals(animation.ready, firstReadyPromise,
'Ready promise objects are identical after redundant pause');
});
}, 'Pausing twice re-uses the same Promise');
promise_test(t => {
- var div = addDiv(t, { style: 'animation: abc 100s' });
- var animation = div.getAnimations()[0];
+ const div = addDiv(t, { style: 'animation: abc 100s' });
+ const animation = div.getAnimations()[0];
return animation.ready.then(() => {
div.style.animationPlayState = 'paused';
// Flush style and verify we're pending at the same time
assert_true(animation.pending, 'Animation is pending');
- var pauseReadyPromise = animation.ready;
+ const pauseReadyPromise = animation.ready;
// Now play again immediately
div.style.animationPlayState = 'running';
assert_true(animation.pending, 'Animation is still pending');
assert_equals(animation.ready, pauseReadyPromise,
'The pause Promise is re-used when playing while waiting'
+ ' to pause');
return animation.ready;
}).then(() => {
assert_true(!animation.pending && animation.playState === 'running',
'Animation is running after aborting a pause');
});
}, 'If a pause operation is interrupted, the ready promise is reused');
promise_test(t => {
- var div = addDiv(t, { style: 'animation: abc 100s' });
- var animation = div.getAnimations()[0];
+ const div = addDiv(t, { style: 'animation: abc 100s' });
+ const animation = div.getAnimations()[0];
return animation.ready.then(() => {
div.style.animationPlayState = 'paused';
return animation.ready;
}).then(resolvedAnimation => {
assert_equals(resolvedAnimation, animation,
'Promise received when ready Promise for a pause operation'
+ ' is completed is the animation on which the pause was'
--- a/dom/animation/test/css-animations/test_animation-reverse.html
+++ b/dom/animation/test/css-animations/test_animation-reverse.html
@@ -9,18 +9,18 @@
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
test(t => {
- var div = addDiv(t, { style: 'animation: anim 100s' });
- var animation = div.getAnimations()[0];
+ const div = addDiv(t, { style: 'animation: anim 100s' });
+ const animation = div.getAnimations()[0];
div.style.animation = "";
flushComputedStyle(div);
assert_equals(animation.currentTime, null);
animation.reverse();
assert_equals(animation.currentTime, 100 * MS_PER_SEC,
'animation.currentTime should be its effect end');
--- a/dom/animation/test/css-animations/test_animation-starttime.html
+++ b/dom/animation/test/css-animations/test_animation-starttime.html
@@ -41,51 +41,51 @@
// checker helpers to ensure that computedTiming's properties are updated as
// expected.
// See https://bugzilla.mozilla.org/show_bug.cgi?id=1108055
const CSS_ANIM_EVENTS =
['animationstart', 'animationiteration', 'animationend'];
test(t => {
- var div = addDiv(t, { 'style': 'animation: anim 100s' });
- var animation = div.getAnimations()[0];
+ const div = addDiv(t, { 'style': 'animation: anim 100s' });
+ const animation = div.getAnimations()[0];
assert_equals(animation.startTime, null, 'startTime is unresolved');
}, 'startTime of a newly created (play-pending) animation is unresolved');
test(t => {
- var div = addDiv(t, { 'style': 'animation: anim 100s paused' });
- var animation = div.getAnimations()[0];
+ const div = addDiv(t, { 'style': 'animation: anim 100s paused' });
+ const animation = div.getAnimations()[0];
assert_equals(animation.startTime, null, 'startTime is unresolved');
}, 'startTime of a newly created (pause-pending) animation is unresolved');
promise_test(t => {
- var div = addDiv(t, { 'style': 'animation: anim 100s' });
- var animation = div.getAnimations()[0];
+ const div = addDiv(t, { 'style': 'animation: anim 100s' });
+ const animation = div.getAnimations()[0];
return animation.ready.then(() => {
assert_true(animation.startTime > 0,
'startTime is resolved when running');
});
}, 'startTime is resolved when running');
promise_test(t => {
- var div = addDiv(t, { 'style': 'animation: anim 100s paused' });
- var animation = div.getAnimations()[0];
+ const div = addDiv(t, { 'style': 'animation: anim 100s paused' });
+ const animation = div.getAnimations()[0];
return animation.ready.then(() => {
assert_equals(animation.startTime, null,
'startTime is unresolved when paused');
});
}, 'startTime is unresolved when paused');
promise_test(t => {
- var div = addDiv(t, { 'style': 'animation: anim 100s' });
- var animation = div.getAnimations()[0];
+ const div = addDiv(t, { 'style': 'animation: anim 100s' });
+ const animation = div.getAnimations()[0];
return animation.ready.then(() => {
div.style.animationPlayState = 'paused';
getComputedStyle(div).animationPlayState;
assert_not_equals(animation.startTime, null,
'startTime is resolved when pause-pending');
@@ -93,51 +93,51 @@ promise_test(t => {
getComputedStyle(div).animationPlayState;
assert_not_equals(animation.startTime, null,
'startTime is preserved when a pause is aborted');
});
}, 'startTime while pause-pending and play-pending');
promise_test(t => {
- var div = addDiv(t, { 'style': 'animation: anim 100s' });
- var animation = div.getAnimations()[0];
+ const div = addDiv(t, { 'style': 'animation: anim 100s' });
+ const animation = div.getAnimations()[0];
// Seek to end to put us in the finished state
animation.currentTime = 100 * MS_PER_SEC;
return animation.ready.then(() => {
// Call play() which puts us back in the running state
animation.play();
assert_equals(animation.startTime, null, 'startTime is unresolved');
});
}, 'startTime while play-pending from finished state');
test(t => {
- var div = addDiv(t, { 'style': 'animation: anim 100s' });
- var animation = div.getAnimations()[0];
+ const div = addDiv(t, { 'style': 'animation: anim 100s' });
+ const animation = div.getAnimations()[0];
animation.finish();
// Call play() which puts us back in the running state
animation.play();
assert_equals(animation.startTime, null, 'startTime is unresolved');
}, 'startTime while play-pending from finished state using finish()');
promise_test(t => {
- var div = addDiv(t, { style: 'animation: anim 100s' });
- var animation = div.getAnimations()[0];
+ const div = addDiv(t, { style: 'animation: anim 100s' });
+ const animation = div.getAnimations()[0];
assert_equals(animation.startTime, null, 'The initial startTime is null');
- var initialTimelineTime = document.timeline.currentTime;
+ const initialTimelineTime = document.timeline.currentTime;
return animation.ready.then(() => {
assert_true(animation.startTime > initialTimelineTime,
'After the animation has started, startTime is greater than ' +
'the time when it was started');
- var startTimeBeforePausing = animation.startTime;
+ const startTimeBeforePausing = animation.startTime;
div.style.animationPlayState = 'paused';
// Flush styles just in case querying animation.startTime doesn't flush
// styles (which would be a bug in of itself and could mask a further bug
// by causing startTime to appear to not change).
getComputedStyle(div).animationPlayState;
assert_equals(animation.startTime, startTimeBeforePausing,
@@ -146,53 +146,53 @@ promise_test(t => {
}).then(() => {
assert_equals(animation.startTime, null,
'After actually pausing, the startTime of an animation ' +
'is null');
});
}, 'Pausing should make the startTime become null');
test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
+ const div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s 100s';
- var animation = div.getAnimations()[0];
- var currentTime = animation.timeline.currentTime;
+ const animation = div.getAnimations()[0];
+ const currentTime = animation.timeline.currentTime;
animation.startTime = currentTime;
assert_times_equal(animation.startTime, currentTime,
'Check setting of startTime actually works');
}, 'Sanity test to check round-tripping assigning to a new animation\'s ' +
'startTime');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
- var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
+ const div = addDiv(t, {'class': 'animated-div'});
+ const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = 'anim 100s 100s';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
return animation.ready.then(() => {
assert_less_than_equal(animation.startTime, animation.timeline.currentTime,
'Animation.startTime should be less than the timeline\'s ' +
'currentTime on the first paint tick after animation creation');
animation.startTime = animation.timeline.currentTime - 100 * MS_PER_SEC;
return eventWatcher.wait_for('animationstart');
}).then(() => {
animation.startTime = animation.timeline.currentTime - 200 * MS_PER_SEC;
return eventWatcher.wait_for('animationend');
});
}, 'Skipping forward through animation');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
- var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
+ const div = addDiv(t, {'class': 'animated-div'});
+ const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = 'anim 100s 100s';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
animation.startTime = animation.timeline.currentTime - 200 * MS_PER_SEC;
- var previousTimelineTime = animation.timeline.currentTime;
+ const previousTimelineTime = animation.timeline.currentTime;
return eventWatcher.wait_for(['animationstart',
'animationend']).then(() => {
assert_true(document.timeline.currentTime - previousTimelineTime <
100 * MS_PER_SEC,
'Sanity check that seeking worked rather than the events ' +
'firing after normal playback through the very long ' +
'animation duration');
@@ -222,155 +222,155 @@ promise_test(t => {
// dispatched and events just taking an incredibly long time to dispatch
// without waiting an infinitely long time. Obviously we don't want to do that
// (block this test from finishing forever), so instead we just listen for
// events until two animation frames (i.e. requestAnimationFrame callbacks)
// have happened, then assume that no events will ever be dispatched for the
// redundant changes if no events were detected in that time.
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
- var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
+ const div = addDiv(t, {'class': 'animated-div'});
+ const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;
return waitForAnimationFrames(2);
}, 'Redundant change, before -> active, then back');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
- var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
+ const div = addDiv(t, {'class': 'animated-div'});
+ const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;
return waitForAnimationFrames(2);
}, 'Redundant change, before -> after, then back');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
- var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
+ const div = addDiv(t, {'class': 'animated-div'});
+ const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
- var retPromise = eventWatcher.wait_for('animationstart').then(() => {
+ const retPromise = eventWatcher.wait_for('animationstart').then(() => {
animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;
animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
return waitForAnimationFrames(2);
});
// get us into the initial state:
animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
return retPromise;
}, 'Redundant change, active -> before, then back');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
- var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
+ const div = addDiv(t, {'class': 'animated-div'});
+ const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
- var retPromise = eventWatcher.wait_for('animationstart').then(() => {
+ const retPromise = eventWatcher.wait_for('animationstart').then(() => {
animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
return waitForAnimationFrames(2);
});
// get us into the initial state:
animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
return retPromise;
}, 'Redundant change, active -> after, then back');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
- var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
+ const div = addDiv(t, {'class': 'animated-div'});
+ const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
- var retPromise = eventWatcher.wait_for(['animationstart',
- 'animationend']).then(() => {
+ const retPromise = eventWatcher.wait_for(['animationstart',
+ 'animationend']).then(() => {
animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;
animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
return waitForAnimationFrames(2);
});
// get us into the initial state:
animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
return retPromise;
}, 'Redundant change, after -> before, then back');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
- var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
+ const div = addDiv(t, {'class': 'animated-div'});
+ const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
- var retPromise = eventWatcher.wait_for(['animationstart',
- 'animationend']).then(() => {
+ const retPromise = eventWatcher.wait_for(['animationstart',
+ 'animationend']).then(() => {
animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
return waitForAnimationFrames(2);
});
// get us into the initial state:
animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
return retPromise;
}, 'Redundant change, after -> active, then back');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
+ const div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s 100s';
- var animation = div.getAnimations()[0];
- var storedCurrentTime;
+ const animation = div.getAnimations()[0];
+ let storedCurrentTime;
return animation.ready.then(() => {
storedCurrentTime = animation.currentTime;
animation.startTime = null;
return animation.ready;
}).then(() => {
assert_equals(animation.currentTime, storedCurrentTime,
'Test that hold time is correct');
});
}, 'Setting startTime to null');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
+ const div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
return animation.ready.then(() => {
- var savedStartTime = animation.startTime;
+ const savedStartTime = animation.startTime;
assert_not_equals(animation.startTime, null,
'Animation.startTime not null on ready Promise resolve');
animation.pause();
return animation.ready;
}).then(() => {
assert_equals(animation.startTime, null,
'Animation.startTime is null after paused');
assert_equals(animation.playState, 'paused',
'Animation.playState is "paused" after pause() call');
});
}, 'Animation.startTime after pausing');
promise_test(t => {
- var div = addDiv(t, {'class': 'animated-div'});
+ const div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
return animation.ready.then(() => {
animation.cancel();
assert_equals(animation.startTime, null,
'The startTime of a cancelled animation should be null');
});
}, 'Animation.startTime after cancelling');
--- a/dom/animation/test/css-animations/test_animations-dynamic-changes.html
+++ b/dom/animation/test/css-animations/test_animations-dynamic-changes.html
@@ -10,73 +10,73 @@
@keyframes anim2 { }
</style>
<body>
<div id="log"></div>
<script>
'use strict';
promise_test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim1 100s';
- var originalAnimation = div.getAnimations()[0];
- var originalStartTime;
- var originalCurrentTime;
+ const originalAnimation = div.getAnimations()[0];
+ let originalStartTime;
+ let originalCurrentTime;
// Wait a moment so we can confirm the startTime doesn't change (and doesn't
// simply reflect the current time).
return originalAnimation.ready.then(() => {
originalStartTime = originalAnimation.startTime;
originalCurrentTime = originalAnimation.currentTime;
// Wait a moment so we can confirm the startTime doesn't change (and
// doesn't simply reflect the current time).
return waitForNextFrame();
}).then(() => {
div.style.animationDuration = '200s';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
assert_equals(animation, originalAnimation,
'The same Animation is returned after updating'
+ ' animation duration');
assert_equals(animation.startTime, originalStartTime,
'Animations returned by getAnimations preserve'
+ ' their startTime even when they are updated');
// Sanity check
assert_not_equals(animation.currentTime, originalCurrentTime,
'Animation.currentTime has updated in next'
+ ' requestAnimationFrame callback');
});
}, 'Animations preserve their startTime when changed');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim1 100s, anim1 100s';
// Store original state
- var animations = div.getAnimations();
- var animation1 = animations[0];
- var animation2 = animations[1];
+ let animations = div.getAnimations();
+ const animation1 = animations[0];
+ const animation2 = animations[1];
// Update first in list
div.style.animationDuration = '200s, 100s';
animations = div.getAnimations();
assert_equals(animations[0], animation1,
'First Animation is in same position after update');
assert_equals(animations[1], animation2,
'Second Animation is in same position after update');
}, 'Updated Animations maintain their order in the list');
promise_test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim1 200s, anim1 100s';
// Store original state
- var animations = div.getAnimations();
- var animation1 = animations[0];
- var animation2 = animations[1];
+ let animations = div.getAnimations();
+ const animation1 = animations[0];
+ const animation2 = animations[1];
// Wait before continuing so we can compare start times (otherwise the
// new Animation objects and existing Animation objects will all have the same
// start time).
return waitForAllAnimations(animations).then(waitForFrame).then(() => {
// Swap duration of first and second in list and prepend animation at the
// same time
div.style.animation = 'anim1 100s, anim1 100s, anim1 200s';
@@ -93,43 +93,43 @@ promise_test(t => {
return animations[0].ready;
}).then(() => {
assert_greater_than(animations[0].startTime, animations[1].startTime,
'New Animation has later start time');
});
}, 'Only the startTimes of existing animations are preserved');
promise_test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim1 100s, anim1 100s';
- var secondAnimation = div.getAnimations()[1];
+ const secondAnimation = div.getAnimations()[1];
// Wait before continuing so we can compare start times
return secondAnimation.ready.then(waitForNextFrame).then(() => {
// Trim list of animations
div.style.animationName = 'anim1';
- var animations = div.getAnimations();
+ const animations = div.getAnimations();
assert_equals(animations.length, 1, 'List of Animations was trimmed');
assert_equals(animations[0], secondAnimation,
'Remaining Animation is the second one in the list');
assert_equals(typeof(animations[0].startTime), 'number',
'Remaining Animation has resolved startTime');
assert_less_than(animations[0].startTime,
animations[0].timeline.currentTime,
'Remaining Animation preserves startTime');
});
}, 'Animations are removed from the start of the list while preserving'
+ ' the state of existing Animations');
promise_test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim1 100s';
- var firstAddedAnimation = div.getAnimations()[0],
- secondAddedAnimation,
- animations;
+ const firstAddedAnimation = div.getAnimations()[0];
+ let secondAddedAnimation;
+ let animations;
// Wait and add second Animation
return firstAddedAnimation.ready.then(waitForFrame).then(() => {
div.style.animation = 'anim1 100s, anim1 100s';
secondAddedAnimation = div.getAnimations()[0];
// Wait again and add another Animation
return secondAddedAnimation.ready.then(waitForFrame);
--- a/dom/animation/test/css-animations/test_cssanimation-animationname.html
+++ b/dom/animation/test/css-animations/test_cssanimation-animationname.html
@@ -9,31 +9,31 @@
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'xyz 100s';
assert_equals(div.getAnimations()[0].animationName, 'xyz',
'Animation name matches keyframes rule name');
}, 'Animation name makes keyframe rule');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'x\\yz 100s';
assert_equals(div.getAnimations()[0].animationName, 'xyz',
'Escaped animation name matches keyframes rule name');
}, 'Escaped animation name');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'x\\79 z 100s';
assert_equals(div.getAnimations()[0].animationName, 'xyz',
'Hex-escaped animation name matches keyframes rule'
+ ' name');
}, 'Animation name with hex-escape');
</script>
</body>
--- a/dom/animation/test/css-animations/test_document-get-animations.html
+++ b/dom/animation/test/css-animations/test_document-get-animations.html
@@ -30,17 +30,17 @@
test(t => {
assert_equals(document.getAnimations().length, 0,
'getAnimations returns an empty sequence for a document'
+ ' with no animations');
}, 'getAnimations for non-animated content');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
// Add an animation
div.style.animation = 'animLeft 100s';
assert_equals(document.getAnimations().length, 1,
'getAnimations returns a running CSS Animation');
// Add another animation
div.style.animation = 'animLeft 100s, animTop 100s';
@@ -49,40 +49,40 @@ test(t => {
// Remove both
div.style.animation = '';
assert_equals(document.getAnimations().length, 0,
'getAnimations returns no running CSS Animations');
}, 'getAnimations for CSS Animations');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'animLeft 100s, animTop 100s, animRight 100s, ' +
'animBottom 100s';
- var animations = document.getAnimations();
+ const 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');
assert_equals(animations[3].animationName, 'animBottom',
'Order of fourth animation returned');
}, 'Order of CSS Animations - within an element');
test(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' });
+ const div1 = addDiv(t, { style: 'animation: animLeft 100s' });
+ const div2 = addDiv(t, { style: 'animation: animLeft 100s' });
+ const div3 = addDiv(t, { style: 'animation: animLeft 100s' });
+ const div4 = addDiv(t, { style: 'animation: animLeft 100s' });
- var animations = document.getAnimations();
+ let 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');
@@ -108,23 +108,23 @@ test(t => {
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');
}, 'Order of CSS Animations - across elements');
test(t => {
- var div1 = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
- var div2 = addDiv(t, { style: 'animation: animBottom 100s' });
+ const div1 = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
+ const div2 = addDiv(t, { style: 'animation: animBottom 100s' });
- var expectedResults = [ [ div1, 'animLeft' ],
- [ div1, 'animTop' ],
- [ div2, 'animBottom' ] ];
- var animations = document.getAnimations();
+ let expectedResults = [ [ div1, 'animLeft' ],
+ [ div1, 'animTop' ],
+ [ div2, 'animBottom' ] ];
+ let animations = document.getAnimations();
assert_equals(animations.length, expectedResults.length,
'getAnimations returns all running CSS Animations');
animations.forEach((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);
});
@@ -145,44 +145,44 @@ test(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(t => {
- var div = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
- var animLeft = document.getAnimations()[0];
+ const div = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
+ const 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.getAnimations();
+ const 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(t => {
- var div = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
- var animLeft = document.getAnimations()[0];
- var animTop = document.getAnimations()[1];
+ const div = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
+ const animLeft = document.getAnimations()[0];
+ const animTop = document.getAnimations()[1];
// Disassociate both animations from markup and restart in opposite order
div.style.animation = '';
animTop.play();
animLeft.play();
- var animations = document.getAnimations();
+ const 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
@@ -190,87 +190,87 @@ test(t => {
animTop.play();
assert_equals(document.getAnimations()[0], animTop,
'After restarting, the ordering of free animations' +
' does not change');
}, 'Order of CSS Animations - free animations');
test(t => {
// Add an animation first
- var div = addDiv(t, { style: 'animation: animLeft 100s' });
+ const 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.getAnimations();
+ const 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(t => {
- var div = addDiv(t, { style: 'animation: animLeft 100s forwards' });
+ const div = addDiv(t, { style: 'animation: animLeft 100s forwards' });
div.getAnimations()[0].finish();
assert_equals(document.getAnimations().length, 1,
'Forwards-filling CSS animations are returned');
}, 'Finished but filling CSS Animations are returned');
test(t => {
- var div = addDiv(t, { style: 'animation: animLeft 100s' });
+ const div = addDiv(t, { style: 'animation: animLeft 100s' });
div.getAnimations()[0].finish();
assert_equals(document.getAnimations().length, 0,
'Non-filling finished CSS animations are not returned');
}, 'Finished but not filling CSS Animations are not returned');
test(t => {
- var div = addDiv(t, { style: 'animation: animLeft 100s 100s' });
+ const div = addDiv(t, { style: 'animation: animLeft 100s 100s' });
assert_equals(document.getAnimations().length, 1,
'Yet-to-start CSS animations are returned');
}, 'Yet-to-start CSS Animations are returned');
test(t => {
- var div = addDiv(t, { style: 'animation: animLeft 100s' });
+ const div = addDiv(t, { style: 'animation: animLeft 100s' });
div.getAnimations()[0].cancel();
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(t => {
- var div = addDiv(t, { style: 'animation: animLeft 100s' });
- var anim = div.getAnimations()[0];
+ const div = addDiv(t, { style: 'animation: animLeft 100s' });
+ const anim = div.getAnimations()[0];
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(t => {
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);
+ const parent = addDiv(t, { 'id': 'parent' });
+ const child = addDiv(t);
parent.appendChild(child);
[parent, child].forEach((div) => {
div.setAttribute('style', 'animation: animBottom 10s');
});
- var anims = document.getAnimations();
+ const 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',
--- a/dom/animation/test/css-animations/test_effect-target.html
+++ b/dom/animation/test/css-animations/test_effect-target.html
@@ -13,43 +13,43 @@
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim 100s';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
assert_equals(animation.effect.target, div,
'Animation.target is the animatable div');
}, 'Returned CSS animations have the correct effect target');
test(t => {
addStyle(t, { '.after::after': 'animation: anim 10s, anim 100s;' });
- var div = addDiv(t, { class: 'after' });
- var anims = document.getAnimations();
+ const div = addDiv(t, { class: 'after' });
+ const anims = document.getAnimations();
assert_equals(anims.length, 2,
'Got animations running on ::after pseudo element');
assert_equals(anims[0].effect.target, anims[1].effect.target,
'Both animations return the same target object');
}, 'effect.target should return the same CSSPseudoElement object each time');
test(t => {
addStyle(t, { '.after::after': 'animation: anim 10s;' });
- var div = addDiv(t, { class: 'after' });
- var pseudoTarget = document.getAnimations()[0].effect.target;
- var effect = new KeyframeEffect(pseudoTarget,
- { background: ["blue", "red"] },
- 3 * MS_PER_SEC);
- var newAnim = new Animation(effect, document.timeline);
+ const div = addDiv(t, { class: 'after' });
+ const pseudoTarget = document.getAnimations()[0].effect.target;
+ const effect = new KeyframeEffect(pseudoTarget,
+ { background: ["blue", "red"] },
+ 3 * MS_PER_SEC);
+ const newAnim = new Animation(effect, document.timeline);
newAnim.play();
- var anims = document.getAnimations();
+ const anims = document.getAnimations();
assert_equals(anims.length, 2,
'Got animations running on ::after pseudo element');
assert_not_equals(anims[0], newAnim,
'The scriped-generated animation appears last');
assert_equals(newAnim.effect.target, pseudoTarget,
'The effect.target of the scripted-generated animation is ' +
'the same as the one from the argument of ' +
'KeyframeEffect constructor');
--- a/dom/animation/test/css-animations/test_element-get-animations.html
+++ b/dom/animation/test/css-animations/test_element-get-animations.html
@@ -22,34 +22,34 @@
@keyframes empty { }
</style>
<body>
<div id="log"></div>
<script>
'use strict';
test(t => {
- var div = addDiv(t);
+ const div = addDiv(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(t => {
- var div = addDiv(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';
- var animations = div.getAnimations();
+ let animations = div.getAnimations();
assert_equals(animations.length, 1,
'getAnimations returns an Animation running CSS Animations');
return animations[0].ready.then(() => {
- var startTime = animations[0].startTime;
+ 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.
return waitForFrame();
@@ -66,273 +66,273 @@ promise_test(t => {
}).then(() => {
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 for CSS Animations');
test(t => {
- var div = addDiv(t, { style: 'animation: anim1 100s' });
+ 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');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
// Add an animation that targets multiple properties
div.style.animation = 'multiPropAnim 100s';
assert_equals(div.getAnimations().length, 1,
'getAnimations returns only one Animation for a CSS Animation'
+ ' that targets multiple properties');
}, 'getAnimations for multi-property animations');
promise_test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
// Add an animation
div.style.backgroundColor = 'red';
div.style.animation = 'anim1 100s';
getComputedStyle(div).backgroundColor;
// Wait until a frame after the animation starts, then add a transition
- var animations = div.getAnimations();
+ let animations = div.getAnimations();
return animations[0].ready.then(waitForFrame).then(() => {
div.style.transition = 'all 100s';
div.style.backgroundColor = 'green';
animations = div.getAnimations();
assert_equals(animations.length, 2,
'getAnimations returns Animations for both animations and'
+ ' transitions that run simultaneously');
assert_class_string(animations[0], 'CSSTransition',
'First-returned animation is the CSS Transition');
assert_class_string(animations[1], 'CSSAnimation',
'Second-returned animation is the CSS Animation');
});
}, 'getAnimations for both CSS Animations and CSS Transitions at once');
async_test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
// Set up event listener
div.addEventListener('animationend', t.step_func(() => {
assert_equals(div.getAnimations().length, 0,
'getAnimations does not return Animations for finished '
+ ' (and non-forwards-filling) CSS Animations');
t.done();
}));
// Add a very short animation
div.style.animation = 'anim1 0.01s';
}, 'getAnimations for CSS Animations that have finished');
async_test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
// Set up event listener
div.addEventListener('animationend', t.step_func(() => {
assert_equals(div.getAnimations().length, 1,
'getAnimations returns Animations for CSS Animations that have'
+ ' finished but are filling forwards');
t.done();
}));
// Add a very short animation
div.style.animation = 'anim1 0.01s forwards';
}, 'getAnimations for CSS Animations that have finished but are'
+ ' forwards filling');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'none 100s';
- var animations = div.getAnimations();
+ let animations = div.getAnimations();
assert_equals(animations.length, 0,
'getAnimations returns an empty sequence for an element'
+ ' with animation-name: none');
div.style.animation = 'none 100s, anim1 100s';
animations = div.getAnimations();
assert_equals(animations.length, 1,
'getAnimations returns Animations only for those CSS Animations whose'
+ ' animation-name is not none');
}, 'getAnimations for CSS Animations with animation-name: none');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'missing 100s';
- var animations = div.getAnimations();
+ let animations = div.getAnimations();
assert_equals(animations.length, 0,
'getAnimations returns an empty sequence for an element'
+ ' with animation-name: missing');
div.style.animation = 'anim1 100s, missing 100s';
animations = div.getAnimations();
assert_equals(animations.length, 1,
'getAnimations returns Animations only for those CSS Animations whose'
+ ' animation-name is found');
}, 'getAnimations for CSS Animations with animation-name: missing');
promise_test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim1 100s, notyet 100s';
- var animations = div.getAnimations();
+ let animations = div.getAnimations();
assert_equals(animations.length, 1,
'getAnimations initally only returns Animations for CSS Animations whose'
+ ' animation-name is found');
return animations[0].ready.then(waitForFrame).then(() => {
- var keyframes = '@keyframes notyet { to { left: 100px; } }';
+ const keyframes = '@keyframes notyet { to { left: 100px; } }';
document.styleSheets[0].insertRule(keyframes, 0);
animations = div.getAnimations();
assert_equals(animations.length, 2,
'getAnimations includes Animation when @keyframes rule is added'
+ ' later');
return waitForAllAnimations(animations);
}).then(() => {
assert_true(animations[0].startTime < animations[1].startTime,
'Newly added animation has a later start time');
document.styleSheets[0].deleteRule(0);
});
}, 'getAnimations for CSS Animations where the @keyframes rule is added'
+ ' later');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim1 100s, anim1 100s';
assert_equals(div.getAnimations().length, 2,
'getAnimations returns one Animation for each CSS animation-name'
+ ' even if the names are duplicated');
}, 'getAnimations for CSS Animations with duplicated animation-name');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'empty 100s';
assert_equals(div.getAnimations().length, 1,
'getAnimations returns Animations for CSS animations with an'
+ ' empty keyframes rule');
}, 'getAnimations for CSS Animations with empty keyframes rule');
promise_test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim1 100s 100s';
- var animations = div.getAnimations();
+ const animations = div.getAnimations();
assert_equals(animations.length, 1,
'getAnimations returns animations for CSS animations whose'
+ ' delay makes them start later');
return animations[0].ready.then(waitForFrame).then(() => {
assert_true(animations[0].startTime <= document.timeline.currentTime,
'For CSS Animations in delay phase, the start time of the Animation is'
+ ' not in the future');
});
}, 'getAnimations for CSS animations in delay phase');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim1 0s 100s';
assert_equals(div.getAnimations().length, 1,
'getAnimations returns animations for CSS animations whose'
+ ' duration is zero');
div.remove();
}, 'getAnimations for zero-duration CSS Animations');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim1 100s';
- var originalAnimation = div.getAnimations()[0];
+ const originalAnimation = div.getAnimations()[0];
// Update pause state (an Animation change)
div.style.animationPlayState = 'paused';
- var pendingAnimation = div.getAnimations()[0];
+ const pendingAnimation = div.getAnimations()[0];
assert_equals(pendingAnimation.playState, 'paused',
'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';
- var extendedAnimation = div.getAnimations()[0];
+ const extendedAnimation = div.getAnimations()[0];
// FIXME: Check extendedAnimation.effect.timing.duration has changed once the
// API is available
assert_equals(originalAnimation, extendedAnimation,
'getAnimations returns the same objects even when their'
+ ' duration changes');
}, 'getAnimations returns objects with the same identity');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim1 100s';
assert_equals(div.getAnimations().length, 1,
'getAnimations returns an animation before cancelling');
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
animation.cancel();
assert_equals(div.getAnimations().length, 0,
'getAnimations does not return cancelled animations');
animation.play();
assert_equals(div.getAnimations().length, 1,
'getAnimations returns cancelled animations that have been re-started');
}, 'getAnimations for CSS Animations that are cancelled');
promise_test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim2 100s';
return div.getAnimations()[0].ready.then(() => {
// Prepend to the list and test that even though anim1 was triggered
// *after* anim2, it should come first because it appears first
// in the animation-name property.
div.style.animation = 'anim1 100s, anim2 100s';
- var anims = div.getAnimations();
+ let anims = div.getAnimations();
assert_equals(anims[0].animationName, 'anim1',
'animation order after prepending to list');
assert_equals(anims[1].animationName, 'anim2',
'animation order after prepending to list');
// Normally calling cancel and play would this push anim1 to the top of
// the stack but it shouldn't for CSS animations that map an the
// animation-name property.
- var anim1 = anims[0];
+ const anim1 = anims[0];
anim1.cancel();
anim1.play();
anims = div.getAnimations();
assert_equals(anims[0].animationName, 'anim1',
'animation order after cancelling and restarting');
assert_equals(anims[1].animationName, 'anim2',
'animation order after cancelling and restarting');
});
}, 'getAnimations for CSS Animations follows animation-name order');
test(t => {
addStyle(t, { '#target::after': 'animation: anim1 10s;',
'#target::before': 'animation: anim1 10s;' });
- var target = addDiv(t, { 'id': 'target' });
+ const target = addDiv(t, { 'id': 'target' });
target.style.animation = 'anim1 100s';
- var animations = target.getAnimations({ subtree: false });
+ 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');
test(t => {
addStyle(t, { '#target::after': 'animation: anim1 10s;',
'#target::before': 'animation: anim1 10s;' });
- var target = addDiv(t, { 'id': 'target' });
+ const target = addDiv(t, { 'id': 'target' });
target.style.animation = 'anim1 100s';
- var animations = target.getAnimations({ subtree: true });
+ const animations = target.getAnimations({ subtree: true });
assert_equals(animations.length, 3,
'getAnimations({ subtree: true }) ' +
'should return animations on pseudo-elements');
assert_equals(animations[0].effect.target, target,
'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 ' +
@@ -342,41 +342,41 @@ test(t => {
'should be returned last');
}, 'Test AnimationFilter{ subtree: true } with single element');
test(t => {
addStyle(t, { '#parent::after': 'animation: anim1 10s;',
'#parent::before': 'animation: anim1 10s;',
'#child::after': 'animation: anim1 10s;',
'#child::before': 'animation: anim1 10s;' });
- var parent = addDiv(t, { 'id': 'parent' });
+ const parent = addDiv(t, { 'id': 'parent' });
parent.style.animation = 'anim1 100s';
- var child = addDiv(t, { 'id': 'child' });
+ const child = addDiv(t, { 'id': 'child' });
child.style.animation = 'anim1 100s';
parent.appendChild(child);
- var animations = parent.getAnimations({ subtree: false });
+ 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');
test(t => {
addStyle(t, { '#parent::after': 'animation: anim1 10s;',
'#parent::before': 'animation: anim1 10s;',
'#child::after': 'animation: anim1 10s;',
'#child::before': 'animation: anim1 10s;' });
- var parent = addDiv(t, { 'id': 'parent' });
- var child = addDiv(t, { 'id': 'child' });
+ const parent = addDiv(t, { 'id': 'parent' });
+ const child = addDiv(t, { 'id': 'child' });
parent.style.animation = 'anim1 100s';
child.style.animation = 'anim1 100s';
parent.appendChild(child);
- var animations = parent.getAnimations({ subtree: true });
+ const animations = parent.getAnimations({ subtree: true });
assert_equals(animations.length, 6,
'Should find all elements, pesudo-elements that parent has');
assert_equals(animations[0].effect.target, parent,
'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 ' +
@@ -400,34 +400,34 @@ test(t => {
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');
test(t => {
- var parent = addDiv(t, { 'id': 'parent' });
- var child1 = addDiv(t, { 'id': 'child1' });
- var grandchild1 = addDiv(t, { 'id': 'grandchild1' });
- var grandchild2 = addDiv(t, { 'id': 'grandchild2' });
- var child2 = addDiv(t, { 'id': 'child2' });
+ 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' });
parent.style.animation = 'anim1 100s';
child1.style.animation = 'anim1 100s';
grandchild1.style.animation = 'anim1 100s';
grandchild2.style.animation = 'anim1 100s';
child2.style.animation = 'anim1 100s';
parent.appendChild(child1);
child1.appendChild(grandchild1);
child1.appendChild(grandchild2);
parent.appendChild(child2);
- var animations = parent.getAnimations({ subtree: true });
+ const animations = parent.getAnimations({ subtree: true });
assert_equals(
parent.getAnimations({ subtree: true }).length, 5,
'Should find all descendants of the element');
assert_equals(animations[0].effect.target, parent,
'The animation targeting the parent element ' +
'should be returned first');
--- a/dom/animation/test/css-animations/test_event-dispatch.html
+++ b/dom/animation/test/css-animations/test_event-dispatch.html
@@ -46,19 +46,19 @@ AnimationEventHandler.prototype.clear =
const setupAnimation = (t, animationStyle) => {
const div = addDiv(t, { style: 'animation: ' + animationStyle });
// Note that this AnimationEventHandler should be created before EventWatcher
// to capture all events in the handler prior to the EventWatcher since
// testharness.js proceeds when the EventWatcher received watching events.
const handler = new AnimationEventHandler(div);
const watcher = new EventWatcher(t, div, [ 'animationstart',
- 'animationiteration',
- 'animationend',
- 'animationcancel' ]);
+ 'animationiteration',
+ 'animationend',
+ 'animationcancel' ]);
const animation = div.getAnimations()[0];
return { animation, watcher, div, handler };
};
promise_test(t => {
// Add 1ms delay to ensure that the delay is not included in the elapsedTime.
const { animation, watcher } = setupAnimation(t, 'anim 100s 1ms');
--- a/dom/animation/test/css-animations/test_keyframeeffect-getkeyframes.html
+++ b/dom/animation/test/css-animations/test_keyframeeffect-getkeyframes.html
@@ -160,17 +160,17 @@
"use strict";
const getKeyframes = elem => elem.getAnimations()[0].effect.getKeyframes();
const assert_frames_equal = (a, b, name) => {
assert_equals(Object.keys(a).sort().toString(),
Object.keys(b).sort().toString(),
"properties on " + name);
- for (var p in a) {
+ for (const p in a) {
if (p === 'offset' || p === 'computedOffset') {
assert_approx_equals(a[p], b[p], 0.00001,
"value for '" + p + "' on " + name);
} else {
assert_equals(a[p], b[p], "value for '" + p + "' on " + name);
}
}
};
@@ -189,17 +189,17 @@ const kTimingFunctionValues = [
"steps(2, start)",
"steps(1)",
"steps(2)",
"cubic-bezier(0, 0, 1, 1)",
"cubic-bezier(0, 0.25, 0.75, 1)"
];
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-empty 100s';
assert_equals(getKeyframes(div).length, 0,
"number of frames with empty @keyframes");
div.style.animation = 'anim-empty-frames 100s';
assert_equals(getKeyframes(div).length, 0,
"number of frames when @keyframes has empty keyframes");
@@ -212,543 +212,543 @@ test(t => {
div.style.animation = 'anim-only-non-animatable 100s';
assert_equals(getKeyframes(div).length, 0,
"number of frames when @keyframes only has frames with " +
"non-animatable properties");
}, 'KeyframeEffect.getKeyframes() returns no frames for various kinds'
+ ' of empty enimations');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-simple 100s';
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
- var expected = [
+ const expected = [
{ offset: 0, computedOffset: 0, easing: "ease",
color: "rgb(0, 0, 0)", composite: null },
{ offset: 1, computedOffset: 1, easing: "ease",
color: "rgb(255, 255, 255)", composite: null },
];
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for a simple'
+ ' animation');
test(t => {
kTimingFunctionValues.forEach(function(easing) {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-simple-three 100s ' + easing;
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 3, "number of frames");
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_equals(frames[i].easing, easing,
"value for 'easing' on ComputedKeyframe #" + i);
}
});
}, 'KeyframeEffect.getKeyframes() returns frames with expected easing'
+ ' values, when the easing comes from animation-timing-function on the'
+ ' element');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-simple-timing 100s';
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 3, "number of frames");
assert_equals(frames[0].easing, "linear",
"value of 'easing' on ComputedKeyframe #0");
assert_equals(frames[1].easing, "ease-in-out",
"value of 'easing' on ComputedKeyframe #1");
assert_equals(frames[2].easing, "steps(1)",
"value of 'easing' on ComputedKeyframe #2");
}, 'KeyframeEffect.getKeyframes() returns frames with expected easing'
+ ' values, when the easing is specified on each keyframe');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-simple-timing-some 100s step-start';
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 3, "number of frames");
assert_equals(frames[0].easing, "linear",
"value of 'easing' on ComputedKeyframe #0");
assert_equals(frames[1].easing, "steps(1, start)",
"value of 'easing' on ComputedKeyframe #1");
assert_equals(frames[2].easing, "steps(1, start)",
"value of 'easing' on ComputedKeyframe #2");
}, 'KeyframeEffect.getKeyframes() returns frames with expected easing'
+ ' values, when the easing is specified on some keyframes');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-simple-shorthand 100s';
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
- var expected = [
+ const expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
marginBottom: "8px", marginLeft: "8px",
marginRight: "8px", marginTop: "8px" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
marginBottom: "16px", marginLeft: "16px",
marginRight: "16px", marginTop: "16px" },
];
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for a simple'
+ ' animation that specifies a single shorthand property');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-omit-to 100s';
div.style.color = 'rgb(255, 255, 255)';
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
- var expected = [
+ const expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
color: "rgb(0, 0, 255)" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
color: "rgb(255, 255, 255)" },
];
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
'animation with a 0% keyframe and no 100% keyframe');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-omit-from 100s';
div.style.color = 'rgb(255, 255, 255)';
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
- var expected = [
+ const expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
color: "rgb(255, 255, 255)" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
color: "rgb(0, 0, 255)" },
];
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
'animation with a 100% keyframe and no 0% keyframe');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-omit-from-to 100s';
div.style.color = 'rgb(255, 255, 255)';
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 3, "number of frames");
- var expected = [
+ const expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
color: "rgb(255, 255, 255)" },
{ offset: 0.5, computedOffset: 0.5, easing: "ease", composite: null,
color: "rgb(0, 0, 255)" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
color: "rgb(255, 255, 255)" },
];
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
'animation with no 0% or 100% keyframe but with a 50% keyframe');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-partially-omit-to 100s';
div.style.marginTop = '250px';
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
- var expected = [
+ const expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
marginTop: '50px', marginBottom: '100px' },
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
marginTop: '250px', marginBottom: '200px' },
];
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
'animation with a partially complete 100% keyframe (because the ' +
'!important rule is ignored)');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-different-props 100s';
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 4, "number of frames");
- var expected = [
+ const expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
color: "rgb(0, 0, 0)", marginTop: "8px" },
{ offset: 0.25, computedOffset: 0.25, easing: "ease", composite: null,
color: "rgb(0, 0, 255)" },
{ offset: 0.75, computedOffset: 0.75, easing: "ease", composite: null,
marginTop: "12px" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
color: "rgb(255, 255, 255)", marginTop: "16px" },
];
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
'animation with different properties on different keyframes, all ' +
'with the same easing function');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-different-props-and-easing 100s';
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 4, "number of frames");
- var expected = [
+ const expected = [
{ offset: 0, computedOffset: 0, easing: "linear", composite: null,
color: "rgb(0, 0, 0)", marginTop: "8px" },
{ offset: 0.25, computedOffset: 0.25, easing: "steps(1)", composite: null,
color: "rgb(0, 0, 255)" },
{ offset: 0.75, computedOffset: 0.75, easing: "ease-in", composite: null,
marginTop: "12px" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
color: "rgb(255, 255, 255)", marginTop: "16px" },
];
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
'animation with different properties on different keyframes, with ' +
'a different easing function on each');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-merge-offset 100s';
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
- var expected = [
+ const expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
color: "rgb(0, 0, 0)", marginTop: "8px" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
color: "rgb(255, 255, 255)", marginTop: "16px" },
];
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
'animation with multiple keyframes for the same time, and all with ' +
'the same easing function');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-merge-offset-and-easing 100s';
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 3, "number of frames");
- var expected = [
+ const expected = [
{ offset: 0, computedOffset: 0, easing: "steps(1)", composite: null,
color: "rgb(0, 0, 0)", fontSize: "16px" },
{ offset: 0, computedOffset: 0, easing: "linear", composite: null,
marginTop: "8px", paddingLeft: "2px" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
color: "rgb(255, 255, 255)", fontSize: "32px", marginTop: "16px",
paddingLeft: "4px" },
];
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
'animation with multiple keyframes for the same time and with ' +
'different easing functions');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-no-merge-equiv-easing 100s';
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 3, "number of frames");
- var expected = [
+ const expected = [
{ offset: 0, computedOffset: 0, easing: "steps(1)", composite: null,
marginTop: "0px", marginRight: "0px", marginBottom: "0px" },
{ offset: 0.5, computedOffset: 0.5, easing: "steps(1)", composite: null,
marginTop: "10px", marginRight: "10px", marginBottom: "10px" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
marginTop: "20px", marginRight: "20px", marginBottom: "20px" },
];
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
'animation with multiple keyframes for the same time and with ' +
'different but equivalent easing functions');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-overriding 100s';
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 6, "number of frames");
- var expected = [
+ const expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
paddingTop: "30px" },
{ offset: 0.5, computedOffset: 0.5, easing: "ease", composite: null,
paddingTop: "20px" },
{ offset: 0.75, computedOffset: 0.75, easing: "ease", composite: null,
paddingTop: "20px" },
{ offset: 0.85, computedOffset: 0.85, easing: "ease", composite: null,
paddingTop: "30px" },
{ offset: 0.851, computedOffset: 0.851, easing: "ease", composite: null,
paddingTop: "60px" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
paddingTop: "70px" },
];
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for ' +
'overlapping keyframes');
// Gecko-specific test case: We are specifically concerned here that the
// computed value for filter, "none", is correctly represented.
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-filter 100s';
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
- var expected = [
+ const expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
filter: "none" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
filter: "blur(5px) sepia(60%) saturate(30%)" },
];
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
'animations with filter properties and missing keyframes');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-filter-drop-shadow 100s';
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
- var expected = [
+ const expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
filter: "drop-shadow(rgb(0, 255, 0) 10px 10px 10px)" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
filter: "drop-shadow(rgb(255, 0, 0) 50px 30px 10px)" },
];
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
'animation with drop-shadow of filter property');
// Gecko-specific test case: We are specifically concerned here that the
// computed value for text-shadow and a "none" specified on a keyframe
// are correctly represented.
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.textShadow = '1px 1px 2px rgb(0, 0, 0), ' +
'0 0 16px rgb(0, 0, 255), ' +
'0 0 3.2px rgb(0, 0, 255)';
div.style.animation = 'anim-text-shadow 100s';
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
- var expected = [
+ const expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
textShadow: "rgb(0, 0, 0) 1px 1px 2px,"
+ " rgb(0, 0, 255) 0px 0px 16px,"
+ " rgb(0, 0, 255) 0px 0px 3.2px" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
textShadow: "none" },
];
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
'animations with text-shadow properties and missing keyframes');
// Gecko-specific test case: We are specifically concerned here that the
// initial value for background-size and the specified list are correctly
// represented.
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-background-size 100s';
- var frames = getKeyframes(div);
+ let frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
- var expected = [
+ const expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
backgroundSize: "auto auto" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
backgroundSize: "50% auto, 6px auto, contain" },
];
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
// Test inheriting a background-size value
expected[0].backgroundSize = div.style.backgroundSize =
"30px auto, 40% auto, auto auto";
frames = getKeyframes(div);
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i
+ " after updating current style");
}
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
'animations with background-size properties and missing keyframes');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-variables 100s';
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
- var expected = [
+ const expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
transform: "none" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
transform: "translate(100px, 0px)" },
];
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
'animations with CSS variables as keyframe values');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-variables-shorthand 100s';
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
- var expected = [
+ const expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
marginBottom: "0px",
marginLeft: "0px",
marginRight: "0px",
marginTop: "0px" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
marginBottom: "100px",
marginLeft: "100px",
marginRight: "100px",
marginTop: "100px" },
];
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
'animations with CSS variables as keyframe values in a shorthand property');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-custom-property-in-keyframe 100s';
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
- var expected = [
+ const expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
color: "rgb(0, 0, 0)" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
color: "rgb(0, 255, 0)" },
];
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
'animations with a CSS variable which is overriden by the value in keyframe');
test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim-only-custom-property-in-keyframe 100s';
- var frames = getKeyframes(div);
+ const frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
- var expected = [
+ const expected = [
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
transform: "translate(100px, 0px)" },
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
transform: "none" },
];
- for (var i = 0; i < frames.length; i++) {
+ for (let i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
'animations with only custom property in a keyframe');
</script>
</body>
--- a/dom/animation/test/css-animations/test_pseudoElement-get-animations.html
+++ b/dom/animation/test/css-animations/test_pseudoElement-get-animations.html
@@ -24,41 +24,41 @@
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
test(t => {
- var div = addDiv(t, { class: 'before' });
- var pseudoTarget = document.getAnimations()[0].effect.target;
+ const div = addDiv(t, { class: 'before' });
+ const pseudoTarget = document.getAnimations()[0].effect.target;
assert_equals(pseudoTarget.getAnimations().length, 1,
'Expected number of animations are returned');
assert_equals(pseudoTarget.getAnimations()[0].animationName, 'anim1',
'CSS animation name matches');
}, 'getAnimations returns CSSAnimation objects');
test(t => {
- var div = addDiv(t, { class: 'after-with-mix-anims-trans' });
+ const div = addDiv(t, { class: 'after-with-mix-anims-trans' });
// Trigger transitions
flushComputedStyle(div);
div.classList.add('after-change');
// Create additional animation on the pseudo-element from script
- var pseudoTarget = document.getAnimations()[0].effect.target;
- var effect = new KeyframeEffect(pseudoTarget,
- { background: ["blue", "red"] },
- 3 * MS_PER_SEC);
- var newAnimation = new Animation(effect, document.timeline);
+ const pseudoTarget = document.getAnimations()[0].effect.target;
+ const effect = new KeyframeEffect(pseudoTarget,
+ { background: ["blue", "red"] },
+ 3 * MS_PER_SEC);
+ const newAnimation = new Animation(effect, document.timeline);
newAnimation.id = 'scripted-anim';
newAnimation.play();
// Check order - the script-generated animation should appear later
- var anims = pseudoTarget.getAnimations();
+ const anims = pseudoTarget.getAnimations();
assert_equals(anims.length, 5,
'Got expected number of animations/trnasitions running on ' +
'::after pseudo element');
assert_equals(anims[0].transitionProperty, 'height',
'1st animation is the 1st transition sorted by name');
assert_equals(anims[1].transitionProperty, 'width',
'2nd animation is the 2nd transition sorted by name ');
assert_equals(anims[2].animationName, 'anim1',
--- a/dom/animation/test/css-animations/test_setting-effect.html
+++ b/dom/animation/test/css-animations/test_setting-effect.html
@@ -14,112 +14,112 @@
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
promise_test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim 100s';
- var watcher = new EventWatcher(t, div, [ 'animationend',
- 'animationcancel' ]);
- var animation = div.getAnimations()[0];
+ const watcher = new EventWatcher(t, div, [ 'animationend',
+ 'animationcancel' ]);
+ const animation = div.getAnimations()[0];
return animation.ready.then(() => {
animation.currentTime = 50 * MS_PER_SEC;
animation.effect = null;
assert_equals(animation.playState, 'finished');
assert_equals(getComputedStyle(div).marginLeft, '0px');
return watcher.wait_for('animationend');
});
}, 'Setting a null effect on a running animation fires an animationend event');
promise_test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim 100s';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
return animation.ready.then(() => {
animation.currentTime = 50 * MS_PER_SEC;
animation.effect = new KeyframeEffect(div,
{ left: [ '0px' , '100px'] },
100 * MS_PER_SEC);
assert_equals(animation.playState, 'running');
assert_equals(getComputedStyle(div).marginLeft, '0px');
assert_equals(getComputedStyle(div).left, '50px');
});
}, 'Replacing an animation\'s effect with an effect that targets a different ' +
'property should update both properties');
promise_test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim 100s';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
return animation.ready.then(() => {
animation.currentTime = 50 * MS_PER_SEC;
animation.effect = new KeyframeEffect(div,
{ left: [ '0px' , '100px'] },
20 * MS_PER_SEC);
assert_equals(animation.playState, 'finished');
});
}, 'Replacing an animation\'s effect with a shorter one that should have ' +
'already finished, the animation finishes immediately');
promise_test(t => {
- var div = addDiv(t);
+ const div = addDiv(t);
div.style.animation = 'anim 100s';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
assert_true(animation.pending);
animation.effect = new KeyframeEffect(div,
{ left: [ '0px' , '100px'] },
100 * MS_PER_SEC);
assert_true(animation.pending);
return animation.ready.then(() => {
assert_false(animation.pending);
});
}, 'A play-pending animation\'s effect whose effect is replaced still exits ' +
'the pending state');
promise_test(t => {
- var div1 = addDiv(t);
- var div2 = addDiv(t);
+ const div1 = addDiv(t);
+ const div2 = addDiv(t);
- var watcher1 = new EventWatcher(t, div1, 'animationstart');
+ const watcher1 = new EventWatcher(t, div1, 'animationstart');
// Watch |div2| as well to ensure it does *not* get events.
- var watcher2 = new EventWatcher(t, div2, 'animationstart');
+ const watcher2 = new EventWatcher(t, div2, 'animationstart');
div1.style.animation = 'anim 100s';
- var animation = div1.getAnimations()[0];
+ const animation = div1.getAnimations()[0];
animation.effect = new KeyframeEffect(div2,
{ left: [ '0px', '100px' ] },
100 * MS_PER_SEC);
return watcher1.wait_for('animationstart').then(() => {
assert_equals(animation.effect.target, div2);
// Then wait a couple of frames and check that no event was dispatched.
return waitForAnimationFrames(2);
});
}, 'The event is dispatched at the original element even after setting an ' +
'effect with a different target element');
promise_test(t => {
- var div = addDiv(t);
- var watcher = new EventWatcher(t, div, [ 'animationstart',
- 'animationend',
- 'animationcancel' ]);
+ const div = addDiv(t);
+ const watcher = new EventWatcher(t, div, [ 'animationstart',
+ 'animationend',
+ 'animationcancel' ]);
div.style.animation = 'anim 100s';
- var animation = div.getAnimations()[0];
+ const animation = div.getAnimations()[0];
animation.finish();
return watcher.wait_for([ 'animationstart',
'animationend' ]).then(evt => {
// Set a longer effect
animation.effect = new KeyframeEffect(div,
{ left: [ '0px', '100px' ] },
200 * MS_PER_SEC);