floats_show_hide.html | Explore in Territory

<!DOCTYPE html>
<style>
.float {
  float: left;
  width: 20px;
}
</style>
<script src="../resources/runner.js"></script>
<body style="overflow-y: scroll;">
  <div id="parent" style="display: flow-root;"></div>
</body>
<script>
const parent = document.getElementById('parent');
const containers = [];
for (let i = 0; i < 100; i++) {
  const container = document.createElement('div');
  container.style.height = '100px';
  const random = Math.random();
  container.innerHTML = `
    <div class="float" style="height: ${90 * random}px"></div>
    <div class="float" style="height: ${80 * random}px"></div>
    <div class="float" style="height: ${70 * random}px"></div>
    <div class="float" style="height: ${60 * random}px"></div>
    <div class="float" style="height: ${50 * random}px"></div>
    <div class="float" style="height: ${40 * random}px"></div>
    <div class="float" style="height: ${30 * random}px"></div>
    <div class="float" style="height: ${20 * random}px"></div>
    <div class="float" style="height: ${10 * random}px"></div>
  `;
  parent.appendChild(container);
  containers.push(container);
}

PerfTestRunner.measureRunsPerSecond({
  description: 'Measures formance of showing/hiding containers with many floats',
  run: () => {
    for (let container of containers) {
      container.style.display = 'none';
      PerfTestRunner.forceLayout();
      container.style.display = '';
      PerfTestRunner.forceLayout();
    }
  },
  done: () => {
    parent.style.display = 'none';
  }
});

</script>
chromium/third_party/blink/perf_tests/layout/floats_show_hide.html
