ladybird/Tests/LibWeb/Text/input/document-adopted-style-sheets.html
2025-03-20 11:50:49 +01:00

73 lines
2.7 KiB
HTML

<!DOCTYPE html>
<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>