PerformanceTests/ShadowDOM/ChangingSelectWithoutShadow.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     <h2>Selected</h2>
  10     <div id="selected"></div>
  11     <h2>NonSelected</h2>
  12     <div id="nonselected"></div>
  13 </div>
  14
  15 <script>
  16 var numDivsInHost = 100;
  17 var typeNames = ['A', 'B', 'C'];
  18 var array = new Array(numDivsInHost);
  19
  20 function setup()
  21 {
  22     var nDivs = numDivsInHost;
  23     var nonSelected = document.getElementById('nonselected');
  24
  25     for (var i = 0; i < nDivs; ++i) {
  26         var div = document.createElement('div');
  27         div.appendChild(document.createTextNode('div' + i));
  28         div.className = typeNames[i % typeNames.length]
  29         array[i] = div;
  30         nonSelected.appendChild(div);
  31     }
  32 }
  33
  34 function run()
  35 {
  36     var nDivs = numDivsInHost;
  37     var array = window.array;
  38
  39     var selected = document.getElementById('selected');
  40     var nonSelected = document.getElementById('nonselected');
  41
  42     for (var i = 0; i < 100; ++i) {
  43         for (var j = 0; j < typeNames.length; ++j) {
  44             for (var k = 0; k < nDivs; ++k) {
  45                 if (array[k].className == typeNames[j])
  46                     selected.appendChild(array[k]);
  47                 else
  48                     nonSelected.appendChild(array[k]);
  49             }
  50             selected.offsetLeft;
  51             nonSelected.offsetLeft;
  52         }
  53     }
  54 }
  55
  56 function done()
  57 {
  58     wrapper.innerHTML = '';
  59 }
  60
  61 setup();
  62
  63 PerfTestRunner.measureTime({
  64     description: "Measure distribution and layout performance when we do the almost same thing as select attribute of content element is changed using JavaScript",
  65     run: run,
  66     done: done
  67 });
  68 </script>
  69 </body>
  70 </html>