third_party/WebKit/LayoutTests/animations/events-with-short-duration-and-delay.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>Test events when the animation has a short duration and is delayed</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-delay: 0.001s;
  14       -webkit-animation-name: anim;
  15       background-color: #999;
  16       -webkit-animation-iteration-count: 2;
  17     }
  18     @-webkit-keyframes anim {
  19         from { left: 200px; }
  20         to   { left: 300px; }
  21     }
  22   </style>
  23   <script>
  24     if (window.testRunner) {
  25         testRunner.dumpAsText();
  26         testRunner.waitUntilDone();
  27     }
  28
  29     onload = function()
  30     {
  31         document.addEventListener('webkitAnimationStart', function() {
  32             document.getElementById('result').innerHTML = 'PASS: got webkitAnimationStart event';
  33         }, false);
  34         document.addEventListener('webkitAnimationEnd', function() {
  35             document.getElementById('result').innerHTML += '<br>PASS: got webkitAnimationEnd event';
  36             if (window.testRunner)
  37                 testRunner.notifyDone();
  38         }, false);
  39
  40         // Animation begins once we append the DOM node to the document.
  41         var boxNode = document.createElement('div');
  42         boxNode.id = 'box';
  43         document.body.appendChild(boxNode);
  44     }
  45   </script>
  46 </head>
  47 <body>
  48 Test events when the animation has a short duration and is delayed.
  49 <pre id="result">FAIL: No events received</pre>
  50 </body>
  51 </html>