abspos.html | Explore in Territory

<!DOCTYPE html>
<style>
  .row {
    position: relative;
    font-size: 10px;
  }

  .cell {
    position: absolute;
    height: 10px;
    width: 50px;
  }
</style>

<div id="wrapper">
</div>

<pre id="log" style="position: absolute; left: 300px;"></pre>

<template id="row-template">
  <div class="row">
    <div class="row-id cell" style="left: 0;">
    </div>
    <div class="row-title cell" style="left: 50px;">
    </div>
    <div class="row-text cell" style="left: 100px; width: 200px;">
    </div>
  </div>
</template>

<script src="../resources/runner.js"></script>
<script>
  function runTest() {

    var index = 0;
    PerfTestRunner.measureTime({
      description: "Measures layout performance of a page with lots of absolute positioned elements.",
      setup: function() {
        document.body.style.display = "none";
        PerfTestRunner.forceLayout();
      },
      run: function() {
        document.body.style.display = "block";
        PerfTestRunner.forceLayout();
      }
    });
  }

  const TOTAL_ROWS = 10000;
  const ROW_HEIGHT = 10;

  let wrapper = document.getElementById("wrapper");
  let template = document.getElementById("row-template");

  for (let i = 0; i < TOTAL_ROWS; i++) {
    let clone = template.content.cloneNode(true);

    let row = clone.querySelector(".row");
    row.style.top = (i * ROW_HEIGHT) + "px";

    let color = "#"+ ((1<<24)*Math.random()|0).toString(16);

    let rowId = clone.querySelector(".row-id");
    rowId.innerHTML = "<div style='width: 10px; height: 10px; background: " + color + ";'></div>";

    let rowTitle = clone.querySelector(".row-title");
    rowTitle.innerHTML = "<div style='width: 25px; height: 5px; background: " + color + ";'></div>";

    let rowText = clone.querySelector(".row-text");
    rowText.innerHTML = "<div style='width: 50px; height: 5px; background: " + color + ";'></div>";

    wrapper.appendChild(clone);
  }

  runTest();
</script>
chromium/third_party/blink/perf_tests/layout/abspos.html
