| <!doctype html> |
| <style> |
| .foo { |
| border: 1px solid black; |
| padding: 10px; |
| } |
| .foo .bar.baz { |
| color: blue; |
| } |
| </style> |
| <script src="../resources/runner.js"></script> |
| <script> |
| var listSize = 100; |
| window.onload = function() { |
| var root = document.querySelector('#list').createShadowRoot(); |
| root.appendChild(document.createElement('content')); |
| |
| PerfTestRunner.measureTime({ |
| setup: function() { |
| }, |
| run: function() { |
| var frag = document.createDocumentFragment(); |
| var tmpl = document.querySelector('#tmpl'); |
| var start = PerfTestRunner.now(); |
| var i = 0; |
| do { |
| frag.appendChild(tmpl.content.cloneNode(true));; |
| } while (++i < listSize); |
| document.querySelector('#list').appendChild(frag); |
| |
| document.body.offsetHeight; |
| return PerfTestRunner.now() - start; |
| }, |
| done: function() { |
| document.querySelector('#list').innerHTML = ''; |
| } |
| }); |
| } |
| </script> |
| <template id="tmpl"> |
| <div class="foo"> |
| <div class="bar baz">item</div> |
| </div> |
| </template> |
| <section id="list"></section> |
