RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 01:17:35 +00:00
Code Issues Activity Actions

LibWeb: Implement adoptedStyleSheets attribute for Document

Browse source 
https://drafts.csswg.org/cssom/#dom-documentorshadowroot-adoptedstylesheets

The attribute implementation for ShadowRoot is currently missing
because we do not yet distinguish between the style sheets of
ShadowRoot and Document, and we need to address the issue first.
This commit is contained in:
Aliaksandr Kalenik 2024-03-07 23:36:52 +01:00 • committed by Andreas Kling
parent fceba6a257
commit 7c322ec710
6 changed files with 171 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

11
Tests/LibWeb/Text/expected/document-adopted-style-sheets.txt Normal file
View file

@ -0,0 +1,11 @@
color with no adopted style sheets: rgb(0, 0, 0)
document.adoptedStyleSheets.length=(1)
add style sheet using Array.prototype.push(): rgb(255, 0, 0)
document.adoptedStyleSheets.length=(0)
delete added style sheet using Array.prototype.pop(): rgb(0, 0, 0)
document.adoptedStyleSheets.length=(1)
add style by assigning array to document.adoptedStyleSheets: rgb(255, 0, 0)
document.adoptedStyleSheets.length=(1)
add style by assigning Set to document.adoptedStyleSheets: rgb(0, 128, 0)
assignment of non-iterable value to document.adoptedStyleSheets throws "1 is not iterable"
assignment of value that is not CSSStyleSheet throws "Not an object of type CSSStyleSheet"

72
Tests/LibWeb/Text/input/document-adopted-style-sheets.html Normal file
View file

@ -0,0 +1,72 @@
<script src="include.js"></script>
<div id="testElement"></div>
<script>
test(() => {
// Make sure assignment of empty array works correctly
document.adoptedStyleSheets = [];
{
const computedStyle = window.getComputedStyle(testElement);
const color = computedStyle.getPropertyValue("color");
println(`color with no adopted style sheets: ${color}`);
}
const sheetColorRed = new CSSStyleSheet();
sheetColorRed.replaceSync("#testElement { color: red }");
document.adoptedStyleSheets.push(sheetColorRed);
println(`document.adoptedStyleSheets.length=(${document.adoptedStyleSheets.length})`);
{
const computedStyle = window.getComputedStyle(testElement);
const color = computedStyle.getPropertyValue("color");
println(`add style sheet using Array.prototype.push(): ${color}`);
}
document.adoptedStyleSheets.pop();
println(`document.adoptedStyleSheets.length=(${document.adoptedStyleSheets.length})`);
{
const computedStyle = window.getComputedStyle(testElement);
const color = computedStyle.getPropertyValue("color");
println(`delete added style sheet using Array.prototype.pop(): ${color}`);
}
document.adoptedStyleSheets = [sheetColorRed];
println(`document.adoptedStyleSheets.length=(${document.adoptedStyleSheets.length})`);
{
const computedStyle = window.getComputedStyle(testElement);
const color = computedStyle.getPropertyValue("color");
println(`add style by assigning array to document.adoptedStyleSheets: ${color}`);
}
const sheetColorGreen = new CSSStyleSheet();
sheetColorGreen.replaceSync("#testElement { color: green }");
document.adoptedStyleSheets.push(sheetColorGreen);
document.adoptedStyleSheets = new Set([sheetColorGreen]);
println(`document.adoptedStyleSheets.length=(${document.adoptedStyleSheets.length})`);
{
const computedStyle = window.getComputedStyle(testElement);
const color = computedStyle.getPropertyValue("color");
println(`add style by assigning Set to document.adoptedStyleSheets: ${color}`);
}
try {
document.adoptedStyleSheets = 1;
} catch(err) {
println(`assignment of non-iterable value to document.adoptedStyleSheets throws "${err.message}"`);
}
try {
document.adoptedStyleSheets = ["foo"];
} catch(err) {
println(`assignment of value that is not CSSStyleSheet throws "${err.message}"`);
}
});
</script>