src/third_party/WebKit/LayoutTests/animations/timing-properties-do-not-trigger-animation.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css">
   5     #target {
   6       height: 50px;
   7       width: 50px;
   8       background-color: red;
   9     }
  10     .animated {
  11       -webkit-animation: test 1ms;
  12       animation: test 1ms;
  13     }
  14     .updated-timing {
  15       -webkit-animation-duration: 2ms;
  16       animation-duration: 2ms;
  17       /* Default is 1 */
  18       -webkit-animation-iteration-count: 2;
  19       animation-iteration-count: 2;
  20       /* Default is 0 */
  21       -webkit-animation-delay: 1ms;
  22       animation-delay: 1ms;
  23       /* Default is normal */
  24       -webkit-animation-direction: reverse;
  25       animation-direction: reverse;
  26       /* Default is none */
  27       -webkit-animation-fill-mode: forwards;
  28       animation-fill-mode: forwards;
  29       /* Default is ease */
  30       -webkit-animation-timing-function: linear;
  31       animation-timing-function: linear;
  32     }
  33     @-webkit-keyframes test {
  34         from { -webkit-transform: translateX(100px); }
  35         to   { -webkit-transform: translateX(300px); }
  36     }
  37     @keyframes test {
  38         from { -webkit-transform: translateX(100px); }
  39         to   { -webkit-transform: translateX(300px); }
  40     }
  41   </style>
  42   <script type="text/javascript">
  43     if (window.testRunner) {
  44       testRunner.dumpAsText();
  45       testRunner.waitUntilDone();
  46     }
  47
  48     function go() {
  49       var target = document.getElementById('target');
  50       target.addEventListener('webkitAnimationEnd', updateTiming);
  51       target.classList.add('animated');
  52     }
  53
  54     var timeoutId;
  55     function updateTiming(message) {
  56       document.getElementById('result').innerHTML = 'First animation completed<br>';
  57       var target = document.getElementById('target');
  58       target.removeEventListener('webkitAnimationEnd', updateTiming);
  59       target.addEventListener('webkitAnimationEnd', failTest);
  60       setTimeout(function() {
  61         target.classList.add('updated-timing');
  62       }, 0);
  63       timeoutId = setTimeout(passTest, 100);
  64     }
  65
  66     function failTest() {
  67       clearTimeout(timeoutId);
  68       document.getElementById('result').innerHTML += 'FAIL: Animation restarted';
  69       if (window.testRunner) {
  70         testRunner.notifyDone();
  71       }
  72     }
  73
  74     function passTest() {
  75       document.getElementById('result').innerHTML += 'PASS: Animation did not restart';
  76       if (window.testRunner) {
  77         testRunner.notifyDone();
  78       }
  79     }
  80   </script>
  81 </head>
  82 <body onload="go()">
  83   <p>
  84     Tests that setting the iteration count, delay, duration, direction, fill
  85     mode or timing function does not trigger an animation.
  86   </p>
  87   <div id="target"></div>
  88   <div id="result"></div>
  89 </body>
  90 </html>