css-contain-change-text.html | Explore in Territory

<!DOCTYPE html>
<style>

div {
    position: relative;
    height: 3000px;
}

.cell {
    position: absolute;
    border: solid;
    width: 60px;
    height: 30px;
    box-sizing: border-box;
    contain: size layout;
    line-height: 1;
}

div:nth-child(2n) {
  text-align: center;
}

div:nth-child(3n) {
  text-align: end;
}
</style>
<script src="../resources/runner.js"></script>
<script>
  let textNodes = [];

  function populateData() {
      let container = document.createElement('div');
      let top = 0;
      for (let i = 0; i < 100; i++) {
          let left = 0;
          for (let j = 0; j < 100; j++) {
              let cell = document.createElement('div');
              cell.classList.add('cell');
              let textNode = document.createTextNode('' + (100 * Math.random()).toFixed(2));
              cell.appendChild(textNode);
              cell.style.left = left + "px";
              cell.style.top = top + "px";
              container.appendChild(cell);
              textNodes.push(textNode);
              left += 60;
          }
          top += 30;
      }
      document.body.appendChild(container);
  }

  function startTest() {
    populateData();

    PerfTestRunner.forceLayout();

    PerfTestRunner.measureTime({
      description: "Measures performance of changing text nodes content.",
      run: function() {
        for (let i = 0; i < textNodes.length; i++) {
          textNodes[i].data = '' + (100 * Math.random()).toFixed(2);
        }

        PerfTestRunner.forceLayout();
      },
    });
  }
</script>
<body onload="startTest();">
</body>
chromium/third_party/blink/perf_tests/layout/css-contain-change-text.html
