LayoutTests/animations/animation-end-event-short-iterations.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>Test animations with repeated iterations and short loops</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: 2;
  16     }
  17     @-webkit-keyframes anim {
  18         from { left: 200px; }
  19         to   { left: 300px; }
  20     }
  21   </style>
  22   <script>
  23     if (window.layoutTestController) {
  24         layoutTestController.dumpAsText();
  25         layoutTestController.waitUntilDone();
  26     }
  27
  28     onload = function()
  29     {
  30         document.addEventListener('webkitAnimationEnd', function() {
  31             document.getElementById('result').innerHTML = 'PASS: got webkitAnimationEnd event';
  32             if (window.layoutTestController)
  33                 layoutTestController.notifyDone();
  34         }, false);
  35
  36         // Animation begins once we append the DOM node to the document.
  37         var boxNode = document.createElement('div');
  38         boxNode.id = 'box';
  39         document.body.appendChild(boxNode);
  40     }
  41   </script>
  42 </head>
  43 <body>
  44 Checks that we still end an animation properly (i.e. fire a webkitAnimationEnd
  45 event) when using more than one iteration with very short durations.
  46 <pre id="result">FAIL: no webkitAnimationEnd event received</pre>
  47 </body>
  48 </html>