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 PerfTestRunner.forceLayoutOrFullFrame(); | 22 PerfTestRunner.forceLayout(); |
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 |