<!DOCTYPE html>
<script src="../resources/runner.js"></script>
<script src="resources/utils.js"></script>
<body>
<nav id="container" class="red" style="visibility:hidden"></nav>
<style>
  .red { border: 1px solid red; }
  .green { border: 2px solid green; }
  #container div { all: unset; }
  #container div { border-color: inherit; }
</style>
<script>
  createDOMTree(container, 4, 5);

  PerfTestRunner.measureTime({
      description: 'Measure impact of explicit inheritance',
      setup: () => forceStyleRecalc(container),
      run: () => {
        container.classList.toggle('red');
        container.classList.toggle('green');
        forceStyleRecalc(container);
      }
  });
</script>
</body>