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 run: function() { 13 var list = document.querySelector('#list'); 14 var tmpl = document.querySelector("#tmpl"); 15 list.innerHTML = ''; 16 var start = PerfTestRunner.now(); 17 var i = 0; 18 do { 19 var host = document.createElement('div'); 20 var root = host.createShadowRoot(); 21 root.appendChild(tmpl.content.cloneNode(true)); 22 var light = document.createElement('div'); 23 list.appendChild(host); 24 } while (++i < listSize); 25 26 document.body.offsetHeight; 27 return PerfTestRunner.now() - start; 28 } 29 }); 30 } 31 </script> 32 <template id="tmpl"> 33 <style> 34 .foo .bar .foo.bar.baz { 35 color: blue; 36 } 37 .bar.baz { 38 color: red; 39 } 40 </style> 41 <div class="foo"> 42 <div class="bar"> 43 <div class="foo bar baz">item</div> 44 </div> 45 </div> 46 <content></content> 47 </template> 48 <section id="list"></section> 49
