Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-24 09:04:33 +01:00
Code Issues Projects Releases Packages Wiki Activity
servo/tests/wpt/web-platform-tests/web-animations/timing-model/animation-effects/simple-iteration-progress.html

575 lines
12 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<meta charset=utf-8>
<title>Simple iteration progress tests</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#simple-iteration-progress">
<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';
function runTests(tests, description) {
tests.forEach(function(currentTest) {
var testParams = '';
for (var attr in currentTest.input) {
testParams += ' ' + attr + ':' + currentTest.input[attr];
}
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, currentTest.input);
assert_equals(anim.effect.getComputedTiming().progress,
currentTest.before);
anim.currentTime = currentTest.input.delay || 0;
assert_equals(anim.effect.getComputedTiming().progress,
currentTest.active);
if (typeof currentTest.after !== 'undefined') {
anim.finish();
assert_equals(anim.effect.getComputedTiming().progress,
currentTest.after);
}
}, description + ':' + testParams);
});
}
// --------------------------------------------------------------------
//
// Zero iteration duration tests
//
// --------------------------------------------------------------------
runTests([
{
input: { iterations: 0,
iterationStart: 0,
duration: 0,
delay: 1,
fill: 'both' },
before: 0,
active: 0,
after: 0
},
{
input: { iterations: 0,
iterationStart: 0,
duration: 100,
delay: 1,
fill: 'both' },
before: 0,
active: 0,
after: 0
},
{
input: { iterations: 0,
iterationStart: 0,
duration: Infinity,
delay: 1,
fill: 'both' },
before: 0,
active: 0,
after: 0
},
{
input: { iterations: 0,
iterationStart: 2.5,
duration: 0,
delay: 1,
fill: 'both' },
before: 0.5,
active: 0.5,
after: 0.5
},
{
input: { iterations: 0,
iterationStart: 2.5,
duration: 100,
delay: 1,
fill: 'both' },
before: 0.5,
active: 0.5,
after: 0.5
},
{
input: { iterations: 0,
iterationStart: 2.5,
duration: Infinity,
delay: 1,
fill: 'both' },
before: 0.5,
active: 0.5,
after: 0.5
},
{
input: { iterations: 0,
iterationStart: 3,
duration: 0,
delay: 1,
fill: 'both' },
before: 0,
active: 0,
after: 0
},
{
input: { iterations: 0,
iterationStart: 3,
duration: 100,
delay: 1,
fill: 'both' },
before: 0,
active: 0,
after: 0
},
{
input: { iterations: 0,
iterationStart: 3,
duration: Infinity,
delay: 1,
fill: 'both' },
before: 0,
active: 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,
active: 1,
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,
active: 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,
active: 1,
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,
active: 0.5,
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,
active: 1,
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,
active: 0.5,
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,
active: 1,
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,
active: 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,
active: 1,
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: 1
},
{
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: 1
},
{
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');
</script>
</body>
Reference in a new issue View git blame Copy permalink