LibWeb: Add tests for styleWithCSS and useCSS editing commands

Author: https://github.com/gmta Commit: a48e693ea1 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4769 Reviewed-by: https://github.com/AtkinsSJ ✅
2025-07-29 04:09:13 +00:00 · 2025-05-16 11:11:18 +02:00 · 2025-05-16 11:11:18 +02:00 · a48e693ea1 · 2025-05-16 11:09:43 +00:00
commit a48e693ea1
parent 870f24f181
4 changed files with 68 additions and 0 deletions
--- a/Tests/LibWeb/Text/input/Editing/execCommand-useCSS.html
+++ b/Tests/LibWeb/Text/input/Editing/execCommand-useCSS.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<script src="../include.js"></script>
+<div contenteditable="true">foobar</div>
+<script>
+    test(() => {
+        const range = document.createRange();
+        getSelection().addRange(range);
+
+        const divElm = document.querySelector('div');
+        const report = () => println(`Div contents: "${divElm.innerHTML}" bold state: ${document.queryCommandState('bold')}`);
+        report();
+
+        println(`useCSS supported: ${document.queryCommandSupported('useCSS')}`);
+        document.execCommand('useCSS', false, 'false');  // NOTE: false means "use CSS"
+
+        // Make 'fo' bold, with style=".."
+        range.setStart(divElm.childNodes[0], 0);
+        range.setEnd(divElm.childNodes[0], 2);
+        document.execCommand('bold');
+        report();
+
+        document.execCommand('useCSS', false, 'true');
+
+        // Make 'ar' bold, with <b>
+        range.setStart(divElm.childNodes[1], 2);
+        range.setEnd(divElm.childNodes[1], 4);
+        document.execCommand('bold');
+        report();
+    });
+</script>