<!DOCTYPE html>
<title>Performance test changing "contain: layout size" box inside a document with complicated and expensive layout</title>
<style>
#wrapper {
    display: flex;
    flex-direction: column;
}
.row {
    display: flex;
}
#target {   
    contain: layout size;
}

</style>
<script src="../resources/runner.js"></script>
<pre id="log"></pre>
<div id="wrapper"></div>
<script>
    let wrapper = document.getElementById("wrapper");
    let target = undefined;

    const NUM_ROWS = 10;
    const DOM_DEPTH = 100;
    function createCells(depth) {
        let content = document.createElement("div");
        if (!target) {
            target = document.createElement("div");
            target.id = "target";
            content.appendChild(target);
        }
        content.appendChild(document.createElement("h1"));
        content.appendChild(document.createElement("paragraph"));

        if (depth > 0)
            content.appendChild(createCells(depth - 1));

        return content;
    }

    function generateContent() {
        for (let i = 0; i < NUM_ROWS; i++) {
            let row = document.createElement("div");
            row.classList.add("row");
            row.appendChild(createCells(DOM_DEPTH));
            wrapper.appendChild(row);
        }
    }

    function addTextToTarget() {
        for (let i = 0; i < 5; i++) {
            let textNode = document.createElement("div");
            textNode.innerHTML = "some text";
            target.appendChild(textNode);
        }
    }

    function removeTextFromTarget() {
        while (target.firstElementChild)
            target.removeChild(target.firstElementChild);
    }

    function runTest() {
        addTextToTarget();
        document.body.getBoundingClientRect();
        removeTextFromTarget();
        document.body.getBoundingClientRect();
    }

    function setupTest() {
        generateContent();
        document.body.getBoundingClientRect();
        PerfTestRunner.measureRunsPerSecond({
            description: 'Measures performance of changing contain: layout size box inside a document with complicated and expensive layout.',
            run: function () {
                runTest();
            },
            done: function() {
                wrapper.innerHTML = "";
            }
        });
    }
    window.requestAnimationFrame(setupTest);

</script>