<!DOCTYPE html>
<meta charset=utf-8>
<title>AnimationEffect.getComputedTiming</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animationeffect-getcomputedtiming">
<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 effect = new KeyframeEffect(null, null);
const ct = effect.getComputedTiming();
assert_equals(ct.delay, 0, 'computed delay');
assert_equals(ct.endDelay, 0, 'computed endDelay');
assert_equals(ct.fill, 'none', 'computed fill');
assert_equals(ct.iterationStart, 0.0, 'computed iterationStart');
assert_equals(ct.iterations, 1.0, 'computed iterations');
assert_equals(ct.duration, 0, 'computed duration');
assert_equals(ct.direction, 'normal', 'computed direction');
assert_equals(ct.easing, 'linear', 'computed easing');
}, 'values of getComputedTiming() when a KeyframeEffect is ' +
'constructed without any KeyframeEffectOptions object');
const gGetComputedTimingTests = [
{ desc: 'an empty KeyframeEffectOptions object',
input: { },
expected: { } },
{ desc: 'a normal KeyframeEffectOptions object',
input: { delay: 1000,
endDelay: 2000,
fill: 'auto',
iterationStart: 0.5,
iterations: 5.5,
duration: 'auto',
direction: 'alternate',
easing: 'steps(2)' },
expected: { delay: 1000,
endDelay: 2000,
fill: 'none',
iterationStart: 0.5,
iterations: 5.5,
duration: 0,
direction: 'alternate',
easing: 'steps(2)' } },
{ desc: 'a double value',
input: 3000,
timing: { duration: 3000 },
expected: { delay: 0,
fill: 'none',
iterations: 1,
duration: 3000,
direction: 'normal' } },
{ desc: '+Infinity',
input: Infinity,
expected: { duration: Infinity } },
{ desc: 'an Infinity duration',
input: { duration: Infinity },
expected: { duration: Infinity } },
{ desc: 'an auto duration',
input: { duration: 'auto' },
expected: { duration: 0 } },
{ desc: 'an Infinity iterations',
input: { iterations: Infinity },
expected: { iterations: Infinity } },
{ desc: 'an auto fill',
input: { fill: 'auto' },
expected: { fill: 'none' } },
{ desc: 'a forwards fill',
input: { fill: 'forwards' },
expected: { fill: 'forwards' } }
];
for (const stest of gGetComputedTimingTests) {
test(t => {
const effect = new KeyframeEffect(null, null, stest.input);
// Helper function to provide default expected values when the test does
// not supply them.
const expected = (field, defaultValue) => {
return field in stest.expected ? stest.expected[field] : defaultValue;
};
const ct = effect.getComputedTiming();
assert_equals(ct.delay, expected('delay', 0),
'computed delay');
assert_equals(ct.endDelay, expected('endDelay', 0),
'computed endDelay');
assert_equals(ct.fill, expected('fill', 'none'),
'computed fill');
assert_equals(ct.iterationStart, expected('iterationStart', 0),
'computed iterations');
assert_equals(ct.iterations, expected('iterations', 1),
'computed iterations');
assert_equals(ct.duration, expected('duration', 0),
'computed duration');
assert_equals(ct.direction, expected('direction', 'normal'),
'computed direction');
assert_equals(ct.easing, expected('easing', 'linear'),
'computed easing');
}, 'values of getComputedTiming() when a KeyframeEffect is'
+ ` constructed by ${stest.desc}`);
}
const gActiveDurationTests = [
{ desc: 'an empty KeyframeEffectOptions object',
input: { },
expected: 0 },
{ desc: 'a non-zero duration and default iteration count',
input: { duration: 1000 },
expected: 1000 },
{ desc: 'a non-zero duration and integral iteration count',
input: { duration: 1000, iterations: 7 },
expected: 7000 },
{ desc: 'a non-zero duration and fractional iteration count',
input: { duration: 1000, iterations: 2.5 },
expected: 2500 },
{ desc: 'an non-zero duration and infinite iteration count',
input: { duration: 1000, iterations: Infinity },
expected: Infinity },
{ desc: 'an non-zero duration and zero iteration count',
input: { duration: 1000, iterations: 0 },
expected: 0 },
{ desc: 'a zero duration and default iteration count',
input: { duration: 0 },
expected: 0 },
{ desc: 'a zero duration and fractional iteration count',
input: { duration: 0, iterations: 2.5 },
expected: 0 },
{ desc: 'a zero duration and infinite iteration count',
input: { duration: 0, iterations: Infinity },
expected: 0 },
{ desc: 'a zero duration and zero iteration count',
input: { duration: 0, iterations: 0 },
expected: 0 },
{ desc: 'an infinite duration and default iteration count',
input: { duration: Infinity },
expected: Infinity },
{ desc: 'an infinite duration and zero iteration count',
input: { duration: Infinity, iterations: 0 },
expected: 0 },
{ desc: 'an infinite duration and fractional iteration count',
input: { duration: Infinity, iterations: 2.5 },
expected: Infinity },
{ desc: 'an infinite duration and infinite iteration count',
input: { duration: Infinity, iterations: Infinity },
expected: Infinity },
];
for (const stest of gActiveDurationTests) {
test(t => {
const effect = new KeyframeEffect(null, null, stest.input);
assert_equals(effect.getComputedTiming().activeDuration,
stest.expected);
}, `getComputedTiming().activeDuration for ${stest.desc}`);
}
const gEndTimeTests = [
{ desc: 'an empty KeyframeEffectOptions object',
input: { },
expected: 0 },
{ desc: 'a non-zero duration and default iteration count',
input: { duration: 1000 },
expected: 1000 },
{ desc: 'a non-zero duration and non-default iteration count',
input: { duration: 1000, iterations: 2.5 },
expected: 2500 },
{ desc: 'a non-zero duration and non-zero delay',
input: { duration: 1000, delay: 1500 },
expected: 2500 },
{ desc: 'a non-zero duration, non-zero delay and non-default iteration',
input: { duration: 1000, delay: 1500, iterations: 2 },
expected: 3500 },
{ desc: 'an infinite iteration count',
input: { duration: 1000, iterations: Infinity },
expected: Infinity },
{ desc: 'an infinite duration',
input: { duration: Infinity, iterations: 10 },
expected: Infinity },
{ desc: 'an infinite duration and delay',
input: { duration: Infinity, iterations: 10, delay: 1000 },
expected: Infinity },
{ desc: 'an infinite duration and negative delay',
input: { duration: Infinity, iterations: 10, delay: -1000 },
expected: Infinity },
{ desc: 'an non-zero duration and negative delay',
input: { duration: 1000, iterations: 2, delay: -1000 },
expected: 1000 },
{ desc: 'an non-zero duration and negative delay greater than active ' +
'duration',
input: { duration: 1000, iterations: 2, delay: -3000 },
expected: 0 },
{ desc: 'a zero duration and negative delay',
input: { duration: 0, iterations: 2, delay: -1000 },
expected: 0 }
];
for (const stest of gEndTimeTests) {
test(t => {
const effect = new KeyframeEffect(null, null, stest.input);
assert_equals(effect.getComputedTiming().endTime,
stest.expected);
}, `getComputedTiming().endTime for ${stest.desc}`);
}
</script>
</body>
Codebase Browser
chromium