| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <meta charset=utf-8> |
| 3 <title>Tests for the transformed progress</title> |
| 4 <link rel="help" href="https://w3c.github.io/web-animations/#calculating-the-tra
nsformed-progress"> |
| 5 <script src="/resources/testharness.js"></script> |
| 6 <script src="/resources/testharnessreport.js"></script> |
| 7 <script src="../../testcommon.js"></script> |
| 8 <script src="../../resources/easing-tests.js"></script> |
| 9 <body> |
| 10 <div id="log"></div> |
| 11 <div id="target"></div> |
| 12 <script> |
| 13 'use strict'; |
| 14 |
| 15 gEasingTests.forEach(params => { |
| 16 test(function(t) { |
| 17 const target = createDiv(t); |
| 18 const anim = target.animate(null, { duration: 1000, |
| 19 fill: 'forwards', |
| 20 easing: params.easing }); |
| 21 |
| 22 [ 0, 250, 500, 750, 1000 ].forEach(sampleTime => { |
| 23 anim.currentTime = sampleTime; |
| 24 const portion = sampleTime / anim.effect.getComputedTiming().duration; |
| 25 const expectedProgress = params.easingFunction(portion); |
| 26 assert_approx_equals(anim.effect.getComputedTiming().progress, |
| 27 expectedProgress, |
| 28 0.01, |
| 29 'The progress should be approximately ' + |
| 30 expectedProgress + ` at ${sampleTime}ms`); |
| 31 }); |
| 32 }, 'Transformed progress for ' + params.desc); |
| 33 }); |
| 34 |
| 35 // Additional tests for various boundary conditions of step timing functions |
| 36 |
| 37 var gStepTimingFunctionTests = [ |
| 38 { |
| 39 description: 'Test bounds point of step-start easing', |
| 40 effect: { |
| 41 delay: 1000, |
| 42 duration: 1000, |
| 43 fill: 'both', |
| 44 easing: 'steps(2, start)' |
| 45 }, |
| 46 conditions: [ |
| 47 { currentTime: 0, progress: 0 }, |
| 48 { currentTime: 999, progress: 0 }, |
| 49 { currentTime: 1000, progress: 0.5 }, |
| 50 { currentTime: 1499, progress: 0.5 }, |
| 51 { currentTime: 1500, progress: 1 }, |
| 52 { currentTime: 2000, progress: 1 } |
| 53 ] |
| 54 }, |
| 55 { |
| 56 description: 'Test bounds point of step-start easing with reverse direction'
, |
| 57 effect: { |
| 58 delay: 1000, |
| 59 duration: 1000, |
| 60 fill: 'both', |
| 61 direction: 'reverse', |
| 62 easing: 'steps(2, start)' |
| 63 }, |
| 64 conditions: [ |
| 65 { currentTime: 0, progress: 1 }, |
| 66 { currentTime: 1001, progress: 1 }, |
| 67 { currentTime: 1500, progress: 1 }, |
| 68 { currentTime: 1501, progress: 0.5 }, |
| 69 { currentTime: 2000, progress: 0 }, |
| 70 { currentTime: 2500, progress: 0 } |
| 71 ] |
| 72 }, |
| 73 { |
| 74 description: 'Test bounds point of step-start easing ' + |
| 75 'with iterationStart not at a transition point', |
| 76 effect: { |
| 77 delay: 1000, |
| 78 duration: 1000, |
| 79 fill: 'both', |
| 80 iterationStart: 0.25, |
| 81 easing: 'steps(2, start)' |
| 82 }, |
| 83 conditions: [ |
| 84 { currentTime: 0, progress: 0.5 }, |
| 85 { currentTime: 999, progress: 0.5 }, |
| 86 { currentTime: 1000, progress: 0.5 }, |
| 87 { currentTime: 1249, progress: 0.5 }, |
| 88 { currentTime: 1250, progress: 1 }, |
| 89 { currentTime: 1749, progress: 1 }, |
| 90 { currentTime: 1750, progress: 0.5 }, |
| 91 { currentTime: 2000, progress: 0.5 }, |
| 92 { currentTime: 2500, progress: 0.5 }, |
| 93 ] |
| 94 }, |
| 95 { |
| 96 description: 'Test bounds point of step-start easing ' + |
| 97 'with iterationStart and delay', |
| 98 effect: { |
| 99 delay: 1000, |
| 100 duration: 1000, |
| 101 fill: 'both', |
| 102 iterationStart: 0.5, |
| 103 easing: 'steps(2, start)' |
| 104 }, |
| 105 conditions: [ |
| 106 { currentTime: 0, progress: 0.5 }, |
| 107 { currentTime: 999, progress: 0.5 }, |
| 108 { currentTime: 1000, progress: 1 }, |
| 109 { currentTime: 1499, progress: 1 }, |
| 110 { currentTime: 1500, progress: 0.5 }, |
| 111 { currentTime: 2000, progress: 1 } |
| 112 ] |
| 113 }, |
| 114 { |
| 115 description: 'Test bounds point of step-start easing ' + |
| 116 'with iterationStart and reverse direction', |
| 117 effect: { |
| 118 delay: 1000, |
| 119 duration: 1000, |
| 120 fill: 'both', |
| 121 iterationStart: 0.5, |
| 122 direction: 'reverse', |
| 123 easing: 'steps(2, start)' |
| 124 }, |
| 125 conditions: [ |
| 126 { currentTime: 0, progress: 1 }, |
| 127 { currentTime: 1000, progress: 1 }, |
| 128 { currentTime: 1001, progress: 0.5 }, |
| 129 { currentTime: 1499, progress: 0.5 }, |
| 130 { currentTime: 1500, progress: 1 }, |
| 131 { currentTime: 1999, progress: 1 }, |
| 132 { currentTime: 2000, progress: 0.5 }, |
| 133 { currentTime: 2500, progress: 0.5 } |
| 134 ] |
| 135 }, |
| 136 { |
| 137 description: 'Test bounds point of step(4, start) easing ' + |
| 138 'with iterationStart 0.75 and delay', |
| 139 effect: { |
| 140 duration: 1000, |
| 141 fill: 'both', |
| 142 delay: 1000, |
| 143 iterationStart: 0.75, |
| 144 easing: 'steps(4, start)' |
| 145 }, |
| 146 conditions: [ |
| 147 { currentTime: 0, progress: 0.75 }, |
| 148 { currentTime: 999, progress: 0.75 }, |
| 149 { currentTime: 1000, progress: 1 }, |
| 150 { currentTime: 2000, progress: 1 }, |
| 151 { currentTime: 2500, progress: 1 } |
| 152 ] |
| 153 }, |
| 154 { |
| 155 description: 'Test bounds point of step-start easing ' + |
| 156 'with alternate direction', |
| 157 effect: { |
| 158 duration: 1000, |
| 159 fill: 'both', |
| 160 delay: 1000, |
| 161 iterations: 2, |
| 162 iterationStart: 1.5, |
| 163 direction: 'alternate', |
| 164 easing: 'steps(2, start)' |
| 165 }, |
| 166 conditions: [ |
| 167 { currentTime: 0, progress: 1 }, |
| 168 { currentTime: 1000, progress: 1 }, |
| 169 { currentTime: 1001, progress: 0.5 }, |
| 170 { currentTime: 2999, progress: 1 }, |
| 171 { currentTime: 3000, progress: 0.5 }, |
| 172 { currentTime: 3500, progress: 0.5 } |
| 173 ] |
| 174 }, |
| 175 { |
| 176 description: 'Test bounds point of step-start easing ' + |
| 177 'with alternate-reverse direction', |
| 178 effect: { |
| 179 duration: 1000, |
| 180 fill: 'both', |
| 181 delay: 1000, |
| 182 iterations: 2, |
| 183 iterationStart: 0.5, |
| 184 direction: 'alternate-reverse', |
| 185 easing: 'steps(2, start)' |
| 186 }, |
| 187 conditions: [ |
| 188 { currentTime: 0, progress: 1 }, |
| 189 { currentTime: 1000, progress: 1 }, |
| 190 { currentTime: 1001, progress: 0.5 }, |
| 191 { currentTime: 2999, progress: 1 }, |
| 192 { currentTime: 3000, progress: 0.5 }, |
| 193 { currentTime: 3500, progress: 0.5 } |
| 194 ] |
| 195 }, |
| 196 { |
| 197 description: 'Test bounds point of step-end easing', |
| 198 effect: { |
| 199 delay: 1000, |
| 200 duration: 1000, |
| 201 fill: 'both', |
| 202 easing: 'steps(2, end)' |
| 203 }, |
| 204 conditions: [ |
| 205 { currentTime: 0, progress: 0 }, |
| 206 { currentTime: 999, progress: 0 }, |
| 207 { currentTime: 1000, progress: 0 }, |
| 208 { currentTime: 1499, progress: 0 }, |
| 209 { currentTime: 1500, progress: 0.5 }, |
| 210 { currentTime: 2000, progress: 1 } |
| 211 ] |
| 212 }, |
| 213 { |
| 214 description: 'Test bounds point of step-end easing ' + |
| 215 'with iterationStart and delay', |
| 216 effect: { |
| 217 duration: 1000, |
| 218 fill: 'both', |
| 219 delay: 1000, |
| 220 iterationStart: 0.5, |
| 221 easing: 'steps(2, end)' |
| 222 }, |
| 223 conditions: [ |
| 224 { currentTime: 0, progress: 0 }, |
| 225 { currentTime: 999, progress: 0 }, |
| 226 { currentTime: 1000, progress: 0.5 }, |
| 227 { currentTime: 1499, progress: 0.5 }, |
| 228 { currentTime: 1500, progress: 0 }, |
| 229 { currentTime: 1999, progress: 0 }, |
| 230 { currentTime: 2000, progress: 0.5 }, |
| 231 { currentTime: 2500, progress: 0.5 } |
| 232 ] |
| 233 }, |
| 234 { |
| 235 description: 'Test bounds point of step-end easing ' + |
| 236 'with iterationStart not at a transition point', |
| 237 effect: { |
| 238 delay: 1000, |
| 239 duration: 1000, |
| 240 fill: 'both', |
| 241 iterationStart: 0.75, |
| 242 easing: 'steps(2, end)' |
| 243 }, |
| 244 conditions: [ |
| 245 { currentTime: 0, progress: 0.5 }, |
| 246 { currentTime: 999, progress: 0.5 }, |
| 247 { currentTime: 1000, progress: 0.5 }, |
| 248 { currentTime: 1249, progress: 0.5 }, |
| 249 { currentTime: 1250, progress: 0 }, |
| 250 { currentTime: 1749, progress: 0 }, |
| 251 { currentTime: 1750, progress: 0.5 }, |
| 252 { currentTime: 2000, progress: 0.5 }, |
| 253 { currentTime: 2500, progress: 0.5 }, |
| 254 ] |
| 255 } |
| 256 ]; |
| 257 |
| 258 gStepTimingFunctionTests.forEach(function(options) { |
| 259 test(function(t) { |
| 260 var target = createDiv(t); |
| 261 var animation = target.animate(null, options.effect); |
| 262 options.conditions.forEach(function(condition) { |
| 263 animation.currentTime = condition.currentTime; |
| 264 assert_equals(animation.effect.getComputedTiming().progress, |
| 265 condition.progress, |
| 266 'Progress at ' + animation.currentTime + 'ms'); |
| 267 }); |
| 268 }, options.description); |
| 269 }); |
| 270 |
| 271 </script> |
| 272 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2695813009:
Import wpt@503f5b5f78ec4e87d144f78609f363f0ed0ea8db (Closed)
