75 lines
2.2 KiB
HTML
75 lines
2.2 KiB
HTML
<!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> |