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/simple-iteration-progress.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset=utf-8>
<title>Simple iteration progress</title>
<link rel="help"
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<script src="../../resources/effect-tests.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
function runTests(tests, description) {
for (const currentTest of tests) {
let testParams = Object.entries(currentTest.input)
.map(([attr, value]) => `${attr}:${value}`)
.join(' ');
if (currentTest.playbackRate !== undefined) {
testParams += ` playbackRate:${currentTest.playbackRate}`;
}
test(t => {
const div = createDiv(t);
const anim = div.animate({}, currentTest.input);
if (currentTest.playbackRate !== undefined) {
anim.playbackRate = currentTest.playbackRate;
}
assert_computed_timing_for_each_phase(
anim,
'progress',
{ before: currentTest.before,
activeBoundary: currentTest.active,
after: currentTest.after },
);
}, `${description}: ${testParams}`);
}
}
// --------------------------------------------------------------------
//
// Zero iteration duration tests
//
// --------------------------------------------------------------------
runTests([
{
input: { iterations: 0,
iterationStart: 0,
duration: 0,
delay: 1,
fill: 'both' },
before: 0,
after: 0
},
{
input: { iterations: 0,
iterationStart: 0,
duration: 100,
delay: 1,
fill: 'both' },
before: 0,
after: 0
},
{
input: { iterations: 0,
iterationStart: 0,
duration: Infinity,
delay: 1,
fill: 'both' },
before: 0,
after: 0
},
{
input: { iterations: 0,
iterationStart: 2.5,
duration: 0,
delay: 1,
fill: 'both' },
before: 0.5,
after: 0.5
},
{
input: { iterations: 0,
iterationStart: 2.5,
duration: 100,
delay: 1,
fill: 'both' },
before: 0.5,
after: 0.5
},
{
input: { iterations: 0,
iterationStart: 2.5,
duration: Infinity,
delay: 1,
fill: 'both' },
before: 0.5,
after: 0.5
},
{
input: { iterations: 0,
iterationStart: 3,
duration: 0,
delay: 1,
fill: 'both' },
before: 0,
after: 0
},
{
input: { iterations: 0,
iterationStart: 3,
duration: 100,
delay: 1,
fill: 'both' },
before: 0,
after: 0
},
{
input: { iterations: 0,
iterationStart: 3,
duration: Infinity,
delay: 1,
fill: 'both' },
before: 0,
after: 0
}
], 'Test zero iterations');
// --------------------------------------------------------------------
//
// Tests where the iteration count is an integer
//
// --------------------------------------------------------------------
runTests([
{
input: { iterations: 3,
iterationStart: 0,
duration: 0,
delay: 1,
fill: 'both' },
before: 0,
after: 1
},
{
input: { iterations: 3,
iterationStart: 0,
duration: 100,
delay: 1,
fill: 'both' },
before: 0,
active: 0,
after: 1
},
{
input: { iterations: 3,
iterationStart: 0,
duration: Infinity,
delay: 1,
fill: 'both' },
before: 0,
active: 0
},
{
input: { iterations: 3,
iterationStart: 2.5,
duration: 0,
delay: 1,
fill: 'both' },
before: 0.5,
after: 0.5
},
{
input: { iterations: 3,
iterationStart: 2.5,
duration: 100,
delay: 1,
fill: 'both' },
before: 0.5,
active: 0.5,
after: 0.5
},
{
input: { iterations: 3,
iterationStart: 2.5,
duration: Infinity,
delay: 1,
fill: 'both' },
before: 0.5,
active: 0.5
},
{
input: { iterations: 3,
iterationStart: 3,
duration: 0,
delay: 1,
fill: 'both' },
before: 0,
after: 1
},
{
input: { iterations: 3,
iterationStart: 3,
duration: 100,
delay: 1,
fill: 'both' },
before: 0,
active: 0,
after: 1
},
{
input: { iterations: 3,
iterationStart: 3,
duration: Infinity,
delay: 1,
fill: 'both' },
before: 0,
active: 0
}
], 'Test integer iterations');
// --------------------------------------------------------------------
//
// Tests where the iteration count is a fraction
//
// --------------------------------------------------------------------
runTests([
{
input: { iterations: 3.5,
iterationStart: 0,
duration: 0,
delay: 1,
fill: 'both' },
before: 0,
after: 0.5
},
{
input: { iterations: 3.5,
iterationStart: 0,
duration: 100,
delay: 1,
fill: 'both' },
before: 0,
active: 0,
after: 0.5
},
{
input: { iterations: 3.5,
iterationStart: 0,
duration: Infinity,
delay: 1,
fill: 'both' },
before: 0,
active: 0
},
{
input: { iterations: 3.5,
iterationStart: 2.5,
duration: 0,
delay: 1,
fill: 'both' },
before: 0.5,
after: 1
},
{
input: { iterations: 3.5,
iterationStart: 2.5,
duration: 100,
delay: 1,
fill: 'both' },
before: 0.5,
active: 0.5,
after: 1
},
{
input: { iterations: 3.5,
iterationStart: 2.5,
duration: Infinity,
delay: 1,
fill: 'both' },
before: 0.5,
active: 0.5
},
{
input: { iterations: 3.5,
iterationStart: 3,
duration: 0,
delay: 1,
fill: 'both' },
before: 0,
after: 0.5
},
{
input: { iterations: 3.5,
iterationStart: 3,
duration: 100,
delay: 1,
fill: 'both' },
before: 0,
active: 0,
after: 0.5
},
{
input: { iterations: 3.5,
iterationStart: 3,
duration: Infinity,
delay: 1,
fill: 'both' },
before: 0,
active: 0
}
], 'Test fractional iterations');
// --------------------------------------------------------------------
//
// Tests where the iteration count is Infinity
//
// --------------------------------------------------------------------
runTests([
{
input: { iterations: Infinity,
iterationStart: 0,
duration: 0,
delay: 1,
fill: 'both' },
before: 0,
after: 1
},
{
input: { iterations: Infinity,
iterationStart: 0,
duration: 100,
delay: 1,
fill: 'both' },
before: 0,
active: 0
},
{
input: { iterations: Infinity,
iterationStart: 0,
duration: Infinity,
delay: 1,
fill: 'both' },
before: 0,
active: 0
},
{
input: { iterations: Infinity,
iterationStart: 2.5,
duration: 0,
delay: 1,
fill: 'both' },
before: 0.5,
after: 0.5
},
{
input: { iterations: Infinity,
iterationStart: 2.5,
duration: 100,
delay: 1,
fill: 'both' },
before: 0.5,
active: 0.5
},
{
input: { iterations: Infinity,
iterationStart: 2.5,
duration: Infinity,
delay: 1,
fill: 'both' },
before: 0.5,
active: 0.5
},
{
input: { iterations: Infinity,
iterationStart: 3,
duration: 0,
delay: 1,
fill: 'both' },
before: 0,
after: 1
},
{
input: { iterations: Infinity,
iterationStart: 3,
duration: 100,
delay: 1,
fill: 'both' },
before: 0,
active: 0
},
{
input: { iterations: Infinity,
iterationStart: 3,
duration: Infinity,
delay: 1,
fill: 'both' },
before: 0,
active: 0
}
], 'Test infinity iterations');
// --------------------------------------------------------------------
//
// End delay tests
//
// --------------------------------------------------------------------
runTests([
{
input: { duration: 100,
delay: 1,
fill: 'both',
endDelay: 50 },
before: 0,
active: 0,
after: 1
},
{
input: { duration: 100,
delay: 1,
fill: 'both',
endDelay: -50 },
before: 0,
active: 0,
after: 0.5
},
{
input: { duration: 100,
delay: 1,
fill: 'both',
endDelay: -100 },
before: 0,
active: 0,
after: 0
},
{
input: { duration: 100,
delay: 1,
fill: 'both',
endDelay: -200 },
before: 0,
active: 0,
after: 0
},
{
input: { iterationStart: 0.5,
duration: 100,
delay: 1,
fill: 'both',
endDelay: 50 },
before: 0.5,
active: 0.5,
after: 0.5
},
{
input: { iterationStart: 0.5,
duration: 100,
delay: 1,
fill: 'both',
endDelay: -50 },
before: 0.5,
active: 0.5,
after: 0
},
{
input: { iterationStart: 0.5,
duration: 100,
delay: 1,
fill: 'both',
endDelay: -100 },
before: 0.5,
active: 0.5,
after: 0.5
},
{
input: { iterations: 2,
duration: 100,
delay: 1,
fill: 'both',
endDelay: -100 },
before: 0,
active: 0,
after: 0
},
{
input: { iterations: 1,
iterationStart: 2,
duration: 100,
delay: 1,
fill: 'both',
endDelay: -50 },
before: 0,
active: 0,
after: 0.5
},
{
input: { iterations: 1,
iterationStart: 2,
duration: 100,
delay: 1,
fill: 'both',
endDelay: -100 },
before: 0,
active: 0,
after: 0
},
], 'Test end delay');
// --------------------------------------------------------------------
//
// Negative playback rate tests
//
// --------------------------------------------------------------------
runTests([
{
input: { duration: 1,
delay: 1,
fill: 'both' },
playbackRate: -1,
before: 0,
active: 1,
after: 1
},
{
input: { duration: 0,
delay: 1,
fill: 'both' },
playbackRate: -1,
before: 0,
after: 1
},
{
input: { duration: 0,
iterations: 0,
delay: 1,
fill: 'both' },
playbackRate: -1,
before: 0,
after: 0
},
], 'Test negative playback rate');
</script>
</body>