getComputedTiming.html (8086B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>AnimationEffect.getComputedTiming</title> 4 <link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animationeffect-getcomputedtiming"> 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 effect = new KeyframeEffect(null, null); 15 16 const ct = effect.getComputedTiming(); 17 assert_equals(ct.delay, 0, 'computed delay'); 18 assert_equals(ct.endDelay, 0, 'computed endDelay'); 19 assert_equals(ct.fill, 'none', 'computed fill'); 20 assert_equals(ct.iterationStart, 0.0, 'computed iterationStart'); 21 assert_equals(ct.iterations, 1.0, 'computed iterations'); 22 assert_equals(ct.duration, 0, 'computed duration'); 23 assert_equals(ct.direction, 'normal', 'computed direction'); 24 assert_equals(ct.easing, 'linear', 'computed easing'); 25 }, 'values of getComputedTiming() when a KeyframeEffect is ' + 26 'constructed without any KeyframeEffectOptions object'); 27 28 const gGetComputedTimingTests = [ 29 { desc: 'an empty KeyframeEffectOptions object', 30 input: { }, 31 expected: { } }, 32 { desc: 'a normal KeyframeEffectOptions object', 33 input: { delay: 1000, 34 endDelay: 2000, 35 fill: 'auto', 36 iterationStart: 0.5, 37 iterations: 5.5, 38 duration: 'auto', 39 direction: 'alternate', 40 easing: 'steps(2)' }, 41 expected: { delay: 1000, 42 endDelay: 2000, 43 fill: 'none', 44 iterationStart: 0.5, 45 iterations: 5.5, 46 duration: 0, 47 direction: 'alternate', 48 easing: 'steps(2)' } }, 49 { desc: 'a double value', 50 input: 3000, 51 timing: { duration: 3000 }, 52 expected: { delay: 0, 53 fill: 'none', 54 iterations: 1, 55 duration: 3000, 56 direction: 'normal' } }, 57 { desc: '+Infinity', 58 input: Infinity, 59 expected: { duration: Infinity } }, 60 { desc: 'an Infinity duration', 61 input: { duration: Infinity }, 62 expected: { duration: Infinity } }, 63 { desc: 'an auto duration', 64 input: { duration: 'auto' }, 65 expected: { duration: 0 } }, 66 { desc: 'an Infinity iterations', 67 input: { iterations: Infinity }, 68 expected: { iterations: Infinity } }, 69 { desc: 'an auto fill', 70 input: { fill: 'auto' }, 71 expected: { fill: 'none' } }, 72 { desc: 'a forwards fill', 73 input: { fill: 'forwards' }, 74 expected: { fill: 'forwards' } } 75 ]; 76 77 for (const stest of gGetComputedTimingTests) { 78 test(t => { 79 const effect = new KeyframeEffect(null, null, stest.input); 80 81 // Helper function to provide default expected values when the test does 82 // not supply them. 83 const expected = (field, defaultValue) => { 84 return field in stest.expected ? stest.expected[field] : defaultValue; 85 }; 86 87 const ct = effect.getComputedTiming(); 88 assert_equals(ct.delay, expected('delay', 0), 89 'computed delay'); 90 assert_equals(ct.endDelay, expected('endDelay', 0), 91 'computed endDelay'); 92 assert_equals(ct.fill, expected('fill', 'none'), 93 'computed fill'); 94 assert_equals(ct.iterationStart, expected('iterationStart', 0), 95 'computed iterations'); 96 assert_equals(ct.iterations, expected('iterations', 1), 97 'computed iterations'); 98 assert_equals(ct.duration, expected('duration', 0), 99 'computed duration'); 100 assert_equals(ct.direction, expected('direction', 'normal'), 101 'computed direction'); 102 assert_equals(ct.easing, expected('easing', 'linear'), 103 'computed easing'); 104 105 }, 'values of getComputedTiming() when a KeyframeEffect is' 106 + ` constructed by ${stest.desc}`); 107 } 108 109 const gActiveDurationTests = [ 110 { desc: 'an empty KeyframeEffectOptions object', 111 input: { }, 112 expected: 0 }, 113 { desc: 'a non-zero duration and default iteration count', 114 input: { duration: 1000 }, 115 expected: 1000 }, 116 { desc: 'a non-zero duration and integral iteration count', 117 input: { duration: 1000, iterations: 7 }, 118 expected: 7000 }, 119 { desc: 'a non-zero duration and fractional iteration count', 120 input: { duration: 1000, iterations: 2.5 }, 121 expected: 2500 }, 122 { desc: 'an non-zero duration and infinite iteration count', 123 input: { duration: 1000, iterations: Infinity }, 124 expected: Infinity }, 125 { desc: 'an non-zero duration and zero iteration count', 126 input: { duration: 1000, iterations: 0 }, 127 expected: 0 }, 128 { desc: 'a zero duration and default iteration count', 129 input: { duration: 0 }, 130 expected: 0 }, 131 { desc: 'a zero duration and fractional iteration count', 132 input: { duration: 0, iterations: 2.5 }, 133 expected: 0 }, 134 { desc: 'a zero duration and infinite iteration count', 135 input: { duration: 0, iterations: Infinity }, 136 expected: 0 }, 137 { desc: 'a zero duration and zero iteration count', 138 input: { duration: 0, iterations: 0 }, 139 expected: 0 }, 140 { desc: 'an infinite duration and default iteration count', 141 input: { duration: Infinity }, 142 expected: Infinity }, 143 { desc: 'an infinite duration and zero iteration count', 144 input: { duration: Infinity, iterations: 0 }, 145 expected: 0 }, 146 { desc: 'an infinite duration and fractional iteration count', 147 input: { duration: Infinity, iterations: 2.5 }, 148 expected: Infinity }, 149 { desc: 'an infinite duration and infinite iteration count', 150 input: { duration: Infinity, iterations: Infinity }, 151 expected: Infinity }, 152 ]; 153 154 for (const stest of gActiveDurationTests) { 155 test(t => { 156 const effect = new KeyframeEffect(null, null, stest.input); 157 158 assert_equals(effect.getComputedTiming().activeDuration, 159 stest.expected); 160 161 }, `getComputedTiming().activeDuration for ${stest.desc}`); 162 } 163 164 const gEndTimeTests = [ 165 { desc: 'an empty KeyframeEffectOptions object', 166 input: { }, 167 expected: 0 }, 168 { desc: 'a non-zero duration and default iteration count', 169 input: { duration: 1000 }, 170 expected: 1000 }, 171 { desc: 'a non-zero duration and non-default iteration count', 172 input: { duration: 1000, iterations: 2.5 }, 173 expected: 2500 }, 174 { desc: 'a non-zero duration and non-zero delay', 175 input: { duration: 1000, delay: 1500 }, 176 expected: 2500 }, 177 { desc: 'a non-zero duration, non-zero delay and non-default iteration', 178 input: { duration: 1000, delay: 1500, iterations: 2 }, 179 expected: 3500 }, 180 { desc: 'an infinite iteration count', 181 input: { duration: 1000, iterations: Infinity }, 182 expected: Infinity }, 183 { desc: 'an infinite duration', 184 input: { duration: Infinity, iterations: 10 }, 185 expected: Infinity }, 186 { desc: 'an infinite duration and delay', 187 input: { duration: Infinity, iterations: 10, delay: 1000 }, 188 expected: Infinity }, 189 { desc: 'an infinite duration and negative delay', 190 input: { duration: Infinity, iterations: 10, delay: -1000 }, 191 expected: Infinity }, 192 { desc: 'an non-zero duration and negative delay', 193 input: { duration: 1000, iterations: 2, delay: -1000 }, 194 expected: 1000 }, 195 { desc: 'an non-zero duration and negative delay greater than active ' + 196 'duration', 197 input: { duration: 1000, iterations: 2, delay: -3000 }, 198 expected: 0 }, 199 { desc: 'a zero duration and negative delay', 200 input: { duration: 0, iterations: 2, delay: -1000 }, 201 expected: 0 } 202 ]; 203 204 for (const stest of gEndTimeTests) { 205 test(t => { 206 const effect = new KeyframeEffect(null, null, stest.input); 207 208 assert_equals(effect.getComputedTiming().endTime, 209 stest.expected); 210 211 }, `getComputedTiming().endTime for ${stest.desc}`); 212 } 213 </script> 214 </body>