<!DOCTYPE html>
<html>
<head>
<script src="../resources/runner.js"></script>

<style>
* {
  /* Make the text the same size in chrome and firefox. */
  font-family: "Times New Roman";
  font-size: 16px;
}
</style>
</head>
<body>

<div style="display: flex; width: 800px; background: orange;">
  <div id="neighbor" style="width: 50px;"></div>
  <!-- 750px lets the text not wrap. -->
  <div id="test" style="width: 750px;"></div>
</div>

</body>

<script>

const test = document.querySelector('#test');
for (let i = 0; i < 60; i++) {
    test.innerHTML += '<div style="height: 1%">some stuff here blah blah blah blah blah blah blah blah blah blah blah blah blah</div>';
}

const neighbor = document.querySelector("#neighbor");
function runTest()
{
    // When #neighbor changes height, #test shouldn't have to relayout.
    // 1200px is higher than #test's intrinsic block size and its pre-stretched
    // layout size. Performance characteristics change if that's not the case.
    neighbor.style.height = "1200px";
    PerfTestRunner.forceLayout();
    neighbor.style.height = "1300px";
    PerfTestRunner.forceLayout();
}

PerfTestRunner.measureRunsPerSecond({
    description: "Ensures cache hits for stretched flex items in a row flexbox with indefinite height, when the flexbox changes heights.",
    run: runTest,
});
</script>
</html>