ImplicitAtScopeMatching.html | Explore in Territory

<!DOCTYPE html>
<script src="../resources/runner.js"></script>
<script src="./resources/utils.js"></script>
<main id=main></main>
<style>
  /* Explicit inheritance is used to trigger recalc of all elements. */
  * { z-index: inherit; }
  :root { z-index: 42; }
</style>
<script>

g_counter = 0;

// Create a tree where *each* leaf node has a stylesheet
// with an implict @scope rule (with a matching style rule inside).
function createTree(siblings, depth) {
  let root = document.createElement('div');
  if (depth >= 2) {
    root.append(...[...Array(siblings).keys()].map(() => createTree(siblings, depth - 1)));
  } else {
    // Leaf nodes.
    root.classList.add('leaf');
    let style = document.createElement('style');
    style.textContent = `
      /* Prevent cache: ${g_counter++} */
      @scope {
        .leaf:scope { background-color: green; }
      }
    `;
    root.append(style);
  }
  return root;
}

function setup() {
  let root = createTree(/* siblings */ 5, /* depth */ 5);
  main.append(root);
}

setup();

PerfTestRunner.measureTime({
    description: 'Many implicit whole-RuleSet @scopes with matching rules',
    run: () => {
      main.offsetTop;
      main.style.zIndex = '43';
      main.offsetTop;
      main.style.zIndex = '42';
    }
});

</script>
chromium/third_party/blink/perf_tests/css/ImplicitAtScopeMatching.html
