CSSAnimation-startTime.tentative.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-animations/CSSAnimation-startTime.tentative.html - WPT Dashboard Interop Dashboard

<!doctype html>

<meta charset=utf-8>

<title>CSSAnimation.startTime</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';

test(t => {

  const div = addDiv(t, { 'class': 'animated-div' });

  div.style.animation = 'anim 100s 100s';

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

  const timelineTime = animation.timeline.currentTime;

  animation.startTime = timelineTime;

  assert_times_equal(animation.startTime, timelineTime,

    'Check setting of startTime actually works');

}, 'The start time of a CSS animation can be set');

promise_test(async t => {

  const div = addDiv(t, { 'class': 'animated-div' });

  div.style.animation = 'anim 100s 100s';

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

  // Seek to the half-way point

  animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;

  assert_equals(getComputedStyle(div).marginLeft, '150px');

}, 'The start time can be set to seek a CSS animation');

promise_test(async t => {

  const div = addDiv(t, { class: 'animated-div' });

  const eventWatcher = new EventWatcher(t, div, [

    'animationstart',

    'animationend',

]);

  div.style.animation = 'anim 100s 100s';

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

  await animation.ready;

  animation.startTime = animation.timeline.currentTime - 100 * MS_PER_SEC;

  await eventWatcher.wait_for('animationstart');

  animation.startTime = animation.timeline.currentTime - 200 * MS_PER_SEC;

  await eventWatcher.wait_for('animationend');

}, 'Seeking a CSS animation using the start time dispatches animation events');

</script>