third_party/WebKit/LayoutTests/animations/animation-events-prefixed-01.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>Tests that prefixed animation events are correctly fired.</title>
   5   <style>
   6     #box {
   7       position: relative;
   8       left: 100px;
   9       top: 10px;
  10       height: 100px;
  11       width: 100px;
  12       background-color: #999;
  13     }
  14
  15     .animate {
  16       animation-duration: 0.3s;
  17       animation-name: anim;
  18     }
  19
  20     @keyframes anim {
  21         from { left: 200px; }
  22         to   { left: 300px; }
  23     }
  24   </style>
  25   <script>
  26     if (window.testRunner) {
  27         testRunner.dumpAsText();
  28         testRunner.waitUntilDone();
  29     }
  30
  31     var startEventReceived = false;
  32     var endEventReceived = false;
  33
  34     document.addEventListener('webkitAnimationStart', function() {
  35       startEventReceived = true;
  36     }, false);
  37
  38     document.addEventListener('webkitAnimationIteration', function() {
  39       if (startEventReceived && endEventReceived) {
  40         document.getElementById('result').innerHTML = 'PASS: All events have been received as expected.';
  41         if (window.testRunner)
  42             testRunner.notifyDone();
  43       }
  44     }, false);
  45
  46     document.addEventListener('webkitAnimationEnd', function() {
  47       endEventReceived = true;
  48       document.getElementById('box').className = '';
  49       // Launch again the animation to catch the animation iteration events this time.
  50       setTimeout(function () {
  51         document.getElementById('box').style.webkitAnimationIterationCount = "infinite";
  52         document.getElementById('box').className = 'animate';
  53       }, 200);
  54     }, false);
  55
  56     onload = function()
  57     {
  58       // Animation begins once we append the DOM node to the document.
  59       var boxNode = document.createElement('div');
  60       boxNode.id = 'box';
  61       boxNode.className = 'animate';
  62       document.body.appendChild(boxNode);
  63     }
  64   </script>
  65 </head>
  66 <body>
  67 Tests that prefixed animation events are correctly fired.
  68 <pre id="result">FAIL: No animation events received</pre>
  69 </body>
  70 </html>