| <!doctype HTML> |
| |
| <!-- |
| This test creates a grid with 10,000 non-trivial items. |
| It sets content-visibility: hidden on the container and adjusts the container width continuously. |
| --> |
| |
| <style> |
| #container { |
| content-visibility: hidden; |
| |
| width: 500px; |
| height: 500px; |
| display: grid; |
| border: 1px solid black; |
| background: lightblue; |
| } |
| .item { |
| background: blue; |
| margin: 1px; |
| width: 10%; |
| height: 10%; |
| } |
| </style> |
| |
| <template id="item_template"> |
| <div class="item"> |
| <div style="position: relative; width: 90%;"> |
| relpos |
| <div style="position: absolute; top: 1px; left: 1%"> |
| abspos |
| </div> |
| </div> |
| <div style="position: absolute; top: 1px; left: 1%"> |
| abspos |
| </div> |
| lorem ipsum dolor sit amet |
| </div> |
| </template> |
| |
| <div id=container></div> |
| |
| <script src="../resources/runner.js"></script> |
| <script> |
| function construct(n) { |
| const specimen = document.importNode(document.getElementById("item_template").content, true).firstElementChild; |
| const container = document.getElementById("container"); |
| for (let i = 0; i < n; ++i) { |
| const clone = specimen.cloneNode(true); |
| container.appendChild(clone); |
| } |
| } |
| |
| construct(10000); |
| |
| let widths = ["400px", "500px"]; |
| let width_index = 0; |
| function changeStyle() { |
| document.getElementById("container").style.width = widths[width_index]; |
| width_index = 1 - width_index; |
| } |
| |
| let testDone = false; |
| let startTime; |
| function runTest() { |
| if (startTime) |
| PerfTestRunner.measureValueAsync(PerfTestRunner.now() - startTime); |
| if (testDone) |
| return; |
| |
| startTime = PerfTestRunner.now(); |
| |
| changeStyle(); |
| requestAnimationFrame(runTest); |
| } |
| |
| PerfTestRunner.prepareToMeasureValuesAsync({ |
| unit: 'ms', |
| done: () => { testDone = true; container.innerHTML = ""; } |
| }); |
| requestAnimationFrame(runTest); |
| |
| </script> |
