paint-offset-changes.html | Explore in Territory

<!DOCTYPE html>
<body>
<script src="../resources/runner.js"></script>
<script src="resources/paint.js"></script>
<style>
  .column {
    width: 180px;
    height: 310px;
    border: 1px solid black;
    font-size: 1px;
  }
  .row {
    width: 150px;
    border: 1px solid cornflowerblue;
  }
  .row > span {
    border: 1px solid rebeccapurple;
  }
</style>
<script>
// This test measures the lifecycle update performance of changing paint offset.

// Create a column with many rows of divs and many spans on each row.
function createColumn(parent) {
  var rowsPerColumn = 200;
  var spansPerRow = 100;
  var columnDiv = document.createElement('div');
  parent.appendChild(columnDiv);
  columnDiv.setAttribute('class', 'column');
  for (var row = 0; row < rowsPerColumn; row++) {
    var rowDiv = document.createElement('div');
    rowDiv.setAttribute('class', 'row');
    columnDiv.appendChild(rowDiv);
    for (var span = 0; span < spansPerRow; span++) {
      var spanElement = document.createElement('span');
      rowDiv.appendChild(spanElement);
    }
  }
  return columnDiv;
}

var rowMarginsToChange = createColumn(document.body).querySelectorAll('.row');
var changeRowMargins = function(runCount) {
  for (var index = 0; index < rowMarginsToChange.length; index++)
    rowMarginsToChange[index].style.marginLeft = (runCount % 10) + 'px';
}

var spanMarginsToChange = createColumn(document.body).querySelectorAll('.row > span');
var changeRowSpanMargins = function(runCount) {
  for (var index = 0; index < spanMarginsToChange.length; index += 8)
    spanMarginsToChange[index].style.marginLeft = ((runCount + index) % 3) + 'px';
}

var firstRowHeightToChange = createColumn(document.body).querySelector('.row');
var changeFirstRowHeight = function(rowCount) {
  firstRowHeightToChange.style.height = (5 + runCount % 5) + 'px';
}

var runCount = 0;
measurePaint({
  run: function() {
    runCount++;
    changeRowMargins(runCount);
    changeRowSpanMargins(runCount);
    changeFirstRowHeight(runCount);
  },
});
</script>
</body>
chromium/third_party/blink/perf_tests/paint/paint-offset-changes.html
