active-time.html (6342B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Active time</title> 4 <link rel="help" href="https://drafts.csswg.org/web-animations/#calculating-the-active-time"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="../../testcommon.js"></script> 8 <body> 9 <div id="log"></div> 10 <script> 11 'use strict'; 12 13 test(t => { 14 const tests = [ { fill: 'none', progress: null }, 15 { fill: 'backwards', progress: 0 }, 16 { fill: 'forwards', progress: null }, 17 { fill: 'both', progress: 0 } ]; 18 for (const test of tests) { 19 const anim = createDiv(t).animate(null, { delay: 1, fill: test.fill }); 20 assert_equals(anim.effect.getComputedTiming().progress, test.progress, 21 `Progress in before phase when using '${test.fill}' fill`); 22 } 23 }, 'Active time in before phase'); 24 25 test(t => { 26 const anim = createDiv(t).animate(null, 1000); 27 anim.currentTime = 500; 28 assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.5); 29 }, 'Active time in active phase and no start delay is the local time'); 30 31 test(t => { 32 const anim = createDiv(t).animate(null, { duration: 1000, delay: 500 }); 33 anim.currentTime = 1000; 34 assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.5); 35 }, 'Active time in active phase and positive start delay is the local time' 36 + ' minus the start delay'); 37 38 test(t => { 39 const anim = createDiv(t).animate(null, { duration: 1000, delay: -500 }); 40 assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.5); 41 }, 'Active time in active phase and negative start delay is the local time' 42 + ' minus the start delay'); 43 44 test(t => { 45 const anim = createDiv(t).animate(null); 46 assert_equals(anim.effect.getComputedTiming().progress, null); 47 }, 'Active time in after phase with no fill is unresolved'); 48 49 test(t => { 50 const anim = createDiv(t).animate(null, { fill: 'backwards' }); 51 assert_equals(anim.effect.getComputedTiming().progress, null); 52 }, 'Active time in after phase with backwards-only fill is unresolved'); 53 54 test(t => { 55 const anim = createDiv(t).animate(null, { duration: 1000, 56 iterations: 2.3, 57 delay: 500, // Should have no effect 58 fill: 'forwards' }); 59 anim.finish(); 60 assert_equals(anim.effect.getComputedTiming().currentIteration, 2); 61 assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.3); 62 }, 'Active time in after phase with forwards fill is the active duration'); 63 64 test(t => { 65 const anim = createDiv(t).animate(null, { duration: 0, 66 iterations: Infinity, 67 fill: 'forwards' }); 68 anim.finish(); 69 assert_equals(anim.effect.getComputedTiming().currentIteration, Infinity); 70 assert_equals(anim.effect.getComputedTiming().progress, 1); 71 }, 'Active time in after phase with forwards fill, zero-duration, and ' 72 + ' infinite iteration count is the active duration'); 73 74 test(t => { 75 const anim = createDiv(t).animate(null, { duration: 1000, 76 iterations: 2.3, 77 delay: 500, 78 endDelay: 4000, 79 fill: 'forwards' }); 80 anim.finish(); 81 assert_equals(anim.effect.getComputedTiming().currentIteration, 2); 82 assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.3); 83 }, 'Active time in after phase with forwards fill and positive end delay' 84 + ' is the active duration'); 85 86 test(t => { 87 const anim = createDiv(t).animate(null, { duration: 1000, 88 iterations: 2.3, 89 delay: 500, 90 endDelay: -800, 91 fill: 'forwards' }); 92 anim.finish(); 93 assert_equals(anim.effect.getComputedTiming().currentIteration, 1); 94 assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.5); 95 }, 'Active time in after phase with forwards fill and negative end delay' 96 + ' is the active duration + end delay'); 97 98 test(t => { 99 const anim = createDiv(t).animate(null, { duration: 1000, 100 iterations: 2.3, 101 delay: 500, 102 endDelay: -2500, 103 fill: 'forwards' }); 104 anim.finish(); 105 assert_equals(anim.effect.getComputedTiming().currentIteration, 0); 106 assert_equals(anim.effect.getComputedTiming().progress, 0); 107 }, 'Active time in after phase with forwards fill and negative end delay' 108 + ' greater in magnitude than the active duration is zero'); 109 110 test(t => { 111 const anim = createDiv(t).animate(null, { duration: 1000, 112 iterations: 2.3, 113 delay: 500, 114 endDelay: -4000, 115 fill: 'forwards' }); 116 anim.finish(); 117 assert_equals(anim.effect.getComputedTiming().currentIteration, 0); 118 assert_equals(anim.effect.getComputedTiming().progress, 0); 119 }, 'Active time in after phase with forwards fill and negative end delay' 120 + ' greater in magnitude than the sum of the active duration and start delay' 121 + ' is zero'); 122 123 test(t => { 124 const anim = createDiv(t).animate(null, { duration: 1000, 125 iterations: 2.3, 126 delay: 500, 127 fill: 'both' }); 128 anim.finish(); 129 assert_equals(anim.effect.getComputedTiming().currentIteration, 2); 130 assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.3); 131 }, 'Active time in after phase with \'both\' fill is the active duration'); 132 133 test(t => { 134 // Create an effect with a non-zero duration so we ensure we're not just 135 // testing the after-phase behavior. 136 const effect = new KeyframeEffect(null, null, 1); 137 assert_equals(effect.getComputedTiming().progress, null); 138 }, 'Active time when the local time is unresolved, is unresolved'); 139 140 </script> 141 </body>