ImplicitAtScope.html | Explore in Territory

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

function setup() {
  createDOMTree(root, /* siblings */ 8, /* depth */ 4);

  let leaf = document.querySelector('body div:empty');
  let style = document.createElement('style');

  // Create many non-matching rules with an expensive selector
  // implicitly scoped to a leaf node in the tree.
  //
  // @scope {
  //   :not(.a0, .a1, ... .aN):not(div) { --x: 0; }
  //   :not(.a0, .a1, ... .aN):not(div) { --x: 1; }
  //   .
  //   .
  //   .
  //   :not(.a0, .a1, ... .aN):not(div) { --x: M; }
  // }
  style.textContent = (() => {
    const PSEUDO_NOT_COUNT = 50;
    let selector = `:not(${[...Array(PSEUDO_NOT_COUNT).keys()].map(x => `.a${x}`).join(', ')}):not(div)`;
    const RULES = 100;
    let rules = [...Array(RULES).keys()].map(x => `${selector} { --x:${x}; }`).join('\n');
    return `
      @scope {
        ${rules}
      }
    `;
  })();
  leaf.append(style);
}

setup();

// Each iteration, we'll recalc all elements. Hopefully, the RuleSet within
// the style element beneath the leaf node can be completely ignored for all
// elements except `leaf`.
PerfTestRunner.measureTime({
    description: 'An implicit whole-RuleSet @scope deep in the tree',
    run: () => {
      root.offsetTop;
      root.style.zIndex = '43';
      root.offsetTop;
      root.style.zIndex = '42';
    }
});

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