1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script type="text/javascript" src="../resources/runner.js"></script> 5 </head> 6 <body> 7 8 <div id="wrapper"> 9 <div id="host"></div> 10 </div> 11 12 <script> 13 var numDivsInHost = 100; 14 var typeNames = ['A', 'B', 'C']; 15 var array = new Array(numDivsInHost); 16 17 function setup() 18 { 19 var nDivs = numDivsInHost; 20 21 window.shadowRoot = host.webkitCreateShadowRoot(); 22 shadowRoot.innerHTML = '<h2>Selected</h2><div id="selected"><content select=".selected"></content></div><h2>NonSelected</h2><div id="nonselected"><content></content></div>'; 23 24 for (var i = 0; i < nDivs; ++i) { 25 var div = document.createElement('div'); 26 div.appendChild(document.createTextNode('div' + i)); 27 div.className = typeNames[i % typeNames.length]; 28 host.appendChild(div); 29 array[i] = div; 30 } 31 } 32 33 function run() 34 { 35 var nDivs = numDivsInHost; 36 var array = window.array; 37 38 var selected = shadowRoot.getElementById('selected'); 39 var nonSelected = shadowRoot.getElementById('nonselected'); 40 var contentSelected = selected.querySelector('content'); 41 42 for (var i = 0; i < 100; ++i) { 43 for (var j = 0; j < typeNames.length; ++j) { 44 contentSelected.select = '.' + typeNames[j]; 45 46 selected.offsetLeft; 47 nonSelected.offsetLeft; 48 } 49 } 50 } 51 52 function done() 53 { 54 wrapper.innerHTML = ''; 55 } 56 57 58 setup(); 59 60 PerfTestRunner.measureTime({ 61 description: "Measure distribution and layout performance when select attribute is changed", 62 run: run, 63 done: done 64 }); 65 </script> 66 </body> 67 </html> 68
