PerformanceTests/Layout/nested-flexbox.html

<!DOCTYPE html>
<style>
html, body {
    margin: 0;
    height: 100%;
    width: 500px;
}
.flex { display: flex; }
.column { flex-direction: column; }
.row { flex-direction: row; }
.flex-item { flex-basis: auto; flex-shrink: 0; }

</style>
<script src="../resources/runner.js"></script>
<script>
function startTest() {
    document.body.offsetHeight;
    var index = 0;
    PerfTestRunner.measureRunsPerSecond({
        run: function () {
            var wrap = document.getElementById("wrap");
            wrap.style.width = ++index % 2 ? "99%" : "98%";
            document.body.offsetHeight;
        }
    });
}
</script>
</head>

<body onload="startTest()">
<div id="wrap" class="flex column">
    <div class="flex column flex-item">
        <div class="flex column flex-item">
            <div class="flex column flex-item">
                <div class="flex column flex-item">
                    <div class="flex row flex-item">
                        <div class="flex column flex-item">
                            <div class="flex column flex-item">
                                <div class="flex column flex-item">
                                    <div class="flex column flex-item">
                                        <div class="flex row flex-item">
                                            <div class="flex column flex-item">
                                                <div class="flex column flex-item">
                                                    <div class="flex column flex-item">
                                                        <div class="flex column flex-item">
                                                            <div class="flex row flex-item">
                                                                <span style="display: inline-flex">XXX</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>