<!DOCTYPE html>
<html>
<head>
    <title>Test layout performance with inlines and inline-blocks.</title>
    <script src="../resources/runner.js"></script>
    <style>
        .inlineBlock { display:inline-block; width:10px; height:10px; }
    </style>
</head>
<body>
    <pre id="log"></pre>
    <div id="target" style="width: 300px; height: 0px; display: block;">
    </div>
    <script>
        var style = target.style;

        for (var i = 0; i < 40000; i++) {
            const span = document.createElement("span");
            const div = document.createElement("div");
            div.classList.add("inlineBlock");
            span.appendChild(div);
            target.appendChild(span);
        }

        function test() {
            style.width = "280px";
            target.offsetLeft;
            style.width = "300px";
            target.offsetLeft;
            style.width = "290px";
            target.offsetLeft;
        }

        PerfTestRunner.measureRunsPerSecond({ run: test });
    </script>
</body>
</html>