Chromium Code Reviews| Index: third_party/WebKit/LayoutTests/web-animations-api/animation-onfinish.html |
| diff --git a/third_party/WebKit/LayoutTests/web-animations-api/animation-onfinish.html b/third_party/WebKit/LayoutTests/web-animations-api/animation-onfinish.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..ccc6c3af25f2efbfcc53b624a736020207df8284 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/web-animations-api/animation-onfinish.html |
| @@ -0,0 +1,109 @@ |
| +<!DOCTYPE html> |
| +<meta charset=utf-8> |
| +<title>Tests for the finish event</title> |
| +<link rel="help" href="https://w3c.github.io/web-animations/#the-animation-interface"> |
|
alancutter (OOO until 2018)
2016/07/12 05:25:15
This is too non-specific, how about https://w3c.gi
sashab
2016/07/12 05:45:00
Done
sashab
2016/07/12 05:45:00
Done
|
| +<script src="../resources/testharness.js"></script> |
| +<script src="../resources/testharnessreport.js"></script> |
| +<script src="../imported/wpt/web-animations/testcommon.js"></script> |
| +<body> |
| +<script> |
| +'use strict'; |
| +var keyframes = [ |
| + {left: '10px', opacity: '1', offset: 0}, |
| + {left: '100px', opacity: '0', offset: 1} |
| +]; |
|
alancutter (OOO until 2018)
2016/07/12 05:25:15
No need for actual keyframes, you can just use nul
sashab
2016/07/12 05:45:00
Done :)
|
| + |
| +function validateFinishEvent(t, event, animation) { |
| + t.step(function() { |
| + assert_equals(event.target, animation, 'Animation should be target'); |
| + assert_equals(event.currentTime, animation.currentTime, 'Event currentTime should be animation currentTime'); |
| + assert_equals(event.timelineTime, document.timeline.currentTime, 'Event timelineTime should be document timeline currentTime'); |
| + }); |
| +} |
| + |
| +async_test(function(t) { |
| + var div = createDiv(t); |
| + var animation = div.animate(keyframes, 70.0); |
| + animation.onfinish = function(event) { |
|
alancutter (OOO until 2018)
2016/07/12 05:25:15
The WPTs prefer using the finished promise.
|
| + t.unreached_func("Seeking to finish should not queue onfinish event"); |
| + }; |
| + animation.finish(); |
| + animation.currentTime = 0; |
| + animation.pause(); |
| + t.done(); |
| +}, "animation.onfinish() doesn't runs when the animation seeks to finish"); |
| + |
| +async_test(function(t) { |
| + var div = createDiv(t); |
| + var animation = div.animate(keyframes, 70.0); |
| + animation.onfinish = function (event) { |
| + t.unreached_func("Seeking past finish should not queue onfinish event"); |
| + }; |
| + animation.currentTime = 80.0; |
| + animation.currentTime = 0; |
| + animation.pause(); |
| + t.done(); |
| +}, "animation.onfinish() doesn't runs when the animation seeks past finish"); |
|
alancutter (OOO until 2018)
2016/07/12 05:25:15
s/doesn't runs/doesn't run/
sashab
2016/07/12 05:45:00
Done
|
| + |
| +async_test(function(t) { |
| + var div = createDiv(t); |
| + var animation = div.animate(keyframes, 90.0); |
| + animation.onfinish = function(event) { |
| + validateFinishEvent(t, event, animation); |
| + t.done(); |
| + }; |
| + animation.finish(); |
| +}, "animation.onfinish() runs when the animation completes with .finish()"); |
| + |
| +async_test(function(t) { |
| + var div = createDiv(t); |
| + var animation = div.animate(keyframes, 100); |
| + animation.onfinish = function(event) { |
| + validateFinishEvent(t, event, animation); |
| + t.done(); |
| + }; |
| +}, "animation.onfinish() runs when the animation completes"); |
| + |
| +async_test(function(t) { |
| + var animation1 = createDiv(t).animate(keyframes, 0.05); |
| + var firstRun1 = true; |
| + animation1.onfinish = function(event) { |
| + validateFinishEvent(t, event, animation1); |
| + t.done(); |
| + |
| + if (firstRun1) { |
| + firstRun1 = false; |
| + animation1.currentTime = 0; |
| + return; |
| + } |
| + |
| + var animation2 = createDiv(t).animate(keyframes, 0.05); |
| + var firstRun2 = true; |
| + animation2.onfinish = function(event) { |
| + validateFinishEvent(t, event, animation2); |
| + t.done(); |
| + |
| + if (firstRun2) { |
| + firstRun2 = false; |
| + animation2.play(); |
| + return; |
| + } |
| + |
| + var animation3 = createDiv(t).animate(keyframes, 0.05); |
|
alancutter (OOO until 2018)
2016/07/12 05:25:15
Two levels of chaining should be sufficient.
sashab
2016/07/12 05:45:00
Done
|
| + var firstRun3 = true; |
| + animation3.onfinish = function(event) { |
| + validateFinishEvent(t, event, animation3); |
| + t.done(); |
| + |
| + if (firstRun3) { |
| + firstRun3 = false; |
| + animation3.reverse(); |
| + return; |
| + } |
| + |
| + t.done(); |
|
alancutter (OOO until 2018)
2016/07/12 05:25:15
It doesn't seem correct to call t.done() multiple
sashab
2016/07/12 05:44:59
Done
|
| + } |
| + } |
| + } |
| +}, "animation.onfinish() calls can be chained"); |
| +</script> |