src/third_party/WebKit/PerformanceTests/ShadowDOM/ChangingSelect.html

   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>