1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Performance tester for non-overlaping 3D layers</title> 5 <style> 6 .container { 7 width: 20px; 8 height: 20px; 9 border: 1px solid #AAA; 10 margin: 0 auto 5px; 11 -webkit-perspective: 400px; 12 } 13 14 .box { 15 width: 100%; 16 height: 100%; 17 position: absolute; 18 background: red; 19 -webkit-transform: translateZ( -200px ); 20 } 21 </style> 22 <script src="../resources/runner.js"></script> 23 </head> 24 <body> 25 <pre id="log"></pre> 26 <script> 27 function createTestFunction(count) { 28 return function() { 29 var container = document.createElement("div"); 30 for(i = 0; i < count; ++i) { 31 var outer = document.createElement('div'); 32 outer.className = 'container'; 33 var inner = document.createElement('div'); 34 inner.className = 'box'; 35 outer.appendChild(inner); 36 container.appendChild(outer); 37 } 38 document.body.appendChild(container); 39 // Force a layout update. 40 document.body.clientHeight; 41 container.remove(); 42 } 43 } 44 PerfTestRunner.measureTime({run: createTestFunction(5000)}); 45 </script> 46 </body> 47 </html> 48
