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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>Tests that unprefixed animation events are correctly fired when listeners are on both versions.</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     function fail() {
  32       document.getElementById('result').innerHTML = 'FAIL: Got ' + iterationEventReceived + ' animationCount events and '
  33       + prefixedEventReceived + ' prefixed events.';
  34     }
  35
  36     var startEventReceived = false;
  37     var endEventReceived = false;
  38     var prefixedEventReceived = 0;
  39
  40     document.addEventListener('webkitAnimationStart', function() {
  41       prefixedEventReceived++;
  42     }, false);
  43
  44     document.addEventListener('animationstart', function() {
  45       startEventReceived = true;
  46     }, false);
  47
  48     document.addEventListener('animationiteration', function() {
  49       if (startEventReceived && endEventReceived && prefixedEventReceived == 0) {
  50         document.getElementById('result').innerHTML = 'PASS: All events have been received as expected.';
  51       } else
  52         fail();
  53       if (window.testRunner)
  54             testRunner.notifyDone();
  55     }, false);
  56
  57     document.addEventListener('webkitAnimationIteration', function() {
  58       prefixedEventReceived++;
  59     }, false);
  60
  61     document.addEventListener('webkitAnimationEnd', function() {
  62       prefixedEventReceived++;
  63     }, false);
  64
  65     document.addEventListener('animationend', function() {
  66       endEventReceived = true;
  67       document.getElementById('box').className = '';
  68       // Launch again the animation to catch the animation iteration events this time.
  69       setTimeout(function () {
  70         document.getElementById('box').style.animationIterationCount = "infinite";
  71         document.getElementById('box').className = 'animate';
  72       }, 200);
  73     }, false);
  74
  75     onload = function()
  76     {
  77       // Animation begins once we append the DOM node to the document.
  78       var boxNode = document.createElement('div');
  79       boxNode.id = 'box';
  80       boxNode.className = 'animate';
  81       document.body.appendChild(boxNode);
  82     }
  83   </script>
  84 </head>
  85 <body>
  86 Tests that unprefixed animation events are correctly fired when listeners are on both versions.
  87 <pre id="result">FAIL: No animation events received</pre>
  88 </body>
  89 </html>