flexbox-row-stretch-height-definite.html

<!DOCTYPE html>
<html>
<head>
<script src="../resources/runner.js"></script>
</head>
<body style="overflow-y: scroll">

<div id="flexbox-outer" style="display: flex; width: 512px; height: 256px">
    <div id="neighbor" style="width: 256px">
    </div>
    <div id="flexbox-inner" style="flex-direction: column; overflow: auto">
        <div id="contents" style="height: 100%; overflow: hidden">
        </div>
    </div>
</div>

</body>
<script>

// Add wrapping text to make the relayout from scrollbar positioning more expensive.
const contents = document.querySelector('#contents');
for (let i = 0; i < 1000; i++) {
    contents.innerHTML += '<div>this text should wrap so a change in its container width triggers a relayout</div>';
}

const neighbor = document.querySelector("#neighbor");

function runTest()
{
    neighbor.innerHTML = "changing this element's contents should not relayout the right flexbox";
    PerfTestRunner.forceLayout();
    neighbor.innerHTML = "";
    PerfTestRunner.forceLayout();
}

PerfTestRunner.measureRunsPerSecond({
    description: "Measures performance of definite-height flexbox that stretches its children's height (row).",
    run: runTest,
});
</script>
</html>
chromium/third_party/blink/perf_tests/layout/flexbox-row-stretch-height-definite.html
