chromium/third_party/blink/perf_tests/display_locking/link_invalidation_document_rules_sparse.html

<!--
This tests the overhead added by document rules to style recalc with display
locked elements. It adds 25 display-locked divs that have 26 children
(25 divs, 1 link) and 625 (25*25) grandchildren (divs) each. It applies and
removes the lock, and forces a style update after. This test can be run with
and without "SpeculationRulesDocumentRulesSelectorMatches" enabled, and the
performance should be comparable.
-->
<!DOCTYPE html>
<head>
  <script src="../resources/runner.js"></script>
  <style>
    #root > * { content-visibility: visible; }
  </style>
  <script type="speculationrules">
    {"prefetch": [{"source": "document"}]}
  </script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  const NUM_BLOCKS = 25;
  const NUM_CHILDREN = 25;
  const NUM_GRANDCHILDREN = 25;

  function setup() {
    let id = 0;
    root.innerHTML = "";
    document.styleSheets[0].rules[0].style.contentVisibility = 'visible';

    for (let i = 0; i < NUM_BLOCKS; i++) {
      const block = document.createElement("div");
      for (let j = 0; j < NUM_CHILDREN; j++) {
        let child = document.createElement("div");
        for (let k = 0; k < NUM_GRANDCHILDREN; k++) {
          let grandchild = document.createElement("div");
          grandchild.id = ++id;
          grandchild.innerText = id;
          child.appendChild(grandchild);
        }
        let a = document.createElement("a")
        a.href = "/foo.com"
        a.id = ++id;
        a.innerText = id;
        child.appendChild(a);
        block.appendChild(child);
      }
      root.appendChild(block);
    }
    root.offsetLeft;
  }

  function runTest() {
    document.styleSheets[0].rules[0].style.contentVisibility = 'hidden';
    root.offsetTop;

    document.styleSheets[0].rules[0].style.contentVisibility = 'visible';
    root.offsetTop;
  }

  PerfTestRunner.measureTime({
    setup: setup,
    run: runTest,
    iterationCount: 10,
  });
</script>