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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>Tests that unprefixed animation events are correctly fired when using html event listeners (only unprefixed should be 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     var prefixedEventReceived = 0;
  34
  35     function recordPrefixedEvent() {
  36       prefixedEventReceived++;
  37     }
  38
  39     function recordAnimationStart() {
  40       startEventReceived = true;
  41     }
  42
  43     function recordAnimationIteration() {
  44       if (startEventReceived && endEventReceived && prefixedEventReceived == 0) {
  45         document.getElementById('result').innerHTML = 'PASS: All events have been received as expected.';
  46         if (window.testRunner)
  47             testRunner.notifyDone();
  48       }
  49     }
  50
  51     function recordAnimationEnd() {
  52       endEventReceived = true;
  53       document.getElementById('box').className = '';
  54       // Launch again the animation to catch the animation iteration events this time.
  55       setTimeout(function () {
  56         document.getElementById('box').style.animationIterationCount = "infinite";
  57         document.getElementById('box').className = 'animate';
  58       }, 200);
  59     }
  60   </script>
  61 </head>
  62 <body>
  63 Tests that unprefixed animation events are correctly fired when using html event listeners (only unprefixed should be fired).
  64 <pre id="result">FAIL: No animation events received</pre>
  65 <div id="box" onwebkitanimationstart="recordPrefixedEvent();" onwebkitanimationend="recordPrefixedEvent();" onwebkitanimationiteration="recordPrefixedEvent();" onanimationstart="recordAnimationStart();" onanimationend="recordAnimationEnd();" onanimationiteration="recordAnimationIteration();" class="animate"></div>
  66 </body>
  67 </html>