LayoutTests/transitions/interrupt-transform-transition.html - WebKit - Git at Google

 <html>
 <head>
   <style>
     .box {
       position: relative;
       top: 0;
       left: 0;
       width: 100px;
       height: 100px;
       background-color: blue;
       -webkit-transition-property: -webkit-transform;
       -webkit-transition-duration: 2s;
       -webkit-transform: translate(0, 0);
     }
   </style>
   <script>
     if (window.testRunner) {
       testRunner.dumpAsText();
       testRunner.waitUntilDone();
     }

     function test()
     {
       var t = window.getComputedStyle(document.getElementById('box')).webkitTransform;
       // grab the x value from the matrix()
       var lastValueRE = /([\.\d]+),[^,]+\)$/;
       var xTranslate = lastValueRE.exec(t)[1];
       var result = (xTranslate > 0) ? 'PASS' : 'FAIL: transition should be re-targeted from 200px in x, so x > 0';
       document.getElementById('result').innerHTML = result;

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

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

       window.setTimeout(function() {
         box.style.webkitTransform = 'translate(0, 200px)';
         window.setTimeout(test, 0);
       }, 300);

     }
   </script>
 </head>
 <body onload="startTest()">
   <p>Interrupted transition should not jump back to pre-transition transform</p>
   <div id="box" class="box">
   </div>
   <div id="result">
   </div>
 </body>
 </html>
	<html>
	<head>
	<style>
	.box {
	position: relative;
	top: 0;
	left: 0;
	width: 100px;
	height: 100px;
	background-color: blue;
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 2s;
	-webkit-transform: translate(0, 0);
	}
	</style>
	<script>
	if (window.testRunner) {
	testRunner.dumpAsText();
	testRunner.waitUntilDone();
	}

	function test()
	{
	var t = window.getComputedStyle(document.getElementById('box')).webkitTransform;
	// grab the x value from the matrix()
	var lastValueRE = /([\.\d]+),[^,]+\)$/;
	var xTranslate = lastValueRE.exec(t)[1];
	var result = (xTranslate > 0) ? 'PASS' : 'FAIL: transition should be re-targeted from 200px in x, so x > 0';
	document.getElementById('result').innerHTML = result;

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

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

	window.setTimeout(function() {
	box.style.webkitTransform = 'translate(0, 200px)';
	window.setTimeout(test, 0);
	}, 300);

	}
	</script>
	</head>
	<body onload="startTest()">
	<p>Interrupted transition should not jump back to pre-transition transform</p>
	<div id="box" class="box">
	</div>
	<div id="result">
	</div>
	</body>
	</html>