--- a/dom/animation/test/css-animations/test_animation-computed-timing.html
+++ b/dom/animation/test/css-animations/test_animation-computed-timing.html
@@ -16,56 +16,55 @@
'use strict';
// --------------------
// delay
// --------------------
test(t => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
+ const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
const effect = div.getAnimations()[0].effect;
- assert_equals(effect.getComputedTiming().delay, 0,
- 'Initial value of delay');
+ assert_equals(effect.getComputedTiming().delay, 0, 'Initial value of delay');
}, 'delay of a new animation');
test(t => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s -10s'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s 10s'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
+ 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 => {
const getEffectWithFill = fill => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s ' + fill});
+ const div = addDiv(t, { style: 'animation: moveAnimation 100s ' + fill });
return div.getAnimations()[0].effect;
};
let effect = getEffectWithFill('');
assert_equals(effect.getComputedTiming().fill, 'none',
'Initial value of fill');
effect = getEffectWithFill('forwards');
assert_equals(effect.getComputedTiming().fill, 'forwards',
@@ -79,68 +78,70 @@ test(t => {
}, 'fill of a new animation');
// --------------------
// iterationStart
// --------------------
test(t => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s 2016.5'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s infinite'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s -10s infinite'});
+ 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 => {
const getEffectWithDir = dir => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s ' + dir});
+ const div = addDiv(t, { style: 'animation: moveAnimation 100s ' + dir });
return div.getAnimations()[0].effect;
};
let effect = getEffectWithDir('');
assert_equals(effect.getComputedTiming().direction, 'normal',
'Initial value of normal direction');
effect = getEffectWithDir('reverse');
assert_equals(effect.getComputedTiming().direction, 'reverse',
@@ -154,127 +155,131 @@ test(t => {
}, 'direction of a new animation');
// --------------------
// easing
// --------------------
test(t => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s -5s'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 10s -100s infinite'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 0s 100s infinite'});
+ 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.
- const div = addDiv(t, {style: 'animation: moveAnimation 10s -100s forwards'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s infinite'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 0s 1s infinite'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s 1s 0'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
+ 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(async t => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
+ const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
const anim = div.getAnimations()[0];
anim.playbackRate = 2; // 2 times faster
await anim.ready;
assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
'localTime is equal to currentTime');
@@ -291,39 +296,47 @@ test(t => {
assert_equals(effect.getComputedTiming().localTime, null,
'localTime for orphaned effect');
}, 'localTime of an AnimationEffect without an Animation');
// --------------------
// progress
-// Note: Default timing function is linear.
+//
+// Note: Even though CSS animations have a default animation-timing-function of
+// "ease", this only applies between keyframes (often referred to as the
+// keyframe-level easing). The progress value returned by getComputedTiming(),
+// however, only reflects effect-level easing and this defaults to "linear",
+// even for CSS animations.
// --------------------
test(t => {
- const tests = [{ 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 ] }];
+ const tests = [
+ { 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] },
+ ];
for (const test of tests) {
- const div =
- addDiv(t, {style: 'animation: moveAnimation 100s 10s ' + test.fill});
+ const div = addDiv(t, {
+ style: 'animation: moveAnimation 100s 10s ' + test.fill
+ });
const anim = div.getAnimations()[0];
assert_true(anim.effect.getComputedTiming().progress === test.progress[0],
- 'initial progress with "' + test.fill + '" fill');
+ `Initial progress with "${test.fill}" fill`);
anim.finish();
assert_true(anim.effect.getComputedTiming().progress === test.progress[1],
- 'finished progress with "' + test.fill + '" fill');
+ `Initial progress with "${test.fill}" fill`);
}
}, 'progress of an animation with different fill modes');
test(t => {
- const div = addDiv(t, {style: 'animation: moveAnimation 10s 10 both'});
+ 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;
@@ -338,72 +351,76 @@ test(t => {
}, 'progress of an integral repeating animation with normal direction');
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 progress before phase wouldn't be
// unresolved (null value).
- const div = addDiv(t, {style: 'animation: moveAnimation 0s infinite both'});
+ 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
- const div = addDiv(t, {style: 'animation: moveAnimation 0s both'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 0s 5s 10.25 both'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 0s 5s 10.25 both reverse'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 10s 10.25 both alternate'});
+ 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;
@@ -414,17 +431,19 @@ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 10s 10.25 both alternate-reverse'});
+ 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;
@@ -435,17 +454,19 @@ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 0s 10.25 both alternate'});
+ 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;
@@ -453,17 +474,19 @@ test(t => {
'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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 0s 10.25 both alternate-reverse'});
+ 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;
@@ -476,93 +499,95 @@ test(t => {
'with alternate-reverse direction');
// --------------------
// currentIteration
// --------------------
test(t => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s 2s'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
+ 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).
- const div = addDiv(t, {style: 'animation: moveAnimation 0s infinite both'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 0s 10.5 both'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s 5.5 forwards'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s 2 forwards'});
+ 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 => {
- const div = addDiv(t, {style: 'animation: moveAnimation 100s forwards'});
+ 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');