<!DOCTYPE html>
<title>Contain update layer tree performance</title>
<style>
#wrapper {
  position: relative;
}
.cell {
  position: absolute;
  box-sizing: border-box;
  border: solid;
  contain: strict;
}
.progressbar {
  position: absolute;
  left: 0px;
  top: 5px;
  height: 10px;
}
</style>
<script src="../resources/runner.js"></script>
<script src="resources/paint.js"></script>
<pre id="log"></pre>
<div id="wrapper"></div>
<script>
  const CELL_WIDTH = "50";
  const CELL_HEIGHT = "25";
  const NUM_ROWS = 200;
  const NUM_COLUMNS = 200;
  const DOM_DEPTH = 10;

  function createContent(depth) {
    let content = document.createElement("div");
    content.appendChild(document.createElement("h1"));
    content.appendChild(document.createElement("paragraph"));
    if (depth > 0)
      content.appendChild(createContent(depth - 1));
    return content;
  }

  function setupTest() {
    let wrapper = document.getElementById("wrapper");
    for (let i = 0; i < NUM_ROWS; i++) {
      for (let j = 0; j < NUM_COLUMNS; j++) {
        let cell = document.createElement("div");
        if (i == 0 && j == 0)
          cell.id = "target";
        cell.classList.add("cell");
        cell.style.width = CELL_WIDTH + "px";
        cell.style.height = CELL_HEIGHT + "px";
        cell.style.left = (j * CELL_WIDTH) + "px";
        cell.style.top = (i * CELL_HEIGHT) + "px";
        cell.style.overflow = "visible";

        cell.appendChild(createContent(DOM_DEPTH));

        wrapper.appendChild(cell);
      }
    }
  }

  function runTest() {
    let cell = document.getElementById("target");
    // This causes a call to PaintLayer::SetNeedsCompositingInputsUpdate().
    cell.style.overflow = cell.style.overflow == "hidden" ? "visible" : "hidden";
  }

  setupTest();

  measurePaint({
    run: runTest
  });
</script>