mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-28 02:27:19 +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.
45 lines
1.6 KiB
HTML
45 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<script src="../include.js"></script>
|
|
<div id="target">target</div>
|
|
<script>
|
|
function settleAndReset(triggerElement) {
|
|
getComputedStyle(triggerElement).color;
|
|
getComputedStyle(triggerElement).color;
|
|
internals.resetStyleInvalidationCounters();
|
|
}
|
|
|
|
function verifyFullRestyleWasScheduled(label) {
|
|
const invalidations = internals.getStyleInvalidationCounters().fullStyleInvalidations;
|
|
if (invalidations >= 1)
|
|
println(`PASS: ${label}`);
|
|
else
|
|
println(`FAIL: ${label} (${invalidations} full invalidations)`);
|
|
}
|
|
|
|
async function waitForImportedSheet(styleElement) {
|
|
while (styleElement.sheet.cssRules.length === 0 || styleElement.sheet.cssRules[0].styleSheet === null)
|
|
await animationFrame();
|
|
}
|
|
|
|
asyncTest(async done => {
|
|
const target = document.getElementById("target");
|
|
settleAndReset(target);
|
|
|
|
const layerImportStyle = document.createElement("style");
|
|
layerImportStyle.textContent = `@import "data:text/css;base64,${btoa("@layer B, A;")}";`;
|
|
document.head.appendChild(layerImportStyle);
|
|
await waitForImportedSheet(layerImportStyle);
|
|
|
|
getComputedStyle(target).color;
|
|
verifyFullRestyleWasScheduled("imported layer-only stylesheet add schedules full restyle");
|
|
|
|
settleAndReset(target);
|
|
layerImportStyle.remove();
|
|
|
|
getComputedStyle(target).color;
|
|
verifyFullRestyleWasScheduled("imported layer-only stylesheet remove schedules full restyle");
|
|
|
|
done();
|
|
});
|
|
</script>
|