overallProgress.html (3972B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Animation.overallProgress</title> 4 <link rel="help" 5 href="https://drafts.csswg.org/web-animations-2/#the-overall-progress-of-an-animation"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="../../testcommon.js"></script> 9 <body> 10 <div id="log"></div> 11 <script> 12 'use strict'; 13 14 15 test(t => { 16 const animation = new Animation(null); 17 animation.startTime = document.timeline.currentTime; 18 assert_time_equals_literal(animation.currentTime, 0, 'currentTime is zero'); 19 assert_equals(animation.overallProgress, null, 20 'overallProgress is unresolved'); 21 }, 'overallProgress of a newly created animation without an effect is ' + 22 'unresolved'); 23 24 test(t => { 25 // currentTime should be unresolved because the animation has no associated 26 // timeline. 27 const animation = new Animation(new KeyframeEffect(createDiv(t), null), null); 28 assert_equals(animation.currentTime, null, 'currentTime is unresolved'); 29 assert_equals(animation.overallProgress, null, 30 'overallProgress is unresolved'); 31 }, 'overallProgress of an animation whose currentTime is unresolved is ' + 32 'unresolved.'); 33 34 test(t => { 35 const animation = new Animation(new KeyframeEffect(createDiv(t), null, 36 { duration: 0 }), document.timeline); 37 // Set the startTime to 20 seconds into the future. 38 animation.startTime = document.timeline.currentTime + 20 * MS_PER_SEC; 39 assert_less_than(animation.currentTime, 0, 'currentTime is negative'); 40 assert_approx_equals(animation.overallProgress, 0, 0.01, 'overallProgress ' + 41 'is zero'); 42 }, "overallProgress of an animation whose effect's endTime is zero is zero " + 43 "if its currentTime is negative."); 44 45 test(t => { 46 const animation = new Animation(new KeyframeEffect(createDiv(t), null, 47 { duration: 0 }), document.timeline); 48 animation.startTime = document.timeline.currentTime; 49 assert_time_equals_literal(animation.currentTime, 0, 'currentTime is zero'); 50 assert_approx_equals(animation.overallProgress, 1, 0.01, 51 'overallProgress is one'); 52 53 animation.startTime = document.timeline.currentTime - 20 * MS_PER_SEC; 54 assert_greater_than(animation.currentTime, 0, 'currentTime greater than zero'); 55 assert_approx_equals(animation.overallProgress, 1, 0.01, 56 'overallProgress is one'); 57 }, "overallProgress of an animation whose effect's endTime is zero is one if " + 58 "its currentTime is non-negative."); 59 60 test(t => { 61 const animation = new Animation(new KeyframeEffect(createDiv(t), null, 62 { duration: Infinity }), document.timeline); 63 64 animation.startTime = document.timeline.currentTime - 20 * MS_PER_SEC; 65 assert_greater_than(animation.currentTime, 0, 'currentTime is positive'); 66 assert_approx_equals(animation.overallProgress, 0, 0.01, 67 'overallProgress is zero'); 68 }, "overallProgress of an animation whose effect's endTime is infinity is zero."); 69 70 test(t => { 71 const animation = new Animation(new KeyframeEffect(createDiv(t), null, 72 200 * MS_PER_SEC), document.timeline); 73 animation.playbackRate = 2; 74 75 animation.startTime = document.timeline.currentTime - 50 * MS_PER_SEC; 76 assert_time_equals_literal(animation.currentTime, 100 * MS_PER_SEC, 'currentTime is 100s'); 77 assert_approx_equals(animation.overallProgress, 0.5, 0.01, 78 'overallProgress is zero'); 79 80 animation.startTime = document.timeline.currentTime - 100 * MS_PER_SEC; 81 assert_time_equals_literal(animation.currentTime, 200 * MS_PER_SEC, 'currentTime is 200s'); 82 assert_approx_equals(animation.overallProgress, 1, 0.01, 83 'overallProgress is one'); 84 85 animation.startTime = document.timeline.currentTime - 150 * MS_PER_SEC; 86 assert_time_equals_literal(animation.currentTime, 300 * MS_PER_SEC, 'currentTime is 300s'); 87 assert_approx_equals(animation.overallProgress, 1, 0.01, 88 'overallProgress is still one'); 89 }, "overallProgress of an animation is calculated by " + 90 "currentTime / effect endTime."); 91 92 </script> 93 </body>