eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-04-28 18:47:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Narrow inline stylesheet insertRule() invalidation

Browse Source 
Avoid forcing a full style update when a connected inline <style> sheet
inserts an ordinary style rule. Build a targeted invalidation set from
the inserted rule and walk only the affected roots instead.

Introduce the shared StyleSheetInvalidation helper so later stylesheet
mutation paths can reuse the same selector analysis and root application
logic. It handles trailing-universal selectors, pseudo-element-only
rightmost compounds, and shadow-host escapes through ::slotted(...) and
:host combinators.

Keep the broad invalidate_owners() path for constructed stylesheets and
other sheet kinds whose TreeScope interactions still require it.
This commit is contained in:
Andreas Kling
2026-04-22 22:29:59 +02:00
committed by Andreas Kling
parent 73aafc2ade
commit b6559d3846
Notes: github-actions[bot] 2026-04-23 14:49:52 +00:00 
Author: https://github.com/awesomekling
Commit: https://github.com/LadybirdBrowser/ladybird/commit/b6559d38469
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/9049
10 changed files with 572 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
Tests/LibWeb/Text/input/css/insert-rule-in-shadow-root-style-sheet.html Normal file
View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<script src="../include.js"></script>
<div id="host"></div>
<script>
test(() => {
const host = document.getElementById("host");
const shadowRoot = host.attachShadow({ mode: "open" });
shadowRoot.innerHTML = `
<style>.box { background-color: red; }</style>
<div id="scope">
<div id="target" class="box"></div>
<div id="other"></div>
</div>
<div id="pseudo" class="foo"></div>
`;
const styleSheet = shadowRoot.querySelector("style").sheet;
const target = shadowRoot.getElementById("target");
const other = shadowRoot.getElementById("other");
const pseudo = shadowRoot.getElementById("pseudo");
println(`before target: ${getComputedStyle(target).backgroundColor}`);
println(`before other: ${getComputedStyle(other).backgroundColor}`);
println(`before host: ${getComputedStyle(host).color}`);
println(`before pseudo: ${getComputedStyle(pseudo, "::before").color}`);
println(`before child selector: ${getComputedStyle(other).color}`);
styleSheet.insertRule(".box { background-color: green; }", styleSheet.cssRules.length);
styleSheet.insertRule(":host { color: rgb(0, 0, 255); }", styleSheet.cssRules.length);
styleSheet.insertRule(".foo::before { content: ''; color: rgb(255, 0, 0); }", styleSheet.cssRules.length);
styleSheet.insertRule("#scope > * { color: rgb(128, 0, 128); }", styleSheet.cssRules.length);
println(`after target: ${getComputedStyle(target).backgroundColor}`);
println(`after other: ${getComputedStyle(other).backgroundColor}`);
println(`after host: ${getComputedStyle(host).color}`);
println(`after pseudo: ${getComputedStyle(pseudo, "::before").color}`);
println(`after child selector: ${getComputedStyle(other).color}`);
});
</script>