LayoutTests/transitions/matched-transform-functions.html - WebKit - Git at Google

 <!DOCTYPE html>

 <html>
 <head>
   <style>
     #box {
       height: 100px;
       width: 100px;
       background-color: blue;
       -webkit-transition-property: -webkit-transform;
       -webkit-transition-duration: 3s;
       -webkit-transform: translate(0, 0) rotate(0);
     }

   </style>
   <script>
     if (window.testRunner) {
       testRunner.dumpAsText();
       testRunner.waitUntilDone();
     }

     function test()
     {
       var c = new WebKitCSSMatrix(window.getComputedStyle(document.getElementById('box')).webkitTransform);
       var result = (c.f < 200) ? 'PASS' : 'FAIL: transition should still be running, so y < 200';
       document.getElementById('result').innerHTML = result;

       if (window.testRunner)
           testRunner.notifyDone();
     }

     function startTest()
     {
       var box = document.getElementById('box');
       box.style.webkitTransform = 'translate(100px, 0) rotate(0)';

       window.setTimeout(function() {
         box.style.webkitTransform = 'translate(0, 200px) rotate(10deg)';
         window.setTimeout(function() {
           test();
         }, 200);
       }, 300);
     }
     window.addEventListener('load', startTest, false)
   </script>
 </head>
 <body>
 <p>Box should start moving right, then move down</p>
 <div id="box">
 </div>

 <div id="result">
 </div>
 </body>
 </html>
	<!DOCTYPE html>

	<html>
	<head>
	<style>
	#box {
	height: 100px;
	width: 100px;
	background-color: blue;
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 3s;
	-webkit-transform: translate(0, 0) rotate(0);
	}

	</style>
	<script>
	if (window.testRunner) {
	testRunner.dumpAsText();
	testRunner.waitUntilDone();
	}

	function test()
	{
	var c = new WebKitCSSMatrix(window.getComputedStyle(document.getElementById('box')).webkitTransform);
	var result = (c.f < 200) ? 'PASS' : 'FAIL: transition should still be running, so y < 200';
	document.getElementById('result').innerHTML = result;

	if (window.testRunner)
	testRunner.notifyDone();
	}

	function startTest()
	{
	var box = document.getElementById('box');
	box.style.webkitTransform = 'translate(100px, 0) rotate(0)';

	window.setTimeout(function() {
	box.style.webkitTransform = 'translate(0, 200px) rotate(10deg)';
	window.setTimeout(function() {
	test();
	}, 200);
	}, 300);
	}
	window.addEventListener('load', startTest, false)
	</script>
	</head>
	<body>
	<p>Box should start moving right, then move down</p>
	<div id="box">
	</div>

	<div id="result">
	</div>
	</body>
	</html>