<!--
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>