mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 01:57:45 +00:00
33294aea86
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>
37 lines
1.1 KiB
HTML
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>
|