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