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