<!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 transitionEventContainer;
    var transitionEventBox;

    function innerTransitionEndEvent(e)
    {
        transitionEventBox = e;
        e.preventDefault();
    }

    function outerTransitionEndEvent(e)
    {
        transitionEventContainer = e;
        shouldBe("transitionEventContainer.type", "transitionEventBox.type");
        shouldBe("transitionEventContainer.bubbles", "transitionEventBox.bubbles");
        shouldBe("transitionEventContainer.timeStamp", "transitionEventBox.timeStamp");
        shouldBe("transitionEventContainer.cancelable", "transitionEventBox.cancelable");
        shouldBe("transitionEventContainer.srcElement", "transitionEventBox.srcElement");
        shouldBe("transitionEventContainer.cancelBubble", "transitionEventBox.cancelBubble");
        shouldBe("transitionEventContainer.defaultPrevented", "transitionEventBox.defaultPrevented");
        shouldBe("transitionEventContainer.target", "transitionEventBox.target");
        shouldBe("transitionEventContainer.currentTarget", "testContainer");
        // TransitionEnd event specific properties.
        shouldBe("transitionEventContainer.pseudoElement", "transitionEventBox.pseudoElement");
        shouldBe("transitionEventContainer.elapsedTime", "transitionEventBox.elapsedTime");
        shouldBe("transitionEventContainer.propertyName", "transitionEventBox.propertyName");
        if (window.testRunner)
            testRunner.notifyDone();
        document.body.removeChild(testContainer);
    }

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