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