LayoutTests/transitions/transition-end-event-prefixed-02.html - WebKit - Git at Google

 <!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-pre.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 transitionEventBox;

     function transitionEndEvent(e)
     {
         e.stopPropagation();
         transitionEventBox = e;
         shouldBe("transitionEventBox.currentTarget", "transitionEventBox.target");
         if (window.testRunner)
             testRunner.notifyDone();
         document.body.removeChild(testContainer);
     }

     testContainer.addEventListener('webkitTransitionEnd', transitionEndEvent, false);
     box.addEventListener('webkitTransitionEnd', transitionEndEvent, false);
 </script>
 <script src="../resources/js-test-post.js"></script>
 </body>
 </html>
	<!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-pre.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 transitionEventBox;

	function transitionEndEvent(e)
	{
	e.stopPropagation();
	transitionEventBox = e;
	shouldBe("transitionEventBox.currentTarget", "transitionEventBox.target");
	if (window.testRunner)
	testRunner.notifyDone();
	document.body.removeChild(testContainer);
	}

	testContainer.addEventListener('webkitTransitionEnd', transitionEndEvent, false);
	box.addEventListener('webkitTransitionEnd', transitionEndEvent, false);
	</script>
	<script src="../resources/js-test-post.js"></script>
	</body>
	</html>