Index: third_party/WebKit/LayoutTests/imported/wpt/web-animations/timing-model/animations/set-the-timeline-of-an-animation.html |
diff --git a/third_party/WebKit/LayoutTests/imported/wpt/web-animations/timing-model/animations/set-the-timeline-of-an-animation.html b/third_party/WebKit/LayoutTests/imported/wpt/web-animations/timing-model/animations/set-the-timeline-of-an-animation.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..c540fe2ca71812e305b575378afca7f72ce502e0 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/imported/wpt/web-animations/timing-model/animations/set-the-timeline-of-an-animation.html |
@@ -0,0 +1,276 @@ |
+<!DOCTYPE html> |
+<meta charset=utf-8> |
+<title>Setting the timeline tests</title> |
+<link rel="help" href="https://w3c.github.io/web-animations/#setting-the-timeline"> |
+<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'; |
+ |
+// --------------------------------------------------------------------- |
+// |
+// Tests from no timeline to timeline |
+// |
+// --------------------------------------------------------------------- |
+ |
+test(function(t) { |
+ var animation = |
+ new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
+ null); |
+ animation.currentTime = 50 * MS_PER_SEC; |
+ assert_equals(animation.playState, 'paused'); |
+ |
+ animation.timeline = document.timeline; |
+ |
+ assert_equals(animation.playState, 'paused'); |
+ assert_times_equal(animation.currentTime, 50 * MS_PER_SEC); |
+}, 'After setting timeline on paused animation it is still paused'); |
+ |
+test(function(t) { |
+ var animation = |
+ new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
+ null); |
+ animation.currentTime = 200 * MS_PER_SEC; |
+ assert_equals(animation.playState, 'paused'); |
+ |
+ animation.timeline = document.timeline; |
+ |
+ assert_equals(animation.playState, 'paused'); |
+ assert_times_equal(animation.currentTime, 200 * MS_PER_SEC); |
+}, 'After setting timeline on animation paused outside active interval' |
+ + ' it is still paused'); |
+ |
+test(function(t) { |
+ var animation = |
+ new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
+ null); |
+ assert_equals(animation.playState, 'idle'); |
+ |
+ animation.timeline = document.timeline; |
+ |
+ assert_equals(animation.playState, 'idle'); |
+}, 'After setting timeline on an idle animation without a start time' |
+ + ' it is still idle'); |
+ |
+test(function(t) { |
+ var animation = |
+ new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
+ null); |
+ animation.startTime = document.timeline.currentTime; |
+ assert_equals(animation.playState, 'idle'); |
+ |
+ animation.timeline = document.timeline; |
+ |
+ assert_equals(animation.playState, 'running'); |
+}, 'After setting timeline on an idle animation with a start time' |
+ + ' it is running'); |
+ |
+test(function(t) { |
+ var animation = |
+ new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
+ null); |
+ animation.startTime = document.timeline.currentTime - 200 * MS_PER_SEC; |
+ assert_equals(animation.playState, 'idle'); |
+ |
+ animation.timeline = document.timeline; |
+ |
+ assert_equals(animation.playState, 'finished'); |
+}, 'After setting timeline on an idle animation with a sufficiently ancient' |
+ + ' start time it is finished'); |
+ |
+test(function(t) { |
+ var animation = |
+ new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
+ null); |
+ animation.play(); |
+ assert_equals(animation.playState, 'pending'); |
+ |
+ animation.timeline = document.timeline; |
+ |
+ assert_equals(animation.playState, 'pending'); |
+}, 'After setting timeline on a play-pending animation it is still pending'); |
+ |
+promise_test(function(t) { |
+ var animation = |
+ new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
+ null); |
+ animation.play(); |
+ assert_equals(animation.playState, 'pending'); |
+ |
+ animation.timeline = document.timeline; |
+ |
+ return animation.ready.then(function() { |
+ assert_equals(animation.playState, 'running'); |
+ }); |
+}, 'After setting timeline on a play-pending animation it begins playing' |
+ + ' after pending'); |
+ |
+test(function(t) { |
+ var animation = |
+ new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
+ null); |
+ animation.startTime = document.timeline.currentTime; |
+ animation.pause(); |
+ animation.timeline = null; |
+ assert_equals(animation.playState, 'pending'); |
+ |
+ animation.timeline = document.timeline; |
+ |
+ assert_equals(animation.playState, 'pending'); |
+}, 'After setting timeline on a pause-pending animation it is still pending'); |
+ |
+promise_test(function(t) { |
+ var animation = |
+ new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
+ null); |
+ animation.startTime = document.timeline.currentTime; |
+ animation.pause(); |
+ animation.timeline = null; |
+ assert_equals(animation.playState, 'pending'); |
+ |
+ animation.timeline = document.timeline; |
+ |
+ return animation.ready.then(function() { |
+ assert_equals(animation.playState, 'paused'); |
+ }); |
+}, 'After setting timeline on a pause-pending animation it becomes paused' |
+ + ' after pending'); |
+ |
+// --------------------------------------------------------------------- |
+// |
+// Tests from timeline to no timeline |
+// |
+// --------------------------------------------------------------------- |
+ |
+test(function(t) { |
+ var animation = |
+ new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
+ document.timeline); |
+ animation.currentTime = 50 * MS_PER_SEC; |
+ assert_equals(animation.playState, 'paused'); |
+ |
+ animation.timeline = null; |
+ |
+ assert_equals(animation.playState, 'paused'); |
+ assert_times_equal(animation.currentTime, 50 * MS_PER_SEC); |
+}, 'After clearing timeline on paused animation it is still paused'); |
+ |
+test(function(t) { |
+ var animation = |
+ new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
+ document.timeline); |
+ var initialStartTime = document.timeline.currentTime - 200 * MS_PER_SEC; |
+ animation.startTime = initialStartTime; |
+ assert_equals(animation.playState, 'finished'); |
+ |
+ animation.timeline = null; |
+ |
+ assert_equals(animation.playState, 'idle'); |
+ assert_times_equal(animation.startTime, initialStartTime); |
+}, 'After clearing timeline on finished animation it is idle'); |
+ |
+test(function(t) { |
+ var animation = |
+ new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
+ document.timeline); |
+ var initialStartTime = document.timeline.currentTime - 50 * MS_PER_SEC; |
+ animation.startTime = initialStartTime; |
+ assert_equals(animation.playState, 'running'); |
+ |
+ animation.timeline = null; |
+ |
+ assert_equals(animation.playState, 'idle'); |
+ assert_times_equal(animation.startTime, initialStartTime); |
+}, 'After clearing timeline on running animation it is idle'); |
+ |
+test(function(t) { |
+ var animation = |
+ new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
+ document.timeline); |
+ assert_equals(animation.playState, 'idle'); |
+ |
+ animation.timeline = null; |
+ |
+ assert_equals(animation.playState, 'idle'); |
+ assert_equals(animation.startTime, null); |
+}, 'After clearing timeline on idle animation it is still idle'); |
+ |
+test(function(t) { |
+ var animation = createDiv(t).animate(null, 100 * MS_PER_SEC); |
+ assert_equals(animation.playState, 'pending'); |
+ |
+ animation.timeline = null; |
+ |
+ assert_equals(animation.playState, 'pending'); |
+}, 'After clearing timeline on play-pending animation it is still pending'); |
+ |
+promise_test(function(t) { |
+ var animation = createDiv(t).animate(null, 100 * MS_PER_SEC); |
+ assert_equals(animation.playState, 'pending'); |
+ |
+ animation.timeline = null; |
+ animation.timeline = document.timeline; |
+ |
+ assert_equals(animation.playState, 'pending'); |
+ return animation.ready.then(function() { |
+ assert_equals(animation.playState, 'running'); |
+ }); |
+}, 'After clearing and re-setting timeline on play-pending animation it' |
+ + ' begins to play'); |
+ |
+test(function(t) { |
+ var animation = |
+ new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
+ document.timeline); |
+ animation.startTime = document.timeline.currentTime; |
+ animation.pause(); |
+ assert_equals(animation.playState, 'pending'); |
+ |
+ animation.timeline = null; |
+ |
+ assert_equals(animation.playState, 'pending'); |
+}, 'After clearing timeline on a pause-pending animation it is still pending'); |
+ |
+promise_test(function(t) { |
+ var animation = |
+ new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
+ document.timeline); |
+ animation.startTime = document.timeline.currentTime; |
+ animation.pause(); |
+ assert_equals(animation.playState, 'pending'); |
+ |
+ animation.timeline = null; |
+ animation.timeline = document.timeline; |
+ |
+ assert_equals(animation.playState, 'pending'); |
+ return animation.ready.then(function() { |
+ assert_equals(animation.playState, 'paused'); |
+ }); |
+}, 'After clearing and re-setting timeline on a pause-pending animation it' |
+ + ' becomes paused'); |
+ |
+promise_test(function(t) { |
+ var animation = |
+ new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
+ document.timeline); |
+ var initialStartTime = document.timeline.currentTime - 50 * MS_PER_SEC; |
+ animation.startTime = initialStartTime; |
+ animation.pause(); |
+ animation.play(); |
+ |
+ animation.timeline = null; |
+ animation.timeline = document.timeline; |
+ assert_equals(animation.playState, 'pending'); |
+ |
+ return animation.ready.then(function() { |
+ assert_equals(animation.playState, 'running'); |
+ assert_times_equal(animation.startTime, initialStartTime); |
+ }); |
+}, 'After clearing and re-setting timeline on an animation in the middle of' |
+ + ' an aborted pause, it continues playing using the same start time'); |
+ |
+</script> |
+</body> |