src/third_party/WebKit/PerformanceTests/ShadowDOM/shadow-style-share-with-distribution.html

   1 <!doctype html>
   2 <style>
   3   .foo {
   4     border: 1px solid black;
   5     padding: 10px;
   6   }
   7   .foo .bar.baz {
   8     color: blue;
   9   }
  10 </style>
  11 <script src="../resources/runner.js"></script>
  12 <script>
  13   var listSize = 100;
  14   window.onload = function() {
  15     var root = document.querySelector('#list').createShadowRoot();
  16     root.appendChild(document.createElement('content'));
  17
  18     PerfTestRunner.measureTime({
  19       description: "Measures performance of creating and rendering elements with shadow roots (contains class descendant selector styles).",
  20       setup: function() {
  21       },
  22       run: function() {
  23         var frag = document.createDocumentFragment();
  24         var tmpl = document.querySelector('#tmpl');
  25         var start = PerfTestRunner.now();
  26         var i = 0;
  27         do {
  28           frag.appendChild(tmpl.content.cloneNode(true));;
  29         } while (++i < listSize);
  30         document.querySelector('#list').appendChild(frag);
  31
  32         document.body.offsetHeight;
  33         return PerfTestRunner.now() - start;
  34       },
  35       done: function() {
  36         document.querySelector('#list').innerHTML = '';
  37       }
  38     });
  39   }
  40 </script>
  41 <template id="tmpl">
  42   <div class="foo">
  43     <div class="bar baz">item</div>
  44   </div>
  45 </template>
  46 <section id="list"></section>