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> 13var numDivsInHost = 100; 14var typeNames = ['A', 'B', 'C']; 15var array = new Array(numDivsInHost); 16 17function 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 33function 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 52function done() 53{ 54 wrapper.innerHTML = ''; 55} 56 57 58setup(); 59 60PerfTestRunner.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