| <!DOCTYPE html> |
| <style> |
| .container { |
| position: relative; |
| height: 3000px; |
| } |
| |
| .row { |
| position: relative; |
| border-top: 1px solid; |
| box-sizing: border-box; |
| width: 120px; |
| } |
| |
| .cell { |
| position: absolute; |
| border-left: 1px solid red; |
| width: 60px; |
| height: 30px; |
| box-sizing: border-box; |
| contain: size layout; |
| } |
| </style> |
| <script src="../resources/runner.js"></script> |
| <script> |
| const resizingElements = []; |
| const rowCount = 10; |
| const colCount = 10; |
| |
| function populateData() { |
| const container = document.createElement('div'); |
| container.classList.add('container'); |
| let top = 0; |
| for (let i = 0; i < rowCount; i++) { |
| let left = 0; |
| const row = document.createElement('div'); |
| row.classList.add('row'); |
| row.style.top = top + 'px'; |
| for (let j = 0; j < colCount; j++) { |
| const cell = document.createElement('div'); |
| cell.classList.add('cell'); |
| const resizingElement = document.createElement('div'); |
| resizingElement.style.width = (100 * PerfTestRunner.random()).toFixed(0) + 'px'; |
| resizingElement.style.height = '100px'; |
| cell.appendChild(resizingElement); |
| cell.style.left = left + 'px'; |
| row.appendChild(cell); |
| |
| resizingElements.push(resizingElement); |
| left += 60; |
| } |
| top += 30; |
| container.appendChild(row); |
| } |
| document.body.appendChild(container); |
| } |
| |
| function startTest() { |
| populateData(); |
| document.body.getBoundingClientRect(); |
| |
| PerfTestRunner.measureRunsPerSecond({ |
| description: 'Measures performance of changing widths of nodes.', |
| run: function () { |
| for (const element of resizingElements) { |
| element.style.width = (100 * PerfTestRunner.random()).toFixed(0) + 'px'; |
| document.body.getBoundingClientRect(); |
| } |
| }, |
| }); |
| } |
| </script> |
| |
| <body onload="startTest();"> |
| </body> |
