| 12
 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
 
 | <!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');
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 => {
  // 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');
</script>
</body>
 |