ladybird/Tests/LibWeb/Text/input/css/CSSStyleSheet-replaceSync.html
Tim Ledbetter 87b52a1816 LibWeb: Implement CSSStyleSheet.replaceSync()
This method behaves the same as `CSSStyleSheet.replace()` but the
operation is performed synchronously.
2024-02-24 21:59:28 +01:00

57 lines
1.7 KiB
HTML

<!DOCTYPE html>
<style>
.test {
font-size: 12px;
}
</style>
<script src="../include.js"></script>
<script>
test(() => {
const newStyle = `
.test {
font-size: 14px;
}
.test2 {
font-size: 16px;
}`;
const newStyle2 = `.test {
padding: 100px;
}`;
const nonConstructedSheet = document.styleSheets[0];
try {
nonConstructedSheet.replaceSync(newStyle);
println("FAIL");
} catch (e) {
println(`Exception thrown when calling replaceSync() on non-constructed stylesheet: ${e.name}`);
}
const sheet = new CSSStyleSheet();
const cssRules = sheet.cssRules;
sheet.replaceSync(newStyle);
println(`Number of CSS rules after replaceSync(): ${sheet.cssRules.length}`);
for (const rule of sheet.cssRules) {
println(`Rule: ${rule.cssText}`);
}
const cssRulesAfterReplaceSync = sheet.cssRules;
println(`cssRules returns the same object before and after replaceSync(): ${cssRules === cssRulesAfterReplaceSync}`);
const importRule = `@import url("test.css");`;
sheet.replaceSync(`${newStyle2} ${importRule}`);
println(`@import rule should be not appear below:`);
for (const rule of sheet.cssRules) {
println(`Rule: ${rule.cssText}`);
}
const unresolvedPromise = sheet.replace(newStyle);
try {
sheet.replaceSync(newStyle);
println("FAIL");
} catch (e) {
println(`Calling replaceSync() while the disallow modification flag set throws: ${e.name}`);
}
});
</script>