LayoutTests/fast/css-generated-content/pseudo-transition-event.html - WebKit - Git at Google

 <!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>
	<!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>