Codebase Browser
chromium
Go to App

chromium/third_party/blink/perf_tests/css/AtScope.html 

<!DOCTYPE html>
<script src="../resources/runner.js"></script>
<script src="./resources/utils.js"></script>
<style id=style></style>
<div id=root class=myscope></div>
<script>
const SELECTORS = 1000;

function makeStyle() {
  let selectors = [...Array(SELECTORS).keys()].map(x => `.a${x}`);
  // Creates a selector list which is expensive to evaluate:
  // (.a1, .a2, .a3 ... .a<n-1>, .myscope)
  return `
    @scope (${selectors.join(',')}, .myscope) {
      div {
        margin: 1px;
      }
    }
  `;
}

function setup() {
  style.textContent = makeStyle();
  createDOMTree(root, /* siblings */ 2, /* depth */ 11);
}

setup();

PerfTestRunner.measureTime({
    description: '@scope with many ancestors',
    run: () => {
      root.offsetTop;
      root.classList.toggle('myscope');
      root.offsetTop;
      root.classList.toggle('myscope');
    }
});

</script>