mirror of
https://github.com/RGBCube/serenity
synced 2025-10-31 04:12:43 +00:00
87b52a1816
This method behaves the same as `CSSStyleSheet.replace()` but the operation is performed synchronously.
57 lines
1.7 KiB
HTML
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>
|