<!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 { --color: red; }
  .green { --color: green; }
  #container div { border-color: var(--color); }
</style>
<script>
  createDOMTree(container, 5, 6);

  PerfTestRunner.measureTime({
      description: 'Measure impact of referencing a variable that changes on ancestor',
      setup: () => forceStyleRecalc(container),
      run: () => {
        container.classList.toggle('red');
        container.classList.toggle('green');
        forceStyleRecalc(container);
      }
  });
</script>
</body>