LayoutTests/transitions/mixed-type.html - WebKit - Git at Google

 <!DOCTYPE html>
 <style>
 #box {
     width: 10%;
     height: 100px;
     background-color: green;
     -webkit-transition: all 1s linear;
 }

 #box.final {
     width: 400px;
     height: 90%;
 }
 </style>
 Tests transitions to and from a mix of absolute and percent values
 </p>
 <div style="width: 500px; height: 500px;">
   <div id="box"></div>
 </div>

 <div id="result">
 <script src="resources/transition-test-helpers.js"></script>
 <script type="text/javascript">

 const expectedValues = [
   // [time, element-id, property, expected-value, tolerance]
   // The transition takes 1 second, so we compute tolerance to allow
   // 10% or 100ms variance, (endValue - startValue) / 10.
   [0.5, 'box', 'width', 225, 35],
   [0.5, 'box', 'height', 275, 35],
 ];

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

 runTransitionTest(expectedValues, setupTest, usePauseAPI);
 </script>
	<!DOCTYPE html>
	<style>
	#box {
	width: 10%;
	height: 100px;
	background-color: green;
	-webkit-transition: all 1s linear;
	}

	#box.final {
	width: 400px;
	height: 90%;
	}
	</style>
	Tests transitions to and from a mix of absolute and percent values
	</p>
	<div style="width: 500px; height: 500px;">
	<div id="box"></div>
	</div>

	<div id="result">
	<script src="resources/transition-test-helpers.js"></script>
	<script type="text/javascript">

	const expectedValues = [
	// [time, element-id, property, expected-value, tolerance]
	// The transition takes 1 second, so we compute tolerance to allow
	// 10% or 100ms variance, (endValue - startValue) / 10.
	[0.5, 'box', 'width', 225, 35],
	[0.5, 'box', 'height', 275, 35],
	];

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

	runTransitionTest(expectedValues, setupTest, usePauseAPI);
	</script>