Mypal/dom/animation/test/css-animations/file_animation-finish.html

98 lines
3.1 KiB
HTML

<!doctype html>
<meta charset=utf-8>
<script src="../testcommon.js"></script>
<style>
@keyframes anim {
from { margin-left: 100px; }
to { margin-left: 200px; }
}
</style>
<body>
<script>
'use strict';
const ANIM_PROP_VAL = 'anim 100s';
const ANIM_DURATION = 100000; // ms
test(function(t) {
var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL;
div.style.animationIterationCount = 'infinite';
var animation = div.getAnimations()[0];
var threw = false;
try {
animation.finish();
} catch (e) {
threw = true;
assert_equals(e.name, 'InvalidStateError',
'Exception should be an InvalidStateError exception when ' +
'trying to finish an infinite animation');
}
assert_true(threw,
'Expect InvalidStateError exception trying to finish an ' +
'infinite animation');
}, 'Test exceptions when finishing infinite animation');
async_test(function(t) {
var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL + ' paused';
var animation = div.getAnimations()[0];
animation.ready.then(t.step_func(function() {
animation.finish();
assert_equals(animation.playState, 'finished',
'The play state of a paused animation should become ' +
'"finished" after finish() is called');
assert_approx_equals(animation.startTime,
animation.timeline.currentTime - ANIM_DURATION,
0.0001,
'The start time of a paused animation should be set ' +
'after calling finish()');
t.done();
}));
}, 'Test finish() while paused');
test(function(t) {
var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL + ' paused';
var animation = div.getAnimations()[0];
// Update playbackRate so we can test that the calculated startTime
// respects it
animation.playbackRate = 2;
// While animation is still pause-pending call finish()
animation.finish();
assert_equals(animation.playState, 'finished',
'The play state of a pause-pending animation should become ' +
'"finished" after finish() is called');
assert_approx_equals(animation.startTime,
animation.timeline.currentTime - ANIM_DURATION / 2,
0.0001,
'The start time of a pause-pending animation should ' +
'be set after calling finish()');
}, 'Test finish() while pause-pending with positive playbackRate');
test(function(t) {
var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL + ' paused';
var animation = div.getAnimations()[0];
animation.playbackRate = -2;
animation.finish();
assert_equals(animation.playState, 'finished',
'The play state of a pause-pending animation should become ' +
'"finished" after finish() is called');
assert_equals(animation.startTime, animation.timeline.currentTime,
'The start time of a pause-pending animation should be ' +
'set after calling finish()');
}, 'Test finish() while pause-pending with negative playbackRate');
done();
</script>
</body>