75 lines
1.5 KiB
HTML
75 lines
1.5 KiB
HTML
<!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>
|