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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>Tests that unprefixed animation events are correctly fired when using html event listeners.</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     function recordAnimationStart() {
  35       startEventReceived = true;
  36     }
  37
  38     function recordAnimationIteration() {
  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     }
  45
  46     function recordAnimationEnd() {
  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.animationIterationCount = "infinite";
  52         document.getElementById('box').className = 'animate';
  53       }, 200);
  54     }
  55   </script>
  56 </head>
  57 <body>
  58 Tests that unprefixed animation events are correctly fired when using html event listeners.
  59 <pre id="result">FAIL: No animation events received</pre>
  60 <div id="box" onanimationstart="recordAnimationStart();" onanimationend="recordAnimationEnd();" onanimationiteration="recordAnimationIteration();" class="animate"></div>
  61 </body>
  62 </html>