| <!DOCTYPE html> |
| <script src="../resources/runner.js"></script> |
| <div id=c1 style="display: grid; grid-template: auto / 1fr;"> |
| <div id=c2 style="display: grid; grid-template: auto / 1fr;"> |
| <div id=c3 style="display: grid; grid-template: auto auto / 1fr;"> |
| <div id="target" style="display: grid; height: 100px;"></div> |
| <div id=i1 style="display: grid;"> |
| <div id=i2 style="display: grid;"> |
| <div id=i3 style="width: 100%; height: 100%;"> |
| <canvas id=i4 width=50 height=50 style="width: 100%; height: 100%;"></canvas> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <script> |
| PerfTestRunner.measureRunsPerSecond({ |
| description: 'Layout of nested grid with a replaced element dependant on block-constraints.', |
| run: () => { |
| document.getElementById('target').innerText = 'text'; |
| PerfTestRunner.forceLayout(); |
| document.getElementById('target').innerText = ''; |
| PerfTestRunner.forceLayout(); |
| }, |
| }); |
| </script> |