mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-09-28 12:18:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Fix insert/delete rule invalidation for adopted style sheets

Browse source 
Invalidation for adopted style sheets was broken because we had an
assumption that "active" style sheet is always attached to
StyleSheetList which is not true for adopted style sheets. This change
addresses that by keeping track of all documents/shadow roots that own
a style sheet and notifying them about invalidation instead of going
through the StyleSheetList.
This commit is contained in:
Aliaksandr Kalenik 2025-01-10 20:00:43 +03:00 • committed by Alexander Kalenik
commit 98691810b1
Notes: github-actions[bot] 2025-01-13 22:04:04 +00:00
9 changed files with 103 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

47
Tests/LibWeb/Text/input/css/insert-rule-in-adopted-style-sheet.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<script src="../include.js"></script>
<my-shadow-box id="box1"></my-shadow-box>
<my-shadow-box id="box2"></my-shadow-box>
<script>
const myStyleSheet = new CSSStyleSheet();
myStyleSheet.replaceSync(`
.box {
width: 100px;
height: 100px;
background-color: red;
}
`);
class MyShadowBox extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.adoptedStyleSheets = [myStyleSheet];
this.box = document.createElement('div');
this.box.classList.add('box');
shadowRoot.appendChild(this.box);
}
getBoxColor() {
return getComputedStyle(this.box).backgroundColor;
}
}
test(() => {
customElements.define('my-shadow-box', MyShadowBox);
println("color of box 1 before rule insertion: " + box1.getBoxColor());
println("color of box 2 before rule insertion: " + box2.getBoxColor());
myStyleSheet.insertRule(
'.box { background-color: green; }',
myStyleSheet.cssRules.length
);
println("color of box 1 after rule insertion: " + box1.getBoxColor());
println("color of box 2 after rule insertion: " + box2.getBoxColor());
});
</script>