Ladybird/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-06-10 18:10:56 +09:00
Code Activity

LibWeb: Add tests for styleWithCSS and useCSS editing commands

Browse source
This commit is contained in:
Jelle Raaijmakers 2025-05-16 11:11:18 +02:00 • committed by Sam Atkins
parent 870f24f181
commit a48e693ea1
Notes: github-actions[bot] 2025-05-16 11:09:43 +00:00
4 changed files with 68 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Tests/LibWeb/Text/expected/Editing/execCommand-styleWithCSS.txt Normal file
View file

@ -0,0 +1,4 @@
Div contents: "foobar" bold state: false
styleWithCSS supported: true
Div contents: "<span style="font-weight: bold;">fo</span>obar" bold state: true
Div contents: "<span style="font-weight: bold;">fo</span>ob<b>ar</b>" bold state: true

4
Tests/LibWeb/Text/expected/Editing/execCommand-useCSS.txt Normal file
View file

@ -0,0 +1,4 @@
Div contents: "foobar" bold state: false
useCSS supported: true
Div contents: "<span style="font-weight: bold;">fo</span>obar" bold state: true
Div contents: "<span style="font-weight: bold;">fo</span>ob<b>ar</b>" bold state: true

30
Tests/LibWeb/Text/input/Editing/execCommand-styleWithCSS.html Normal file
View file

@ -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(`styleWithCSS supported: ${document.queryCommandSupported('styleWithCSS')}`);
document.execCommand('styleWithCSS', false, 'true');
// Make 'fo' bold, with style=".."
range.setStart(divElm.childNodes[0], 0);
range.setEnd(divElm.childNodes[0], 2);
document.execCommand('bold');
report();
document.execCommand('styleWithCSS', false, 'false');
// Make 'ar' bold, with <b>
range.setStart(divElm.childNodes[1], 2);
range.setEnd(divElm.childNodes[1], 4);
document.execCommand('bold');
report();
});
</script>

30
Tests/LibWeb/Text/input/Editing/execCommand-useCSS.html Normal file
View file

@ -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>