<!DOCTYPE html>
<html>
<head>
  <title>Tests that unprefixed animation events are correctly fired when listeners are on both versions.</title>
  <style>
    #box {
      position: relative;
      left: 100px;
      top: 10px;
      height: 100px;
      width: 100px;
      background-color: #999;
    }

    .animate {
      animation-duration: 0.3s;
      animation-name: anim;
    }

    @keyframes anim {
        from { left: 200px; }
        to   { left: 300px; }
    }
  </style>
  <script>
    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

    function fail() {
      document.getElementById('result').innerHTML = 'FAIL: Got ' + iterationEventReceived + ' animationCount events and '
      + prefixedEventReceived + ' prefixed events.';
    }

    var startEventReceived = false;
    var endEventReceived = false;
    var prefixedEventReceived = 0;

    document.addEventListener('webkitAnimationStart', function() {
      prefixedEventReceived++;
    }, false);

    document.addEventListener('animationstart', function() {
      startEventReceived = true;
    }, false);

    document.addEventListener('animationiteration', function() {
      if (startEventReceived && endEventReceived && prefixedEventReceived == 0) {
        document.getElementById('result').innerHTML = 'PASS: All events have been received as expected.';
      } else
        fail();
      if (window.testRunner)
            testRunner.notifyDone();
    }, false);

    document.addEventListener('webkitAnimationIteration', function() {
      prefixedEventReceived++;
    }, false);

    document.addEventListener('webkitAnimationEnd', function() {
      prefixedEventReceived++;
    }, false);

    document.addEventListener('animationend', function() {
      endEventReceived = true;
      document.getElementById('box').className = '';
      // Launch again the animation to catch the animation iteration events this time.
      setTimeout(function () {
        document.getElementById('box').style.animationIterationCount = "infinite";
        document.getElementById('box').className = 'animate';
      }, 200);
    }, false);

    onload = function()
    {
      // Animation begins once we append the DOM node to the document.
      var boxNode = document.createElement('div');
      boxNode.id = 'box';
      boxNode.className = 'animate';
      document.body.appendChild(boxNode);
    }
  </script>
</head>
<body>
Tests that unprefixed animation events are correctly fired when listeners are on both versions.
<pre id="result">FAIL: No animation events received</pre>
</body>
</html>