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