| <!DOCTYPE html> |
| <script src="../resources/runner.js"></script> |
| <div style="display: flex; width: 600px; height: 600px;"> |
| <div style="width: 200px;"></div> |
| <div style="display: flex; flex-direction: column; flex-grow: 1; overflow-y: auto;"> |
| <div style="flex-grow: 1; position: relative;"> |
| <div style="position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column;"> |
| <div id="container" style="overflow-y: auto;"></div> |
| </div> |
| </div> |
| <div id="target" style="min-height: 20px"></div> |
| </div> |
| </div> |
| <script> |
| const container = document.getElementById('container'); |
| for (let i = 0; i < 500; i++) { |
| const child = document.createElement('div'); |
| child.innerText = 'This is some placeholder text.'; |
| container.appendChild(child); |
| } |
| |
| const target = document.getElementById('target'); |
| PerfTestRunner.measureRunsPerSecond({ |
| description: 'Measures performance of a series of nested flexboxes with input changing.', |
| run: () => { |
| target.innerText = Math.random(); |
| PerfTestRunner.forceLayout(); |
| }, |
| done: () => { |
| document.body.children[0].style.display = 'none'; |
| } |
| }); |
| </script> |
