progress.tentative.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 6 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /web-animations/interfaces/Animation/progress.tentative.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset=utf-8>

<title>Animation.progress</title>

<link rel="help"

href="https://drafts.csswg.org/web-animations-2/#the-progress-of-an-animation">

<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 = new Animation(null);

  animation.startTime = document.timeline.currentTime;

  assert_time_equals_literal(animation.currentTime, 0, 'currentTime is zero');

  assert_equals(animation.progress, null, 'progress is unresolved');

}, 'progress of a newly created animation without an effect is unresolved');

test(t => {

  // currentTime should be unresolved because the animation has no associated

  // timeline.

  const animation = new Animation(new KeyframeEffect(createDiv(t), null), null);

  assert_equals(animation.currentTime, null, 'currentTime is unresolved');

  assert_equals(animation.progress, null, 'progress is unresolved');

}, 'progress of an animation whose currentTime is unresolved is unresolved.');

test(t => {

  const animation = new Animation(new KeyframeEffect(createDiv(t), null,

    { duration: 0 }), document.timeline);

  // Set the startTime to 20 seconds into the future.

  animation.startTime = document.timeline.currentTime + 20 * MS_PER_SEC;

  assert_less_than(animation.currentTime, 0, 'currentTime is negative');

  assert_approx_equals(animation.progress, 0, 0.01, 'progress is zero');

}, "progress of an animation whose effect's endTime is zero is zero if its " +

   "currentTime is negative.");

test(t => {

  const animation = new Animation(new KeyframeEffect(createDiv(t), null,

    { duration: 0 }), document.timeline);

  animation.startTime = document.timeline.currentTime;

  assert_time_equals_literal(animation.currentTime, 0, 'currentTime is zero');

  assert_approx_equals(animation.progress, 1, 0.01, 'progress is one');

  animation.startTime = document.timeline.currentTime - 20 * MS_PER_SEC;

  assert_greater_than(animation.currentTime, 0, 'currentTime greater than zero');

  assert_approx_equals(animation.progress, 1, 0.01, 'progress is one');

}, "progress of an animation whose effect's endTime is zero is one if its " +

   "currentTime is non-negative.");

test(t => {

  const animation = new Animation(new KeyframeEffect(createDiv(t), null,

    { duration: Infinity }), document.timeline);

  animation.startTime = document.timeline.currentTime - 20 * MS_PER_SEC;

  assert_greater_than(animation.currentTime, 0, 'currentTime is positive');

  assert_approx_equals(animation.progress, 0, 0.01, 'progress is zero');

}, "progress of an animation whose effect's endTime is infinity is zero.");

test(t => {

  const animation = new Animation(new KeyframeEffect(createDiv(t), null,

    200 * MS_PER_SEC), document.timeline);

  animation.playbackRate = 2;

  animation.startTime = document.timeline.currentTime - 50 * MS_PER_SEC;

  assert_time_equals_literal(animation.currentTime, 100 * MS_PER_SEC, 'currentTime is 100s');

  assert_approx_equals(animation.progress, 0.5, 0.01, 'progress is zero');

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

  assert_time_equals_literal(animation.currentTime, 200 * MS_PER_SEC, 'currentTime is 200s');

  assert_approx_equals(animation.progress, 1, 0.01, 'progress is one');

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

  assert_time_equals_literal(animation.currentTime, 300 * MS_PER_SEC, 'currentTime is 300s');

  assert_approx_equals(animation.progress, 1, 0.01, 'progress is still one');

}, "progress of an animation is calculated by currentTime / effect endTime.");

</script>

</body>