mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-05-14 19:06:35 +02:00
118802b3f0
Invalidate only the style scope whose media rules changed instead of throwing away every shadow root rule cache whenever any active stylesheet changes media query match state. Shadow-root stylesheet changes still dirty the host side because :host and ::slotted selectors can affect nodes outside the shadow tree. When scoped invalidation leaves dirty descendants in a shadow root, preserve the host ancestor chain so the document style update walk reaches them before forced layout. Add coverage that a matching media rule introduced in one shadow tree does not broadly invalidate a page full of unrelated shadow roots, and that a dirty shadow root is updated before layout is forced.
22 lines
726 B
HTML
22 lines
726 B
HTML
<!DOCTYPE html>
|
|
<script src="../include.js"></script>
|
|
<div id="host">host text</div>
|
|
<script>
|
|
test(() => {
|
|
const host = document.getElementById("host");
|
|
const shadowRoot = host.attachShadow({ mode: "open" });
|
|
const sheet = new CSSStyleSheet();
|
|
|
|
shadowRoot.innerHTML = "<slot></slot>";
|
|
shadowRoot.adoptedStyleSheets = [sheet];
|
|
|
|
sheet.replaceSync("slot { color: rgb(0, 128, 0); }");
|
|
getComputedStyle(shadowRoot.querySelector("slot")).color;
|
|
|
|
sheet.replaceSync("slot { color: rgb(0, 0, 255); }");
|
|
document.body.innerText;
|
|
|
|
println(`Slot color after forced layout: ${getComputedStyle(shadowRoot.querySelector("slot")).color}`);
|
|
});
|
|
</script>
|