| <!DOCTYPE html> |
| <style> |
| .gridItem { |
| grid-column: span 100; |
| grid-row: span 100; |
| } |
| #grid { |
| display: grid; |
| grid-auto-rows: 2px; |
| grid-auto-columns: 5px; |
| } |
| </style> |
| <script src="../resources/runner.js"></script> |
| <script> |
| function startTest() { |
| PerfTestRunner.forceLayout(); |
| |
| var index = 0; |
| var grid = document.getElementById("grid"); |
| PerfTestRunner.measureRunsPerSecond({ |
| description: "Measures performance of layout on a page using CSS grid layout (item placement).", |
| run: function() { |
| // This style change forces the grid to place the item again, and thus regenerate the data structure holding the grid. |
| grid.style.gridAutoFlow = ++index % 2 ? "row" : "column"; |
| PerfTestRunner.forceLayout(); |
| } |
| }); |
| } |
| </script> |
| |
| <body onload="startTest()"> |
| <div id="grid""> |
| <div class="gridItem" style="background: lime"></div> |
| </div> |
| </body> |
