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

<!DOCTYPE html>
<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>
<script>
    test(() => {
        const testDelete = function (divId, anchorExpression, position) {
            println(`--- ${divId} ---`);
            const divElm = document.querySelector(`div#${divId}`);
            println(`Before: ${divElm.innerHTML}`);

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

            // 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);
    });
</script>
-												Meta: Add DOCTYPEs to most text tests

											
										
										
											2025-03-18 19:28:35 +01:00
+								<!DOCTYPE html>
-												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 12:20:44 +01: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 16:53:18 +02: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: 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 12:20:44 +01:00
+								<script>
 								    test(() => {
-												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 16:53:18 +02:00
+								        const testDelete = function (divId, anchorExpression, position) {
-												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 15:25:19 -04: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 16:53:18 +02: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 12:20:44 +01: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 15:25:19 -04: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 16:53:18 +02:00
+								            const anchor = anchorExpression(divElm);
 								            getSelection().setBaseAndExtent(anchor, position, anchor, position);
-												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 12:20:44 +01: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 15:25:19 -04: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 12:20:44 +01: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 16:53:18 +02: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 15:25:19 -04: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 16:53:18 +02:00
+								        testDelete("a", (node) => node.firstChild, 3);
 								        testDelete("b", (node) => node.firstChild, 15);
 								        testDelete("c", (node) => node.childNodes[1].firstChild, 0);
-												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 12:20:44 +01:00
+								    });
 								</script>