LibWeb: Implement CSSStyleSheet.replaceSync()

This method behaves the same as `CSSStyleSheet.replace()` but the operation is performed synchronously.
Author: https://github.com/tcl3 Commit: https://github.com/SerenityOS/serenity/commit/87b52a1816 Pull-request: https://github.com/SerenityOS/serenity/pull/23327 Reviewed-by: https://github.com/awesomekling
2026-04-26 09:45:06 +02:00 · 2024-02-24 07:46:59 +00:00 · 2024-07-18 02:13:10 +09:00
parent 81c67d34eb
commit 87b52a1816
5 changed files with 94 additions and 1 deletions
--- a/Tests/LibWeb/Text/input/css/CSSStyleSheet-replaceSync.html
+++ b/Tests/LibWeb/Text/input/css/CSSStyleSheet-replaceSync.html
@@ -0,0 +1,57 @@
+<!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>