1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177
|
<!DOCTYPE html>
<meta charset=utf-8>
<title>Playing an animation</title>
<link rel="help"
href="https://drafts.csswg.org/web-animations/#playing-an-animation-section">
<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';
test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.currentTime = 1 * MS_PER_SEC;
assert_time_equals_literal(animation.currentTime, 1 * MS_PER_SEC);
animation.play();
assert_time_equals_literal(animation.currentTime, 1 * MS_PER_SEC);
}, 'Playing a running animation leaves the current time unchanged');
test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.finish();
assert_time_equals_literal(animation.currentTime, 100 * MS_PER_SEC);
animation.play();
assert_time_equals_literal(animation.currentTime, 0);
}, 'Playing a finished animation seeks back to the start');
test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.playbackRate = -1;
animation.currentTime = 0;
assert_time_equals_literal(animation.currentTime, 0);
animation.play();
assert_time_equals_literal(animation.currentTime, 100 * MS_PER_SEC);
}, 'Playing a finished and reversed animation seeks to end');
promise_test(async t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.finish();
// Initiate a pause then abort it
animation.pause();
animation.play();
// Wait to return to running state
await animation.ready;
assert_true(animation.currentTime < 100 * 1000,
'After aborting a pause when finished, the current time should'
+ ' jump back to the start of the animation');
}, 'Playing a pause-pending but previously finished animation seeks back to'
+ ' to the start');
promise_test(async t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.finish();
await animation.ready;
animation.play();
assert_equals(animation.startTime, null, 'start time is unresolved');
}, 'Playing a finished animation clears the start time');
test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.cancel();
const promise = animation.ready;
animation.play();
assert_not_equals(animation.ready, promise);
}, 'The ready promise should be replaced if the animation is not already'
+ ' pending');
promise_test(async t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
const promise = animation.ready;
const promiseResult = await promise;
assert_equals(promiseResult, animation);
assert_equals(animation.ready, promise);
}, 'A pending ready promise should be resolved and not replaced when the'
+ ' animation enters the running state');
promise_test(async t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.currentTime = 50 * MS_PER_SEC;
await animation.ready;
animation.pause();
await animation.ready;
const holdTime = animation.currentTime;
animation.play();
await animation.ready;
assert_less_than_equal(
animation.startTime,
animation.timeline.currentTime - holdTime + TIME_PRECISION
);
}, 'Resuming an animation from paused calculates start time from hold time');
promise_test(async t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
await animation.ready;
// Go to pause-pending state
animation.pause();
assert_true(animation.pending, 'Animation is pending');
const pauseReadyPromise = animation.ready;
// Now play again immediately (abort the pause)
animation.play();
assert_true(animation.pending, 'Animation is still pending');
assert_equals(animation.ready, pauseReadyPromise,
'The pause Promise is re-used when playing while waiting'
+ ' to pause');
// Sanity check: Animation proceeds to running state
await animation.ready;
assert_true(!animation.pending && animation.playState === 'running',
'Animation is running after aborting a pause');
}, 'If a pause operation is interrupted, the ready promise is reused');
promise_test(async t => {
// Seek animation beyond target end
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.currentTime = -100 * MS_PER_SEC;
await animation.ready;
// Set pending playback rate to the opposite direction
animation.updatePlaybackRate(-1);
assert_true(animation.pending);
assert_equals(animation.playbackRate, 1);
// When we play, we should seek to the target end, NOT to zero (which
// is where we would seek to if we used the playbackRate of 1.
animation.play();
assert_time_equals_literal(animation.currentTime, 100 * MS_PER_SEC);
}, 'A pending playback rate is used when determining auto-rewind behavior');
promise_test(async t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.cancel();
assert_equals(animation.startTime, null,
'Start time should be unresolved');
const playTime = animation.timeline.currentTime;
animation.play();
assert_true(animation.pending, 'Animation should be play-pending');
await animation.ready;
assert_false(animation.pending, 'animation should no longer be pending');
assert_greater_than(animation.startTime, playTime,
'The start time of the playing animation should be set');
}, 'Playing a canceled animation sets the start time');
promise_test(async t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.playbackRate = -1;
animation.cancel();
assert_equals(animation.startTime, null,
'Start time should be unresolved');
const playTime = animation.timeline.currentTime;
animation.play();
assert_true(animation.pending, 'Animation should be play-pending');
await animation.ready;
assert_false(animation.pending, 'Animation should no longer be pending');
assert_greater_than(animation.startTime, playTime + 100 * MS_PER_SEC,
'The start time of the playing animation should be set');
}, 'Playing a canceled animation backwards sets the start time');
</script>
</body>
|