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