third_party/WebKit/PerformanceTests/ShadowDOM/shadow-style-share.html

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