mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 01:17:35 +00:00
LibWeb: Implement adoptedStyleSheets attribute for Document
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:
parent
fceba6a257
commit
7c322ec710
6 changed files with 171 additions and 2 deletions
11
Tests/LibWeb/Text/expected/document-adopted-style-sheets.txt
Normal file
11
Tests/LibWeb/Text/expected/document-adopted-style-sheets.txt
Normal 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
72
Tests/LibWeb/Text/input/document-adopted-style-sheets.html
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue