<!DOCTYPE html>
<html>
<head>
  <title>Test mixing prefixed and unprefixed events</title>
  <style>
    #box {
        position: absolute;
        left: 0;
        top: 200px;
        height: 100px;
        width: 100px;
        background-color: blue;
        animation-duration: 100ms;
        animation-iteration-count: 2;
    }
    @keyframes move {
        from { left: 0px; }
        to   { left: 100px; }
    }
    </style>
    <script>

if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}

var results;

function dump(msg) {
    results.innerHTML += msg + "<br/>";
}

function handleEvent(event) {
    dump(event.type + ": " + event.animationName);
    if (event.type == "animationend" && window.testRunner)
        testRunner.notifyDone();
}

function handlePrefixedEvent(event) {
    dump("FAIL -- " + event.type + ": " + event.animationName);
}

function init() {
    results = document.getElementById("results");
    var box = document.getElementById("box");
    box.addEventListener("animationstart", handleEvent, false);
    box.addEventListener("animationiteration", handleEvent, false);
    box.addEventListener("animationend", handleEvent, false);
    box.addEventListener("webkitAnimationStart", handlePrefixedEvent, false);
    box.addEventListener("webkitAnimationIteration", handlePrefixedEvent, false);
    box.addEventListener("webkitAnimationEnd", handlePrefixedEvent, false);
    box.style.animationName = "move";
}

window.addEventListener("load", init, false);

  </script>
</head>
<body>
This test performs two iterations of an animation. The animation should fire all three events (start, iteration, end).
<div id="box">
</div>
<div id="results">
</div>
</body>
</html>