mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-05-18 17:12:54 +00:00
98691810b1
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.
47 lines
No EOL
1.3 KiB
HTML
47 lines
No EOL
1.3 KiB
HTML
<!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> |