1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 01:57:45 +00:00
serenity/Tests/LibWeb/Text/input/shadow-root-adopted-style-sheets.html
Aliaksandr Kalenik 33294aea86 LibWeb: Apply shadow root style sheets in StyleComputer
Now, if an element belongs to a shadow tree, we use only the style
sheets from the corresponding shadow root during style computation,
instead of using all available style sheets as was the case
previously.

The only exception is the user agent style sheets, which are still
taken into account for all elements.

Tests/LibWeb/Layout/input/input-element-with-display-inline.html
is affected because style of document no longer affects shadow tree
of input element, like it is supposed to be.

Co-authored-by: Simon Wanner <simon+git@skyrising.xyz>
2024-03-09 16:13:32 +01:00

37 lines
1.1 KiB
HTML

<script src="include.js"></script>
<style>
#test {
border: 10px solid black;
}
</style>
<my-custom-element></my-custom-element>
<script>
test(() => {
class MyCustomElement extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
const test = document.createElement('div');
test.setAttribute('id', 'test');
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
#test {
width: 100px;
height: 100px;
background-color: magenta;
border: 2px solid greenyellow;
}`);
shadow.adoptedStyleSheets = [sheet];
shadow.appendChild(test);
const testComputedStyle = getComputedStyle(test);
println(`border of #test = (${testComputedStyle.getPropertyValue("border")})`);
}
}
customElements.define('my-custom-element', MyCustomElement);
});
</script>