| <!DOCTYPE html> |
| <script src="../resources/runner.js"></script> |
| <script src="custom-detail-summary.js"></script> |
| <my-detail id="my-detail"> |
| <my-summary id="my-summary">summary</my-summary> |
| </my-detail> |
| <my-summary id="my-summary1">added-summary1</my-summary> |
| <my-summary id="my-summary2">added-summary2</my-summary> |
| <script> |
| const host = document.querySelector("#my-detail"); |
| const sum = document.querySelector("#my-summary"); |
| const sum1 = document.querySelector("#my-summary1"); |
| const sum2 = document.querySelector("#my-summary2"); |
| window.onload = function() { |
| for (let i = 0; i < 100; i++) { |
| host.appendChild(document.createElement("my-summary")); |
| } |
| PerfTestRunner.measureTime({ |
| description: "Measure performance of my-detail element in manual-slotting mode in shadow root when my-summary element is inserted when the child node is over 100.", |
| run: function() { |
| const start = PerfTestRunner.now(); |
| for (let i = 0; i < 100; i++) { |
| host.appendChild(sum1); |
| host.insertBefore(sum2, sum); |
| PerfTestRunner.forceLayout(); |
| sum1.remove(); |
| sum2.remove(); |
| PerfTestRunner.forceLayout(); |
| } |
| |
| return PerfTestRunner.now() - start; |
| } |
| }); |
| } |
| </script> |