Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /web-animations/timing-model/animation-effects/active-time.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset=utf-8>
<title>Active time</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
test(t => {
const tests = [ { fill: 'none', progress: null },
{ fill: 'backwards', progress: 0 },
{ fill: 'forwards', progress: null },
{ fill: 'both', progress: 0 } ];
for (const test of tests) {
const anim = createDiv(t).animate(null, { delay: 1, fill: test.fill });
assert_equals(anim.effect.getComputedTiming().progress, test.progress,
`Progress in before phase when using '${test.fill}' fill`);
}
}, 'Active time in before phase');
test(t => {
const anim = createDiv(t).animate(null, 1000);
anim.currentTime = 500;
assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.5);
}, 'Active time in active phase and no start delay is the local time');
test(t => {
const anim = createDiv(t).animate(null, { duration: 1000, delay: 500 });
anim.currentTime = 1000;
assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.5);
}, 'Active time in active phase and positive start delay is the local time'
+ ' minus the start delay');
test(t => {
const anim = createDiv(t).animate(null, { duration: 1000, delay: -500 });
assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.5);
}, 'Active time in active phase and negative start delay is the local time'
+ ' minus the start delay');
test(t => {
const anim = createDiv(t).animate(null);
assert_equals(anim.effect.getComputedTiming().progress, null);
}, 'Active time in after phase with no fill is unresolved');
test(t => {
const anim = createDiv(t).animate(null, { fill: 'backwards' });
assert_equals(anim.effect.getComputedTiming().progress, null);
}, 'Active time in after phase with backwards-only fill is unresolved');
test(t => {
const anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500, // Should have no effect
fill: 'forwards' });
anim.finish();
assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.3);
}, 'Active time in after phase with forwards fill is the active duration');
test(t => {
const anim = createDiv(t).animate(null, { duration: 0,
iterations: Infinity,
fill: 'forwards' });
anim.finish();
assert_equals(anim.effect.getComputedTiming().currentIteration, Infinity);
assert_equals(anim.effect.getComputedTiming().progress, 1);
}, 'Active time in after phase with forwards fill, zero-duration, and '
+ ' infinite iteration count is the active duration');
test(t => {
const anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500,
endDelay: 4000,
fill: 'forwards' });
anim.finish();
assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.3);
}, 'Active time in after phase with forwards fill and positive end delay'
+ ' is the active duration');
test(t => {
const anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500,
endDelay: -800,
fill: 'forwards' });
anim.finish();
assert_equals(anim.effect.getComputedTiming().currentIteration, 1);
assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.5);
}, 'Active time in after phase with forwards fill and negative end delay'
+ ' is the active duration + end delay');
test(t => {
const anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500,
endDelay: -2500,
fill: 'forwards' });
anim.finish();
assert_equals(anim.effect.getComputedTiming().currentIteration, 0);
assert_equals(anim.effect.getComputedTiming().progress, 0);
}, 'Active time in after phase with forwards fill and negative end delay'
+ ' greater in magnitude than the active duration is zero');
test(t => {
const anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500,
endDelay: -4000,
fill: 'forwards' });
anim.finish();
assert_equals(anim.effect.getComputedTiming().currentIteration, 0);
assert_equals(anim.effect.getComputedTiming().progress, 0);
}, 'Active time in after phase with forwards fill and negative end delay'
+ ' greater in magnitude than the sum of the active duration and start delay'
+ ' is zero');
test(t => {
const anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500,
fill: 'both' });
anim.finish();
assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.3);
}, 'Active time in after phase with \'both\' fill is the active duration');
test(t => {
// Create an effect with a non-zero duration so we ensure we're not just
// testing the after-phase behavior.
const effect = new KeyframeEffect(null, null, 1);
assert_equals(effect.getComputedTiming().progress, null);
}, 'Active time when the local time is unresolved, is unresolved');
</script>
</body>