css/css-animations/CSSAnimation-getCurrentTime.tentative.html

<!doctype html>
<meta charset=utf-8>
<title>CSSAnimation.currentTime</title>
<!-- TODO: Add a more specific link for this once it is specified. -->
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#cssanimation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testcommon.js"></script>
<style>

.animated-div {
  margin-left: 10px;
  /* Make it easier to calculate expected values: */
  animation-timing-function: linear ! important;
}

@keyframes anim {
  from { margin-left: 100px; }
  to { margin-left: 200px; }
}

</style>
<div id="log"></div>
<script type="text/javascript">

'use strict';

promise_test(async t => {
  const div = addDiv(t, { class: 'animated-div' });
  div.style.animation = 'anim 100s';
  const animation = div.getAnimations()[0];

  assert_equals(
    animation.currentTime,
    0,
    'Animation.currentTime should be zero when an animation ' +
      'is initially created'
  );

  await animation.ready;

  animation.currentTime = 50 * MS_PER_SEC;

  assert_time_equals_literal(
    animation.currentTime,
    50 * MS_PER_SEC,
    'Check setting of currentTime actually works'
  );
  assert_equals(getComputedStyle(div).marginLeft, '150px');
}, 'currentTime can be used to seek a CSS animation');

promise_test(async t => {
  const div = addDiv(t, { class: 'animated-div' });
  div.style.animation = 'anim 100s';

  const animation = div.getAnimations()[0];
  await animation.ready;

  assert_throws_js(
    TypeError,
    () => {
      animation.currentTime = null;
    },
    'Expect TypeError exception on trying to set Animation.currentTime to null'
  );
}, 'Setting currentTime to null on a CSS animation throws');

</script>