LayoutTests/transitions/default-timing-function.html - WebKit - Git at Google

 <!DOCTYPE html>

 <html>
 <head>
   <style>
     .container {
       position: relative;
     }

     .box {
       position: relative;
       height: 100px;
       width: 100px;
       background-color: green;
       -webkit-transition-duration: 1s;
     }

     #box {
       -webkit-transition-property: left;
     }

     #box.final {
       left: 400px;
     }

     #box2 {
       -webkit-transition-property: -webkit-transform;
     }

     #box2.final {
       -webkit-transform: translateX(400px);
     }

     #indicator {
       position: absolute;
       left: 322px;
       height: 200px;
       background-color: red;
     }

   </style>
   <script src="resources/transition-test-helpers.js"></script>
   <script>

     const expectedValues = [
       // [time, element-id, property, expected-value, tolerance]
       [0.5, 'box', 'left', 322, 5],
       [0.5, 'box2', '-webkit-transform.4', 322, 5],
     ];

     function setupTest()
     {
       document.getElementById('box').className = 'box final';
       document.getElementById('box2').className = 'box final';
     }

     var doPixelTest = true;
     runTransitionTest(expectedValues, setupTest, usePauseAPI, doPixelTest);
   </script>
 </head>
 <body>

   <!-- The pixel result should show a green bar, with no red visible. -->
   <div class="container">
     <div id="indicator" class="box"></div>

     <div id="box" class="box"></div>
     <div id="box2" class="box"></div>
   </div>

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

 </body>
 </html>
	<!DOCTYPE html>

	<html>
	<head>
	<style>
	.container {
	position: relative;
	}

	.box {
	position: relative;
	height: 100px;
	width: 100px;
	background-color: green;
	-webkit-transition-duration: 1s;
	}

	#box {
	-webkit-transition-property: left;
	}

	#box.final {
	left: 400px;
	}

	#box2 {
	-webkit-transition-property: -webkit-transform;
	}

	#box2.final {
	-webkit-transform: translateX(400px);
	}

	#indicator {
	position: absolute;
	left: 322px;
	height: 200px;
	background-color: red;
	}

	</style>
	<script src="resources/transition-test-helpers.js"></script>
	<script>

	const expectedValues = [
	// [time, element-id, property, expected-value, tolerance]
	[0.5, 'box', 'left', 322, 5],
	[0.5, 'box2', '-webkit-transform.4', 322, 5],
	];

	function setupTest()
	{
	document.getElementById('box').className = 'box final';
	document.getElementById('box2').className = 'box final';
	}

	var doPixelTest = true;
	runTransitionTest(expectedValues, setupTest, usePauseAPI, doPixelTest);
	</script>
	</head>
	<body>

	<!-- The pixel result should show a green bar, with no red visible. -->
	<div class="container">
	<div id="indicator" class="box"></div>

	<div id="box" class="box"></div>
	<div id="box2" class="box"></div>
	</div>

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

	</body>
	</html>