blob: 9e8b129b73ec7094f18f2ccc3bcc236b37648ff0 [file] [log] [blame]
<!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>