| OLD | NEW |
|---|
| (Empty) |
| 1 <!doctype html> | |
| 2 <meta charset="utf-8"> | |
| 3 <body> | |
| 4 <script> | |
| 5 onload = function() { | |
| 6 | |
| 7 log('Sanity tests:'); | |
| 8 assertIterationTime('1s linear', [ | |
| 9 {is: null, at: -1}, | |
| 10 {is: 0, at: 0}, | |
| 11 {is: 0.5, at: 0.5}, | |
| 12 {is: 0.2, at: 0.2}, | |
| 13 {is: 0.8, at: 0.8}, | |
| 14 {is: null, at: 2}, | |
| 15 ]); | |
| 16 | |
| 17 | |
| 18 log('\nFill-mode:'); | |
| 19 assertIterationTime('1s none', [ | |
| 20 {is: null, at: -1}, | |
| 21 {is: null, at: 2}, | |
| 22 ]); | |
| 23 | |
| 24 assertIterationTime('1s both', [ | |
| 25 {is: 0, at: -1}, | |
| 26 {is: 1, at: 2}, | |
| 27 ]); | |
| 28 | |
| 29 assertIterationTime('1s forwards', [ | |
| 30 {is: null, at: -1}, | |
| 31 {is: 1, at: 2}, | |
| 32 ]); | |
| 33 | |
| 34 assertIterationTime('1s backwards', [ | |
| 35 {is: 0, at: -1}, | |
| 36 {is: null, at: 2}, | |
| 37 ]); | |
| 38 | |
| 39 | |
| 40 log('\nFill-mode + reverse direction:'); | |
| 41 assertIterationTime('1s none reverse', [ | |
| 42 {is: null, at: -1}, | |
| 43 {is: null, at: 2}, | |
| 44 ]); | |
| 45 | |
| 46 assertIterationTime('1s both reverse', [ | |
| 47 {is: 1, at: -1}, | |
| 48 {is: 0, at: 2}, | |
| 49 ]); | |
| 50 | |
| 51 assertIterationTime('1s forwards reverse', [ | |
| 52 {is: null, at: -1}, | |
| 53 {is: 0, at: 2}, | |
| 54 ]); | |
| 55 | |
| 56 assertIterationTime('1s backwards reverse', [ | |
| 57 {is: 1, at: -1}, | |
| 58 {is: null, at: 2}, | |
| 59 ]); | |
| 60 | |
| 61 | |
| 62 log('\nEnd exclusive timing:') | |
| 63 assertIterationTime('1s', [ | |
| 64 {is: null, at: 1}, | |
| 65 ]); | |
| 66 | |
| 67 | |
| 68 log('\nZero duration:') | |
| 69 assertIterationTime('none', [ | |
| 70 {is: null, at: -1}, | |
| 71 {is: null, at: 0}, | |
| 72 {is: null, at: 1}, | |
| 73 ]); | |
| 74 | |
| 75 assertIterationTime('both', [ | |
| 76 {is: 0, at: -1}, | |
| 77 {is: 1, at: 0}, | |
| 78 {is: 1, at: 1}, | |
| 79 ]); | |
| 80 | |
| 81 assertIterationTime('forwards', [ | |
| 82 {is: null, at: -1}, | |
| 83 {is: 1, at: 0}, | |
| 84 {is: 1, at: 1}, | |
| 85 ]); | |
| 86 | |
| 87 assertIterationTime('backwards', [ | |
| 88 {is: 0, at: -1}, | |
| 89 {is: null, at: 0}, | |
| 90 {is: null, at: 1}, | |
| 91 ]); | |
| 92 | |
| 93 | |
| 94 log('\nZero duration + reverse direction:') | |
| 95 assertIterationTime('none reverse', [ | |
| 96 {is: null, at: -1}, | |
| 97 {is: null, at: 0}, | |
| 98 {is: null, at: 1}, | |
| 99 ]); | |
| 100 | |
| 101 assertIterationTime('both reverse', [ | |
| 102 {is: 1, at: -1}, | |
| 103 {is: 0, at: 0}, | |
| 104 {is: 0, at: 1}, | |
| 105 ]); | |
| 106 | |
| 107 assertIterationTime('forwards reverse', [ | |
| 108 {is: null, at: -1}, | |
| 109 {is: 0, at: 0}, | |
| 110 {is: 0, at: 1}, | |
| 111 ]); | |
| 112 | |
| 113 assertIterationTime('backwards reverse', [ | |
| 114 {is: 1, at: -1}, | |
| 115 {is: null, at: 0}, | |
| 116 {is: null, at: 1}, | |
| 117 ]); | |
| 118 | |
| 119 | |
| 120 log('\nZero iterations:') | |
| 121 assertIterationTime('1s 0s 0 none', [ | |
| 122 {is: null, at: -1}, | |
| 123 {is: null, at: 0}, | |
| 124 {is: null, at: 0.5}, | |
| 125 {is: null, at: 2}, | |
| 126 ]); | |
| 127 | |
| 128 assertIterationTime('1s 0s 0 both', [ | |
| 129 {is: 0, at: -1}, | |
| 130 {is: 0, at: 0}, | |
| 131 {is: 0, at: 2}, | |
| 132 ]); | |
| 133 | |
| 134 assertIterationTime('1s 0s 0 forwards', [ | |
| 135 {is: null, at: -1}, | |
| 136 {is: 0, at: 0}, | |
| 137 {is: 0, at: 2}, | |
| 138 ]); | |
| 139 | |
| 140 assertIterationTime('1s 0s 0 backwards', [ | |
| 141 {is: 0, at: -1}, | |
| 142 {is: null, at: 0}, | |
| 143 {is: null, at: 2}, | |
| 144 ]); | |
| 145 | |
| 146 | |
| 147 log('\nZero iterations, zero duration:') | |
| 148 assertIterationTime('0s 0s 0 none', [ | |
| 149 {is: null, at: -1}, | |
| 150 {is: null, at: 0}, | |
| 151 {is: null, at: 2}, | |
| 152 ]); | |
| 153 | |
| 154 assertIterationTime('0s 0s 0 both', [ | |
| 155 {is: 0, at: -1}, | |
| 156 {is: 0, at: 0}, | |
| 157 {is: 0, at: 1}, | |
| 158 ]); | |
| 159 | |
| 160 assertIterationTime('0s 0s 0 forwards', [ | |
| 161 {is: null, at: -1}, | |
| 162 {is: 0, at: 0}, | |
| 163 {is: 0, at: 1}, | |
| 164 ]); | |
| 165 | |
| 166 assertIterationTime('0s 0s 0 backwards', [ | |
| 167 {is: 0, at: -1}, | |
| 168 {is: null, at: 0}, | |
| 169 {is: null, at: 1}, | |
| 170 ]); | |
| 171 | |
| 172 | |
| 173 log('\nMultiple iterations:') | |
| 174 assertIterationTime('1s 2 linear', [ | |
| 175 {is: null, at: -1}, | |
| 176 {is: 0, at: 0}, | |
| 177 {is: 0.4, at: 0.4}, | |
| 178 {is: 0, at: 1}, | |
| 179 {is: 0.6, at: 1.6}, | |
| 180 {is: null, at: 2}, | |
| 181 ]); | |
| 182 | |
| 183 assertIterationTime('1s 2 linear reverse', [ | |
| 184 {is: 1, at: 0}, | |
| 185 {is: 0.6, at: 0.4}, | |
| 186 {is: 1, at: 1}, | |
| 187 {is: 0.4, at: 1.6}, | |
| 188 ]); | |
| 189 | |
| 190 assertIterationTime('1s 2 linear alternate', [ | |
| 191 {is: 0, at: 0}, | |
| 192 {is: 0.4, at: 0.4}, | |
| 193 {is: 1, at: 1}, | |
| 194 {is: 0.4, at: 1.6}, | |
| 195 ]); | |
| 196 | |
| 197 assertIterationTime('1s 2 linear alternate-reverse', [ | |
| 198 {is: 1, at: 0}, | |
| 199 {is: 0.6, at: 0.4}, | |
| 200 {is: 0, at: 1}, | |
| 201 {is: 0.6, at: 1.6}, | |
| 202 ]); | |
| 203 | |
| 204 | |
| 205 log('\nFractional iterations:') | |
| 206 assertIterationTime('1s 0.5 linear', [ | |
| 207 {is: null, at: -1}, | |
| 208 {is: 0, at: 0}, | |
| 209 {is: 0.2, at: 0.2}, | |
| 210 {is: null, at: 0.5}, | |
| 211 ]); | |
| 212 | |
| 213 assertIterationTime('1s 1.5 linear', [ | |
| 214 {is: null, at: -1}, | |
| 215 {is: 0, at: 0}, | |
| 216 {is: 0.5, at: 0.5}, | |
| 217 {is: 0, at: 1}, | |
| 218 {is: 0.4, at: 1.4}, | |
| 219 {is: null, at: 1.5}, | |
| 220 ]); | |
| 221 | |
| 222 assertIterationTime('1s 1.5 linear reverse', [ | |
| 223 {is: null, at: -1}, | |
| 224 {is: 1, at: 0}, | |
| 225 {is: 0.5, at: 0.5}, | |
| 226 {is: 1, at: 1}, | |
| 227 {is: 0.6, at: 1.4}, | |
| 228 {is: null, at: 1.5}, | |
| 229 ]); | |
| 230 | |
| 231 assertIterationTime('1s 1.6 linear forwards', [ | |
| 232 {is: 0.6, at: 2}, | |
| 233 ]); | |
| 234 | |
| 235 assertIterationTime('1s 1.6 linear forwards reverse ', [ | |
| 236 {is: 0.4, at: 2}, | |
| 237 ]); | |
| 238 | |
| 239 assertIterationTime('1s 0.6 linear backwards reverse', [ | |
| 240 {is: 1, at: -1}, | |
| 241 ]); | |
| 242 | |
| 243 | |
| 244 log('\nInfinite iterations:') | |
| 245 assertIterationTime('1s infinite linear', [ | |
| 246 {is: 0, at: 1}, | |
| 247 {is: 0, at: 10}, | |
| 248 {is: 0, at: 1000}, | |
| 249 {is: 0.4, at: 1000.4}, | |
| 250 ]); | |
| 251 | |
| 252 | |
| 253 log('\nInfinite iterations, zero duration:') | |
| 254 assertIterationTime('0s infinite linear', [ | |
| 255 {is: null, at: -1}, | |
| 256 {is: null, at: 0}, | |
| 257 {is: null, at: 2}, | |
| 258 ]); | |
| 259 | |
| 260 }; | |
| 261 | |
| 262 if (window.testRunner) { | |
| 263 testRunner.dumpAsText(); | |
| 264 } | |
| 265 | |
| 266 var testElement = document.createElement('div'); | |
| 267 document.body.appendChild(testElement); | |
| 268 testElement.style.left = 'auto'; | |
| 269 | |
| 270 function update() { | |
| 271 document.body.offsetTop; | |
| 272 } | |
| 273 function log(message, klass) { | |
| 274 message += '\n'; | |
| 275 var child; | |
| 276 if (klass) { | |
| 277 child = document.createElement('span'); | |
| 278 child.classList.add(klass); | |
| 279 child.textContent = message; | |
| 280 } else { | |
| 281 child = document.createTextNode(message); | |
| 282 } | |
| 283 document.body.appendChild(child); | |
| 284 } | |
| 285 | |
| 286 function assertIterationTime(animation, expectations) { | |
| 287 testElement.style.setProperty('animation', 'invalid ' + animation); | |
| 288 update(); | |
| 289 | |
| 290 expectations.forEach(function(expectation) { | |
| 291 if (expectation.is !== null && expectation.is != Math.round(expectation.is *
100) / 100) { | |
| 292 console.log('ERROR: Test requires too much precision. ' + JSON.stringify(ex
pectation)); | |
| 293 return; | |
| 294 } | |
| 295 testElement.style.setProperty('animation-name', 'invalid'); | |
| 296 update(); | |
| 297 | |
| 298 var delay = expectation.at * -1; | |
| 299 testElement.style.setProperty('animation-delay', delay + 's'); | |
| 300 testElement.style.setProperty('animation-name', 'test'); | |
| 301 update(); | |
| 302 | |
| 303 var result = getComputedStyle(testElement).left; | |
| 304 if (result === 'auto') { | |
| 305 result = null; | |
| 306 } else { | |
| 307 result = Math.round(Number(result.replace(/px$/, '')) * 100) / 100; | |
| 308 } | |
| 309 if (result === expectation.is) { | |
| 310 log('PASS: [' + animation + '] iteration time was [' + expectation.is + ']
at ' + expectation.at + 's'); | |
| 311 } else { | |
| 312 log('FAIL: [' + animation + '] iteration time was [' + result + '] at ' + e
xpectation.at + 's' + ' expected [' + expectation.is + ']', 'fail'); | |
| 313 } | |
| 314 }); | |
| 315 } | |
| 316 </script> | |
| 317 <style> | |
| 318 body { | |
| 319 white-space: pre; | |
| 320 font-family: monospace; | |
| 321 } | |
| 322 .fail { | |
| 323 font-weight: bold; | |
| 324 color: red; | |
| 325 } | |
| 326 @keyframes test { | |
| 327 0% { | |
| 328 left: 0px; | |
| 329 } | |
| 330 100% { | |
| 331 left: 1px; | |
| 332 } | |
| 333 } | |
| 334 </style> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2979503002:
Move animation timing tests to subdirectory (Closed)
