<!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>