mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-05-03 04:52:06 +02:00
928a5247ff
Avoid broad document invalidation when adding or removing ordinary document-owned or shadow-owned stylesheets. Reuse the targeted StyleSheetInvalidation path for style rules, including shadow-host escapes, pseudo-element-only selectors, and trailing-universal cases. Keep the broad path for sheet contents whose effects are not captured by selector invalidation alone, including @property, @font-face, @font-feature-values, @keyframes, imported sheets, and top-level @layer blocks. Broad-path shadow-root sheets still reach host-side consumers through their active-scope effects.
59 lines
2.4 KiB
HTML
59 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<script src="../include.js"></script>
|
|
<div id="host"></div>
|
|
<script>
|
|
function settleAndReset(triggerElement) {
|
|
getComputedStyle(triggerElement).color;
|
|
getComputedStyle(triggerElement).color;
|
|
internals.resetStyleInvalidationCounters();
|
|
}
|
|
|
|
function verifyInvalidationsStayBounded(label, maxInvalidations) {
|
|
const invalidations = internals.getStyleInvalidationCounters().styleInvalidations;
|
|
if (invalidations <= maxInvalidations)
|
|
println(`PASS: ${label} (${invalidations} invalidations)`);
|
|
else
|
|
println(`FAIL: ${label} (${invalidations} invalidations)`);
|
|
}
|
|
|
|
function verifyFullRestylesStayBounded(label, maxInvalidations) {
|
|
const invalidations = internals.getStyleInvalidationCounters().fullStyleInvalidations;
|
|
if (invalidations <= maxInvalidations)
|
|
println(`PASS: ${label} (${invalidations} full invalidations)`);
|
|
else
|
|
println(`FAIL: ${label} (${invalidations} full invalidations)`);
|
|
}
|
|
|
|
test(() => {
|
|
const host = document.getElementById("host");
|
|
for (let i = 0; i < 25; ++i) {
|
|
const lightDomBystander = document.createElement("span");
|
|
lightDomBystander.className = "foo";
|
|
lightDomBystander.textContent = `light bystander ${i}`;
|
|
host.appendChild(lightDomBystander);
|
|
}
|
|
|
|
const shadowRoot = host.attachShadow({ mode: "open" });
|
|
shadowRoot.innerHTML = `<div id="shadow-target" class="foo">shadow target</div>`;
|
|
const shadowTarget = shadowRoot.getElementById("shadow-target");
|
|
|
|
const sheet = new CSSStyleSheet();
|
|
shadowRoot.adoptedStyleSheets = [sheet];
|
|
|
|
settleAndReset(shadowTarget);
|
|
sheet.replaceSync(".foo { color: rgb(0, 128, 0); }");
|
|
getComputedStyle(shadowTarget).color;
|
|
verifyInvalidationsStayBounded("shadow-local replaceSync ignores matching light-DOM bystanders", 2);
|
|
|
|
settleAndReset(shadowTarget);
|
|
sheet.replaceSync(".foo { color: rgb(255, 0, 0); }");
|
|
getComputedStyle(shadowTarget).color;
|
|
verifyInvalidationsStayBounded("shadow-local replaceSync stays bounded on subsequent updates", 2);
|
|
|
|
settleAndReset(shadowTarget);
|
|
sheet.replaceSync("");
|
|
getComputedStyle(shadowTarget).color;
|
|
verifyFullRestylesStayBounded("shadow-local replaceSync clearing the sheet avoids extra full-document restyles", 1);
|
|
});
|
|
</script>
|