| <!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> |