diff options
Diffstat (limited to 'dom/animation/test/css-transitions/file_animation-finished.html')
-rw-r--r-- | dom/animation/test/css-transitions/file_animation-finished.html | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/dom/animation/test/css-transitions/file_animation-finished.html b/dom/animation/test/css-transitions/file_animation-finished.html new file mode 100644 index 000000000..2f6bcf47d --- /dev/null +++ b/dom/animation/test/css-transitions/file_animation-finished.html @@ -0,0 +1,61 @@ +<!doctype html> +<meta charset=utf-8> +<script src="../testcommon.js"></script> +<style> + +.animated-div { + margin-left: 100px; + transition: margin-left 1000s linear 1000s; +} + +</style> +<body> +<script> + +'use strict'; + +const ANIM_DELAY_MS = 1000000; // 1000s +const ANIM_DUR_MS = 1000000; // 1000s + +async_test(function(t) { + var div = addDiv(t, {'class': 'animated-div'}); + flushComputedStyle(div); + div.style.marginLeft = '200px'; // initiate transition + + var animation = div.getAnimations()[0]; + + animation.finish(); + + animation.finished.then(t.step_func(function() { + animation.play(); + assert_equals(animation.currentTime, 0, + 'Replaying a finished transition should reset its ' + + 'currentTime'); + t.done(); + })); +}, 'Test restarting a finished transition'); + +async_test(function(t) { + var div = addDiv(t, {'class': 'animated-div'}); + flushComputedStyle(div); + div.style.marginLeft = '200px'; // initiate transition + + var animation = div.getAnimations()[0]; + + animation.ready.then(function() { + animation.playbackRate = -1; + return animation.finished; + }).then(t.step_func(function() { + animation.play(); + // FIXME: once animation.effect.computedTiming.endTime is available (bug + // 1108055) we should use that here. + assert_equals(animation.currentTime, ANIM_DELAY_MS + ANIM_DUR_MS, + 'Replaying a finished reversed transition should reset ' + + 'its currentTime to the end of the effect'); + t.done(); + })); +}, 'Test restarting a reversed finished transition'); + +done(); +</script> +</body> |