<!DOCTYPE html>
<style>
.grid {
  display: grid;
}
.gridItem {
  min-height: 0;
  min-width: 0;
}
</style>

<script src="../resources/runner.js"></script>
<script>
'use strict';
function startTest() {
  let root;
  PerfTestRunner.measureRunsPerSecond({
    description: "Measures performance of layout on a page using deeply nested grids.",
    setup() {
      let node = document.createElement("div");
      node.className = "gridItem";
      node.textContent = "Inner contents";
      for (let i = 0; i < 16; ++i) {
        let parent = document.createElement("div");
        parent.className = "grid gridItem";
        parent.appendChild(node);
        node = parent;
      }
      root = node;
      root.className = "grid";
      document.body.appendChild(root);
      PerfTestRunner.forceLayout();
    },
    run() {
      root.style.display = "none";
      PerfTestRunner.forceLayout();
      root.style.display = "";
      PerfTestRunner.forceLayout();
    },
  });
}
</script>

<body onload="startTest()"></body>