ImplicitAtScopeInsertion.html | Explore in Territory

<!DOCTYPE html>
<script src="../resources/runner.js"></script>
<script src="./resources/utils.js"></script>
<div id=root></div>
<script>

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

  let leaf = document.querySelector('#root div:empty');
  let leaf_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; }
  // }
  leaf_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}
      }
    `;
  })();

  return [leaf, leaf_style];
}

const [leaf, leaf_style] = setup();

PerfTestRunner.measureTime({
    description: 'Insertion of stylesheet with implicit @scope',
    run: () => {
      leaf.append(leaf_style);
      root.offsetTop;
      leaf_style.remove();
      root.offsetTop;
    }
});

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