third_party/WebKit/LayoutTests/animations/timing-model.html

   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 var prefix = 'animation' in document.body.style ? '' : '-webkit-';
 287 function assertIterationTime(animation, expectations) {
 288  testElement.style.setProperty(prefix + 'animation', 'invalid ' + animation);
 289  update();
 290
 291  expectations.forEach(function(expectation) {
 292    if (expectation.is !== null && expectation.is != Math.round(expectation.is * 100) / 100) {
 293      console.log('ERROR: Test requires too much precision. ' + JSON.stringify(expectation));
 294      return;
 295    }
 296    testElement.style.setProperty(prefix + 'animation-name', 'invalid');
 297    update();
 298
 299    var delay = expectation.at * -1;
 300    testElement.style.setProperty(prefix + 'animation-delay', delay + 's');
 301    testElement.style.setProperty(prefix + 'animation-name', 'test');
 302    update();
 303    // FIXME: Set play-state: paused before starting the animation.
 304    // For now, updating the style another two times makes this work in WebKit/Blink
 305    testElement.style.setProperty(prefix + 'animation-name', 'test');
 306    update();
 307    testElement.style.setProperty(prefix + 'animation-name', 'test');
 308    update();
 309
 310    var result = getComputedStyle(testElement).left;
 311    if (result === 'auto') {
 312      result = null;
 313    } else {
 314      result = Math.round(Number(result.replace(/px$/, '')) * 100) / 100;
 315    }
 316    if (result === expectation.is) {
 317      log('PASS: [' + animation + '] iteration time was [' + expectation.is + '] at ' + expectation.at + 's');
 318    } else {
 319      log('FAIL: [' + animation + '] iteration time was [' + result + '] at ' + expectation.at + 's' + ' expected [' + expectation.is + ']', 'fail');
 320    }
 321  });
 322 }
 323 </script>
 324 <style>
 325 body {
 326    white-space: pre;
 327    font-family: monospace;
 328 }
 329 .fail {
 330    font-weight: bold;
 331    color: red;
 332 }
 333 @-webkit-keyframes test {
 334    0% {
 335        left: 0px;
 336    }
 337    100% {
 338        left: 1px;
 339    }
 340 }
 341 @keyframes test {
 342    0% {
 343        left: 0px;
 344    }
 345    100% {
 346        left: 1px;
 347    }
 348 }
 349 </style>