| <!DOCTYPE html> |
| <script src="../resources/runner.js"></script> |
| <script src="resources/paint.js"></script> |
| <style> |
| html, body { |
| margin: 0; |
| padding: 0; |
| } |
| |
| #grid-container { |
| display: grid; |
| |
| grid-auto-flow: row; |
| grid-template-columns: |
| repeat(3750, 20px 30px 15px 40px); |
| |
| width: 18000px; |
| |
| row-gap: 6px; |
| column-gap: 6px; |
| |
| column-rule: 2px solid blue; |
| row-rule: 2px solid red; |
| |
| column-rule-break: intersection; |
| row-rule-break: intersection; |
| |
| column-rule-inset: 0; |
| row-rule-inset: 2px; |
| } |
| |
| .item { |
| height: 10px; |
| background-color: green; |
| } |
| |
| .spanner-col { |
| height: 10px; |
| background-color: orange; |
| grid-column: span 3; |
| } |
| |
| .spanner-row { |
| height: 10px; |
| background-color: purple; |
| grid-row: span 2; |
| } |
| |
| .spanner-both { |
| height: 10px; |
| background-color: red; |
| grid-column: span 2; |
| grid-row: span 2; |
| } |
| </style> |
| |
| <div id="grid-container"></div> |
| |
| <script> |
| (function() { |
| const container = document.getElementById('grid-container'); |
| |
| function populateContainer() { |
| const itemCount = 150000; |
| const fragment = document.createDocumentFragment(); |
| |
| for (let i = 0; i < itemCount; ++i) { |
| const div = document.createElement('div'); |
| |
| const mod = i % 9; |
| if (mod === 0) { |
| div.className = 'spanner-col'; |
| } else if (mod === 3) { |
| div.className = 'spanner-row'; |
| } else if (mod === 6) { |
| div.className = 'spanner-both'; |
| } else { |
| div.className = 'item'; |
| } |
| |
| fragment.appendChild(div); |
| } |
| |
| container.appendChild(fragment); |
| } |
| |
| populateContainer(); |
| |
| var wide = false; |
| |
| measurePaint({ |
| run: function() { |
| container.style.width = wide ? "18000px" : "21000px"; |
| wide = !wide; |
| } |
| }); |
| })(); |
| </script> |
