<!DOCTYPE html>

<script src="../js/resources/js-test-pre.js"></script>

<style>
#before:before,
#after:after {
    content: "";
    display: block;
    height: 50px;
    width: 50px;
    -webkit-transition: width 1ms;
    transition: width 1ms;
}

#before.transition:before,
#after.transition:after {
    height: 10px;
    width: 10px;
}

#before,
#after {
    display: inline-block;
    border: 1px solid black;
    background: red;
}

#after.transition,
#before.transition {
    background: green;
}
</style>

<div id="before"></div>
<div id="after"></div>

<script>
description('Transitions on :before and :after pseudo elements should run and fire DOM events');

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

var expectedEvents = [ ["width", "before", "::before"] , ["width", "after", "::after"] ];
var currentEvent = 0;

function recordTransitionEvent()
{
    shouldBe("event.propertyName", "expectedEvents[currentEvent][0]");
    shouldBe("event.target.id", "expectedEvents[currentEvent][1]");
    shouldBe("event.pseudoElement", "expectedEvents[currentEvent][2]");
    if (currentEvent == 1) {
        isSuccessfullyParsed();
        if (window.testRunner)
            testRunner.notifyDone();
    } else {
        currentEvent++;
        testTransition('after');
    }
}

function testTransition(id)
{
    var div = document.getElementById(id);
    div.className = 'transition';
}

onload = function() {
    document.addEventListener( 'transitionend', recordTransitionEvent);
    testTransition('before');
};
</script>