src/third_party/WebKit/PerformanceTests/ShadowDOM/shadow-style-share-media-query.html

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