flex_container_width_changes.html | Explore in Territory

<!doctype HTML>

<!--
This test creates a flex box with 10,000 non-trivial items. It locks the
container and adjusts its width continuously. If content-visibility is properly
optimized, then the width adjustments are very quick (< one frame). Otherwise,
the layout recalculation leaks into the children element and the width
adjustments are slow.
-->

<style>
#container {
  content-visibility: hidden;

  width: 500px;
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
  background: lightblue;
}
.item {
  background: blue;
  margin: 1px;
  width: 10%;
  height: 10%;
}
</style>

<template id="item_template">
<div class="item">
  <div style="position: relative; width: 90%;">
    relpos
    <div style="position: absolute; top: 1px; left: 1%">
      abspos
    </div>
  </div>
  <div style="position: absolute; top: 1px; left: 1%">
    abspos
  </div>
  lorem ipsum dolor sit amet
</div>
</template>

<div id=container></div>

<script src="../resources/runner.js"></script>
<script>
function construct(n) {
  const specimen = document.importNode(document.getElementById("item_template").content, true).firstElementChild;
  const container = document.getElementById("container");
  for (let i = 0; i < n; ++i) {
    const clone = specimen.cloneNode(true);
    container.appendChild(clone);
  }
}

construct(10000);

let widths = ["400px", "500px"];
let width_index = 0;
function changeStyle() {
  document.getElementById("container").style.width = widths[width_index];
  width_index = 1 - width_index;
}

let testDone = false;
let startTime;
function runTest() {
  if (startTime) {
    PerfTestRunner.measureValueAsync(PerfTestRunner.now() - startTime);
    PerfTestRunner.addRunTestEndMarker();
  }
  if (testDone)
    return;

  startTime = PerfTestRunner.now();
  PerfTestRunner.addRunTestEndMarker();

  changeStyle();
  requestAnimationFrame(runTest);
}

PerfTestRunner.startMeasureValuesAsync({
  unit: 'ms',
  done: () => { testDone = true; },
  run: runTest,
  warmUpCount: 3,
  iterationCount: 5
});

</script>
chromium/third_party/blink/perf_tests/display_locking/flex_container_width_changes.html
