third_party/WebKit/LayoutTests/animations/animation-iteration-event-short-iterations.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>Tests that iteration events are fired when the duration is very short.</title>
   5   <style>
   6     #box {
   7       position: relative;
   8       left: 100px;
   9       top: 10px;
  10       height: 100px;
  11       width: 100px;
  12       -webkit-animation-duration: 0.001s;
  13       -webkit-animation-name: anim;
  14       background-color: #999;
  15       -webkit-animation-iteration-count: 10;
  16     }
  17     @-webkit-keyframes anim {
  18         from { left: 200px; }
  19         to   { left: 300px; }
  20     }
  21   </style>
  22   <script>
  23     if (window.testRunner) {
  24         testRunner.dumpAsText();
  25         testRunner.waitUntilDone();
  26     }
  27
  28     function fail() {
  29       document.getElementById('result').innerHTML = 'FAIL: Got ' + count + ' webkitAnimationCount events';
  30     }
  31
  32     var count = 0;
  33     onload = function()
  34     {
  35         document.addEventListener('webkitAnimationIteration', function() {
  36           ++count;
  37         }, false);
  38
  39         document.addEventListener('webkitAnimationEnd', function() {
  40             // We collapse all iteration events that occur within a single
  41             // frame into a single event. See http://crbug.com/275263.
  42             if (count < 10)
  43                 document.getElementById('result').innerHTML = 'PASS: Got a reasonable number of webkitAnimationCount events';
  44             else
  45                 fail();
  46             if (window.testRunner)
  47                 testRunner.notifyDone();
  48         }, false);
  49
  50         // Animation begins once we append the DOM node to the document.
  51         var boxNode = document.createElement('div');
  52         boxNode.id = 'box';
  53         document.body.appendChild(boxNode);
  54     }
  55   </script>
  56 </head>
  57 <body>
  58 Tests that iteration events are fired when the duration is very short.
  59 <pre id="result">FAIL: No webkitAnimationEnd event received</pre>
  60 </body>
  61 </html>