PerformanceTests/Layout/layers_overlap_3d.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
     <head>
         <title>Performance tester for non-overlaping 3D layers</title>
         <style>
             .container {
                 width: 20px;
                 height: 20px;
                 border: 1px solid #AAA;
                 margin: 0 auto 5px;
                 -webkit-perspective: 400px;
             }

             .box {
                 width: 100%;
                 height: 100%;
                 position: absolute;
                 background: red;
                 -webkit-transform: translateZ( -200px );
             }
         </style>
         <script src="../resources/runner.js"></script>
     </head>
     <body>
         <pre id="log"></pre>
         <script>
             function createTestFunction(count) {
                 return function() {
                     var container = document.createElement("div");
                     for(i = 0; i < count; ++i) {
                         var outer = document.createElement('div');
                         outer.className = 'container';
                         var inner = document.createElement('div');
                         inner.className = 'box';
                         outer.appendChild(inner);
                         container.appendChild(outer);
                     }
                     document.body.appendChild(container);
                     // Force a layout update.
                     document.body.clientHeight;
                     container.remove();
                 }
             }
             PerfTestRunner.measureTime({run: createTestFunction(5000)});
         </script>
     </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Performance tester for non-overlaping 3D layers</title>
	<style>
	.container {
	width: 20px;
	height: 20px;
	border: 1px solid #AAA;
	margin: 0 auto 5px;
	-webkit-perspective: 400px;
	}

	.box {
	width: 100%;
	height: 100%;
	position: absolute;
	background: red;
	-webkit-transform: translateZ( -200px );
	}
	</style>
	<script src="../resources/runner.js"></script>
	</head>
	<body>
	<pre id="log"></pre>
	<script>
	function createTestFunction(count) {
	return function() {
	var container = document.createElement("div");
	for(i = 0; i < count; ++i) {
	var outer = document.createElement('div');
	outer.className = 'container';
	var inner = document.createElement('div');
	inner.className = 'box';
	outer.appendChild(inner);
	container.appendChild(outer);
	}
	document.body.appendChild(container);
	// Force a layout update.
	document.body.clientHeight;
	container.remove();
	}
	}
	PerfTestRunner.measureTime({run: createTestFunction(5000)});
	</script>
	</body>
	</html>