<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <style>
    .box {
        position: relative;
        left: 0;
        height: 100px;
        width: 100px;
        margin: 10px;
        background-color: blue;
        -webkit-transition-property: width;
        -webkit-transition-duration: 0.5s;
    }
    </style>
    <script src="transition-end-event-helpers.js"></script>
    <script src="../resources/js-test.js"></script>
    <script type="text/javascript">
    function runAnimation() {
        var box = document.getElementById('box1');
        box.style.width = '200px';
    }
  </script>
</head>
<body onLoad="runAnimation()">
<script type="text/javascript">
    description("Test to make sure that if prefixed transition events are modified we correctly modify unprefixed events.");

    if (window.testRunner)
        testRunner.waitUntilDone();

    var testContainer = document.createElement("div");
    document.body.appendChild(testContainer);

    testContainer.innerHTML = '<div id="box1" class="box"></div>';
    var box = document.getElementById('box1');

    var transitionEventBox;

    function transitionEndEvent(e)
    {
        e.stopPropagation();
        transitionEventBox = e;
        shouldBe("transitionEventBox.currentTarget", "transitionEventBox.target");
        if (window.testRunner)
            testRunner.notifyDone();
        document.body.removeChild(testContainer);
    }

    testContainer.addEventListener('webkitTransitionEnd', transitionEndEvent, false);
    box.addEventListener('webkitTransitionEnd', transitionEndEvent, false);
</script>
</body>
</html>