Files
ladybird/Tests/LibWeb/Text/input/css/stylesheet-add-remove-layer-order-invalidation.html
Andreas Kling 928a5247ff LibWeb: Narrow stylesheet add/remove invalidation
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.
2026-04-23 16:45:22 +02:00

37 lines
1.3 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 verifyLayerMutationSchedulesFullRestyle(label) {
const invalidations = internals.getStyleInvalidationCounters().fullStyleInvalidations;
if (invalidations >= 1)
println(`PASS: ${label} (${invalidations} full invalidations)`);
else
println(`FAIL: ${label} (${invalidations} full invalidations)`);
}
test(() => {
const target = document.getElementById("target");
settleAndReset(target);
const layerOrderStyle = document.createElement("style");
layerOrderStyle.textContent = "@layer B, A;";
document.head.appendChild(layerOrderStyle);
getComputedStyle(target).color;
verifyLayerMutationSchedulesFullRestyle("layer-only stylesheet add schedules full restyle");
settleAndReset(target);
layerOrderStyle.remove();
getComputedStyle(target).color;
verifyLayerMutationSchedulesFullRestyle("layer-only stylesheet remove schedules full restyle");
});
</script>