<!DOCTYPE html>
<style>
.grid {
  display: grid;
}
.grid > div {
  grid-area: 1 / 1 / -1 / -1;
}
.auto {
  grid-template: repeat(100, auto) / repeat(100, auto);
}
.min-content {
  grid-template: repeat(100, min-content) / repeat(100, min-content);
}
.max-content {
  grid-template: repeat(100, max-content) / repeat(100, max-content);
}
.flex {
  grid-template: repeat(100, 1fr) / repeat(100, 1fr);
}
.percent {
  grid-template: repeat(100, 1%) / repeat(100, 1%);
}
.length {
  grid-template: repeat(100, 1px) / repeat(100, 1px);
}
</style>
<template id="template">
  <div class="grid auto">
    <div class="grid min-content">
      <div class="grid max-content">
        <div class="grid flex">
          <div class="grid percent">
            <div class="grid length">
              <div class="grid auto">
                <div class="grid min-content">
                  <div class="grid max-content">
                    <div class="grid flex">
                      <div class="grid percent">
                        <div class="grid length">
                          <div>Inner content</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script src="../resources/runner.js"></script>
<script>
'use strict';
function startTest() {
  let prototype = document.getElementById("template").content.firstElementChild;
  let testcase;
  PerfTestRunner.measureRunsPerSecond({
    description: "Measures performance of layout on a page using nested grids with lots of tracks.",
    setup() {
      testcase = prototype.cloneNode(true);
      document.body.appendChild(testcase);
    },
    run() {
      testcase.style.display = "none";
      PerfTestRunner.forceLayout();
      testcase.style.display = "";
      PerfTestRunner.forceLayout();
    },
  });
}
</script>
<body onload="startTest()"></body>