ladybird/Tests/LibWeb/Text/input/Editing/execCommand-delete.html

<!DOCTYPE html>
<meta charset="utf-8">
<script src="../include.js"></script>
<div id="a" contenteditable>foobar</div>
<div id="b" contenteditable>foo👩🏼‍❤️‍👨🏻bar</div>
<div id="c" contenteditable>foo<div contenteditable>bar</div></div>
<div id="d" contenteditable>foo<br><br><div>bar<br>baz</div></div>
<div id="e" contenteditable><p>foo</p><br><p>bar</p></div>
<div id="f" contenteditable><p><span>abc</span><br></p></div>
<script>
    test(() => {
        const testDelete = function (divId, anchorExpression, start, end = start) {
            println(`--- ${divId} ---`);
            const divElm = document.querySelector(`div#${divId}`);
            println(`Before: ${divElm.innerHTML}`);

            // Place cursor
            const anchor = anchorExpression(divElm);
            getSelection().setBaseAndExtent(anchor, start, anchor, end);

            // Press backspace
            document.execCommand("delete");

            println(`After: ${divElm.innerHTML}`);
        };

        testDelete("a", (node) => node.firstChild, 3);
        testDelete("b", (node) => node.firstChild, 15);
        testDelete("c", (node) => node.childNodes[1].firstChild, 0);
        testDelete("d", (node) => node.childNodes[3].firstChild, 0);
        testDelete("e", (node) => node.childNodes[2].firstChild, 0);
        testDelete("f", (node) => node.firstChild.firstChild.firstChild, 0, 3);
    });
</script>
-												Meta: Add DOCTYPEs to most text tests

											
										
										
											2025-03-18 15:28:35 -03:00
+								<!DOCTYPE html>
-												Tests: Add explicit UTF-8 charset declarations to existing tests

											
										
										
											2026-05-18 08:35:08 -03:00
+								<meta charset="utf-8">
-												LibWeb: Add test for document.execCommand("delete")

Anchor the minimum functionality for this. WPT has an extensive suite
to test editing functionalities, but they all take a long time to
execute - so let's have a simple regression test in-tree for now.

											
										
										
											2024-11-30 08:20:44 -03:00
+								<script src="../include.js"></script>
-												LibWeb: Merge nested editing hosts

If a node with `contenteditable=true/plaintextonly` is the child of an
editable node or an editing host, we should make it editable instead of
an editing host. This effectively merges nested editing hosts together,
which is how other browsers deal with this as well.

Gains us 5 WPT subtest passes in `editing`.

											
										
										
											2025-09-03 11:53:18 -03:00
+								<div id="a" contenteditable>foobar</div>
 								<div id="b" contenteditable>foo👩🏼‍❤️‍👨🏻bar</div>
 								<div id="c" contenteditable>foo<div contenteditable>bar</div></div>
-												LibWeb: Extend logic for extraneous line breaks in block elements

While editing, we need to consider whether removing a <br> has any
effect on layout to determine whether its extraneous. This new condition
finds most cases for extraneous <br>s inside block elements.

											
										
										
											2025-09-15 08:56:19 -03:00
+								<div id="d" contenteditable>foo<br><br><div>bar<br>baz</div></div>
 								<div id="e" contenteditable><p>foo</p><br><p>bar</p></div>
 								<div id="f" contenteditable><p><span>abc</span><br></p></div>
-												LibWeb: Add test for document.execCommand("delete")

Anchor the minimum functionality for this. WPT has an extensive suite
to test editing functionalities, but they all take a long time to
execute - so let's have a simple regression test in-tree for now.

											
										
										
											2024-11-30 08:20:44 -03:00
+								<script>
 								    test(() => {
-												LibWeb: Extend logic for extraneous line breaks in block elements

While editing, we need to consider whether removing a <br> has any
effect on layout to determine whether its extraneous. This new condition
finds most cases for extraneous <br>s inside block elements.

											
										
										
											2025-09-15 08:56:19 -03:00
+								        const testDelete = function (divId, anchorExpression, start, end = start) {
-												LibWeb: Delete entire graphemes when the delete/backspace key is pressed

We currently delete a single code unit. If the user presses backspace on
a multi code point emoji, they are going to expect the entire emoji to
be removed. This now matches the behavior of Chrome and Firefox.

											
										
										
											2025-08-14 16:25:19 -03:00
+								            println(`--- ${divId} ---`);
 								            const divElm = document.querySelector(`div#${divId}`);
-												LibWeb: Merge nested editing hosts

If a node with `contenteditable=true/plaintextonly` is the child of an
editable node or an editing host, we should make it editable instead of
an editing host. This effectively merges nested editing hosts together,
which is how other browsers deal with this as well.

Gains us 5 WPT subtest passes in `editing`.

											
										
										
											2025-09-03 11:53:18 -03:00
+								            println(`Before: ${divElm.innerHTML}`);
-												LibWeb: Add test for document.execCommand("delete")

Anchor the minimum functionality for this. WPT has an extensive suite
to test editing functionalities, but they all take a long time to
execute - so let's have a simple regression test in-tree for now.

											
										
										
											2024-11-30 08:20:44 -03:00
-												LibWeb: Delete entire graphemes when the delete/backspace key is pressed

We currently delete a single code unit. If the user presses backspace on
a multi code point emoji, they are going to expect the entire emoji to
be removed. This now matches the behavior of Chrome and Firefox.

											
										
										
											2025-08-14 16:25:19 -03:00
+								            // Place cursor
-												LibWeb: Merge nested editing hosts

If a node with `contenteditable=true/plaintextonly` is the child of an
editable node or an editing host, we should make it editable instead of
an editing host. This effectively merges nested editing hosts together,
which is how other browsers deal with this as well.

Gains us 5 WPT subtest passes in `editing`.

											
										
										
											2025-09-03 11:53:18 -03:00
+								            const anchor = anchorExpression(divElm);
-												LibWeb: Extend logic for extraneous line breaks in block elements

While editing, we need to consider whether removing a <br> has any
effect on layout to determine whether its extraneous. This new condition
finds most cases for extraneous <br>s inside block elements.

											
										
										
											2025-09-15 08:56:19 -03:00
+								            getSelection().setBaseAndExtent(anchor, start, anchor, end);
-												LibWeb: Add test for document.execCommand("delete")

Anchor the minimum functionality for this. WPT has an extensive suite
to test editing functionalities, but they all take a long time to
execute - so let's have a simple regression test in-tree for now.

											
										
										
											2024-11-30 08:20:44 -03:00
-												LibWeb: Delete entire graphemes when the delete/backspace key is pressed

We currently delete a single code unit. If the user presses backspace on
a multi code point emoji, they are going to expect the entire emoji to
be removed. This now matches the behavior of Chrome and Firefox.

											
										
										
											2025-08-14 16:25:19 -03:00
+								            // Press backspace
 								            document.execCommand("delete");
-												LibWeb: Add test for document.execCommand("delete")

Anchor the minimum functionality for this. WPT has an extensive suite
to test editing functionalities, but they all take a long time to
execute - so let's have a simple regression test in-tree for now.

											
										
										
											2024-11-30 08:20:44 -03:00
-												LibWeb: Merge nested editing hosts

If a node with `contenteditable=true/plaintextonly` is the child of an
editable node or an editing host, we should make it editable instead of
an editing host. This effectively merges nested editing hosts together,
which is how other browsers deal with this as well.

Gains us 5 WPT subtest passes in `editing`.

											
										
										
											2025-09-03 11:53:18 -03:00
+								            println(`After: ${divElm.innerHTML}`);
-												LibWeb: Delete entire graphemes when the delete/backspace key is pressed

We currently delete a single code unit. If the user presses backspace on
a multi code point emoji, they are going to expect the entire emoji to
be removed. This now matches the behavior of Chrome and Firefox.

											
										
										
											2025-08-14 16:25:19 -03:00
+								        };
-												LibWeb: Merge nested editing hosts

If a node with `contenteditable=true/plaintextonly` is the child of an
editable node or an editing host, we should make it editable instead of
an editing host. This effectively merges nested editing hosts together,
which is how other browsers deal with this as well.

Gains us 5 WPT subtest passes in `editing`.

											
										
										
											2025-09-03 11:53:18 -03:00
+								        testDelete("a", (node) => node.firstChild, 3);
 								        testDelete("b", (node) => node.firstChild, 15);
 								        testDelete("c", (node) => node.childNodes[1].firstChild, 0);
-												LibWeb: Extend logic for extraneous line breaks in block elements

While editing, we need to consider whether removing a <br> has any
effect on layout to determine whether its extraneous. This new condition
finds most cases for extraneous <br>s inside block elements.

											
										
										
											2025-09-15 08:56:19 -03:00
+								        testDelete("d", (node) => node.childNodes[3].firstChild, 0);
 								        testDelete("e", (node) => node.childNodes[2].firstChild, 0);
 								        testDelete("f", (node) => node.firstChild.firstChild.firstChild, 0, 3);
-												LibWeb: Add test for document.execCommand("delete")

Anchor the minimum functionality for this. WPT has an extensive suite
to test editing functionalities, but they all take a long time to
execute - so let's have a simple regression test in-tree for now.

											
										
										
											2024-11-30 08:20:44 -03:00
+								    });
 								</script>