mirror of
https://github.com/servo/servo.git
synced 2025-07-12 18:03:49 +01:00
276 lines
9 KiB
HTML
276 lines
9 KiB
HTML
<!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>
|