<!DOCTYPE html>
<script src="../resources/runner.js"></script>
<script src="resources/utils.js"></script>
<style>
  body.default_ltr .default { direction: ltr; }
  body.default_ltr .alternative { direction: rtl; }

  body.default_rtl .default { direction: rtl; }
  body.default_rtl .alternative { direction: ltr; }
  div { margin-inline-start: 10px; }
  /* Give the cascade something to do: */
  div { border: 0px solid red; }
  div { border: 0px solid green !important; }
  div { border: 0px solid black; }
  div { padding: 0px; }
</style>
<body class="default_ltr"></body>
<script>

  function createTree(node, siblings, depth) {
    if (!depth)
      return;
    for (let i = 0; i < siblings; i++) {
        var div = document.createElement('div');
        div.className = (depth % 2 == 0) ? 'default' : 'alternative';
        node.append(div);
        createTree(div, siblings, depth - 1);
    }
  }
  createTree(document.body, 4, 6);

  PerfTestRunner.measureTime({
      description: 'Measure impact of switching direction with css-logical',
      run: function() {
        document.body.classList.toggle('default_ltr');
        document.body.classList.toggle('default_rtl');
        forceStyleRecalc(document.body);
      }
  });
</script>