<!DOCTYPE html>
<script src="../resources/runner.js"></script>
<title>Tracking the performance of paint containment and inline text that is not wrapped</title>
<style>
    #listContainer {
        margin: 0 auto;
        width: 600px;
        position: relative;
        contain: paint;
    }

    .listItem {
        outline: 2px solid green;
        position: relative;
    }
</style>
</head>

<body>
    <pre id="log"></pre>

    <div id="listContainer"></div>
    <script>
        const LOREM_IPSUM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.";

        let listContainer = null;
        function createListItem() {
            let item = document.createElement("div");
            item.classList.add("listItem");
            item.textContent = LOREM_IPSUM.substr(
                Math.floor(Math.random() * 100), Math.floor(Math.random() * 200) + 150);
            item.style.whiteSpace = "nowrap";
            listContainer.appendChild(item);
        }

        function setupTest() {
            listContainer = document.getElementById("listContainer");
            for (let i = 0; i < 10000; ++i)
                createListItem();
            window.requestAnimationFrame(runTest);
        }

        let isDone = false;
        PerfTestRunner.prepareToMeasureValuesAsync({ done: done, unit: 'ms' });
        function done() {
            isDone = true;
            listContainer.innerHTML = "";
        }

        let startTime;
        let height = 0;
        function runTest() {
            if (startTime)
                PerfTestRunner.measureValueAsync(PerfTestRunner.now() - startTime);

            if (!isDone) {
                startTime = PerfTestRunner.now();
                listContainer.firstChild.style.height = height + "px";
                height++;
                window.requestAnimationFrame(runTest);
            }
        }

        onload = setupTest;
    </script>
</body>
</html>