blob: 0a009381333f9ab7e345ae25d90e3eb1f7726e43 [file] [log] [blame]
<!DOCTYPE html>
<script src="../../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>