<!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>