From d4cc61bf6a15e38bdb805752f199dfdfd2fa76cd Mon Sep 17 00:00:00 2001
From: Masayuki Nakano <masayuki@d-toybox.com>
Date: Tue, 6 Jul 2021 04:55:27 +0000
Subject: [PATCH] Bug 1716863 - Add WPT to check "insertText" command when
 selection is collapsed in a void element, and its expected results almost
 match with Chrome r=m_kato

Differential Revision: https://phabricator.services.mozilla.com/D119064
---
 ...rt-text-in-void-element.tentative.html.ini | 126 ++++++++
 ...insert-text-in-void-element.tentative.html | 292 ++++++++++++++++++
 2 files changed, 418 insertions(+)
 create mode 100644 testing/web-platform/meta/editing/other/insert-text-in-void-element.tentative.html.ini
 create mode 100644 testing/web-platform/tests/editing/other/insert-text-in-void-element.tentative.html

diff --git a/testing/web-platform/meta/editing/other/insert-text-in-void-element.tentative.html.ini b/testing/web-platform/meta/editing/other/insert-text-in-void-element.tentative.html.ini
new file mode 100644
index 000000000000..de4f11b8ba4e
--- /dev/null
+++ b/testing/web-platform/meta/editing/other/insert-text-in-void-element.tentative.html.ini
@@ -0,0 +1,126 @@
+[insert-text-in-void-element.tentative.html]
+  [Inserting text when selection is collapsed in <br> which is only child]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <br> which follows a text node]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <br> which is followed by a text node]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <br> which follows an empty <span> element]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <br> which follows a text node and an empty <span> element]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <br> which follows a non-empty <span> element]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <br> which follows a text node, an empty <span> element and white-space only text node]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <embed> which is only child]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <embed> which follows a text node]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <embed> which is followed by a text node]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <embed> which follows an empty <span> element]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <embed> which follows a text node and an empty <span> element]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <embed> which follows a non-empty <span> element]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <embed> which follows a text node, an empty <span> element and white-space only text node]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <hr> which is only child]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <hr> which follows a text node]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <hr> which is followed by a text node]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <hr> which follows an empty <span> element]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <hr> which follows a text node and an empty <span> element]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <hr> which follows a non-empty <span> element]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <hr> which follows a text node, an empty <span> element and white-space only text node]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <img> which is only child]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <img> which follows a text node]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <img> which is followed by a text node]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <img> which follows an empty <span> element]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <img> which follows a text node and an empty <span> element]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <img> which follows a non-empty <span> element]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <img> which follows a text node, an empty <span> element and white-space only text node]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <input> which is only child]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <input> which follows a text node]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <input> which is followed by a text node]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <input> which follows an empty <span> element]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <input> which follows a text node and an empty <span> element]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <input> which follows a non-empty <span> element]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <input> which follows a text node, an empty <span> element and white-space only text node]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <wbr> which is only child]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <wbr> which follows a text node]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <wbr> which is followed by a text node]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <wbr> which follows an empty <span> element]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <wbr> which follows a text node and an empty <span> element]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <wbr> which follows a non-empty <span> element]
+    expected: FAIL
+
+  [Inserting text when selection is collapsed in <wbr> which follows a text node, an empty <span> element and white-space only text node]
+    expected: FAIL
diff --git a/testing/web-platform/tests/editing/other/insert-text-in-void-element.tentative.html b/testing/web-platform/tests/editing/other/insert-text-in-void-element.tentative.html
new file mode 100644
index 000000000000..a67f061bc427
--- /dev/null
+++ b/testing/web-platform/tests/editing/other/insert-text-in-void-element.tentative.html
@@ -0,0 +1,292 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test insertText when selection collapsed in void element</title>
+<meta name="timeout" content="long">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<div contenteditable></div>
+<script>
+"use strict";
+
+const voidElements = [
+  "br",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "wbr",
+];
+
+// This test tests whether the inserted text is inserted into, when selection
+// is collapsed in the void element.  The expected results are based on Blink,
+// but the results of <embed> and <wbr> elements are not consistent with the
+// other elements'.  Therefore, Blink also does not pass some of the following
+// tests.
+// FYI: This cannot be tested by editing/run because there is no way to collapse
+//      selection into a void element with the framework.
+
+const editor = document.querySelector("div[contenteditable]");
+for (const tag of voidElements) {
+  test(() => {
+    editor.innerHTML = `<div></div>`;
+    const element = document.createElement(tag);
+    editor.firstChild.appendChild(element);
+    editor.focus();
+    const selection = getSelection();
+    selection.collapse(element, 0);
+    document.execCommand("insertText", false, "abc");
+    if (tag == "br") {
+      assert_in_array(
+        editor.innerHTML,
+        [
+          "<div>abc</div>",
+          "<div>abc<br></div>",
+        ],
+        `The text should be inserted before the <br> element`
+      );
+    } else {
+      assert_in_array(
+        editor.innerHTML,
+        [
+          `<div>abc<${tag}></div>`,
+          `<div>abc<${tag}><br></div>`,
+        ],
+        `The text should be inserted before the <${tag}> element`
+      );
+    }
+  }, `Inserting text when selection is collapsed in <${tag}> which is only child`);
+
+  test(() => {
+    editor.innerHTML = `<div>abc</div>`;
+    const element = document.createElement(tag);
+    editor.firstChild.appendChild(element);
+    editor.focus();
+    const selection = getSelection();
+    selection.collapse(element, 0);
+    document.execCommand("insertText", false, "def");
+    if (tag == "br") {
+      assert_in_array(
+        editor.innerHTML,
+        [
+          "<div>abcdef</div>",
+          "<div>abcdef<br></div>",
+        ],
+        `The text should be inserted before the <br> element`
+      );
+    } else {
+      assert_in_array(
+        editor.innerHTML,
+        [
+          `<div>abcdef<${tag}></div>`,
+          `<div>abcdef<${tag}><br></div>`,
+        ],
+        `The text should be inserted before the <${tag}> element`
+      );
+    }
+  }, `Inserting text when selection is collapsed in <${tag}> which follows a text node`);
+
+  test(() => {
+    editor.innerHTML = `<div>def</div>`;
+    const element = document.createElement(tag);
+    editor.firstChild.insertBefore(element, editor.firstChild.firstChild);
+    editor.focus();
+    const selection = getSelection();
+    selection.collapse(element, 0);
+    document.execCommand("insertText", false, "abc");
+    if (tag == "br") {
+      assert_in_array(
+        editor.innerHTML,
+        [
+          "<div>abc<br>def</div>",
+          "<div>abc<br>def<br></div>",
+        ],
+        `The text should be inserted before the <br> element`
+      );
+    } else {
+      assert_in_array(
+        editor.innerHTML,
+        [
+          `<div>abc<${tag}>def</div>`,
+          `<div>abc<${tag}>def<br></div>`,
+        ],
+        `The text should be inserted before the <${tag}> element`
+      );
+    }
+  }, `Inserting text when selection is collapsed in <${tag}> which is followed by a text node`);
+
+  test(() => {
+    editor.innerHTML = `<div><span></span></div>`;
+    const element = document.createElement(tag);
+    editor.firstChild.appendChild(element);
+    editor.focus();
+    const selection = getSelection();
+    selection.collapse(element, 0);
+    document.execCommand("insertText", false, "abc");
+    if (tag == "br") {
+      assert_in_array(
+        editor.innerHTML,
+        [
+          "<div><span></span>abc</div>",
+          "<div><span></span>abc<br></div>",
+        ],
+        `The text should be inserted after the previous empty inline element of <br>`
+      );
+    } else if (tag == "input") { // visible inline?
+      assert_in_array(
+        editor.innerHTML,
+        [
+          `<div><span></span>abc<${tag}></div>`,
+          `<div><span></span>abc<${tag}><br></div>`,
+        ],
+        `The text should be inserted after the previous empty inline element of <${tag}>`
+      );
+    } else if (tag == "hr") { // block
+      assert_in_array(
+        editor.innerHTML,
+        [
+          `<div><span></span>abc<${tag}></div>`,
+          `<div><span></span>abc<br><${tag}></div>`,
+        ],
+        `The text should be inserted after the previous empty inline element of <${tag}>`
+      );
+    } else {
+      assert_in_array(
+        editor.innerHTML,
+        [
+          `<div>abc<span></span><${tag}></div>`,
+          `<div>abc<span></span><${tag}><br></div>`,
+        ],
+        `The text should be inserted before the previous empty inline element of <${tag}>`
+      );
+    }
+  }, `Inserting text when selection is collapsed in <${tag}> which follows an empty <span> element`);
+
+  test(() => {
+    editor.innerHTML = `<div>abc<span></span></div>`;
+    const element = document.createElement(tag);
+    editor.firstChild.appendChild(element);
+    editor.focus();
+    const selection = getSelection();
+    selection.collapse(element, 0);
+    document.execCommand("insertText", false, "def");
+    if (tag == "br") {
+      assert_in_array(
+        editor.innerHTML,
+        [
+          "<div>abcdef<span></span></div>",
+          "<div>abcdef<span></span><br></div>",
+        ],
+        `The text should be inserted at end of the first text node before empty <span> and <br>`
+      );
+    } else if (tag == "hr") { // block
+      assert_in_array(
+        editor.innerHTML,
+        [
+          `<div>abc<span></span>def<${tag}></div>`,
+          `<div>abc<span></span>def<br><${tag}></div>`,
+        ],
+        `The text should be inserted after the previous empty inline element of <${tag}> even if the empty element follows a text node`
+      );
+    } else {
+      assert_in_array(
+        editor.innerHTML,
+        [
+          `<div>abcdef<span></span><${tag}></div>`,
+          `<div>abcdef<span></span><${tag}><br></div>`,
+        ],
+        `The text should be inserted before the previous empty inline element of <${tag}>`
+      );
+    }
+  }, `Inserting text when selection is collapsed in <${tag}> which follows a text node and an empty <span> element`);
+
+  test(() => {
+    editor.innerHTML = `<div><span>abc</span></div>`;
+    const element = document.createElement(tag);
+    editor.firstChild.appendChild(element);
+    editor.focus();
+    const selection = getSelection();
+    selection.collapse(element, 0);
+    document.execCommand("insertText", false, "def");
+    if (tag == "br") {
+      assert_in_array(
+        editor.innerHTML,
+        [
+          "<div><span>abcdef</span></div>",
+          "<div><span>abcdef</span><br></div>",
+        ],
+        `The text should be inserted at end of the text node in <span>`
+      );
+    } else if (tag == "hr") { // block
+      assert_in_array(
+        editor.innerHTML,
+        [
+          `<div><span>abc</span>def<${tag}></div>`,
+          `<div><span>abc</span>def<br><${tag}></div>`,
+        ],
+        `The text should be inserted at after the span and before <${tag}>`
+      );
+    } else {
+      assert_in_array(
+        editor.innerHTML,
+        [
+          `<div><span>abcdef</span><${tag}></div>`,
+          `<div><span>abcdef</span><${tag}><br></div>`,
+        ],
+        `The text should be inserted at end of the text node in <span> before <${tag}>`
+      );
+    }
+  }, `Inserting text when selection is collapsed in <${tag}> which follows a non-empty <span> element`);
+
+  test(() => {
+    editor.innerHTML = `<div>abc<span></span>\n</div>`;
+    const element = document.createElement(tag);
+    editor.firstChild.appendChild(element);
+    editor.focus();
+    const selection = getSelection();
+    selection.collapse(element, 0);
+    document.execCommand("insertText", false, "def");
+    if (tag == "br") {
+      assert_in_array(
+        editor.innerHTML.replace(/\n/g, " "),
+        [
+          "<div>abcdef<span></span></div>",
+          "<div>abcdef<span></span><br></div>",
+          "<div>abcdef<span></span> </div>",
+          "<div>abcdef<span></span> <br></div>",
+        ],
+        `The text should be inserted at end of the first text node with ignoring the empty <span> and invisible text node before <br>`
+      );
+    } else if (tag == "img" || tag == "input") { // visible inline
+      assert_in_array(
+        editor.innerHTML.replace(/\n/g, " "),
+        [
+          `<div>abc<span></span> def<${tag}></div>`,
+          `<div>abc<span></span> def<${tag}><br></div>`,
+          `<div>abc<span></span>&nbsp;def<${tag}></div>`,
+          `<div>abc<span></span>&nbsp;def<${tag}><br></div>`,
+        ],
+        `The text should be inserted at end of the last visible text node`
+      );
+    } else if (tag == "hr") { // block
+      assert_in_array(
+        editor.innerHTML,
+        [
+          `<div>abc<span></span>def<${tag}></div>`,
+          `<div>abc<span></span>def<br><${tag}></div>`,
+        ],
+        `The text should be inserted after the previous empty inline element`
+      );
+    } else {
+      assert_in_array(
+        editor.innerHTML.replace(/\n/g, " "),
+        [
+          `<div>abcdef<span></span> <${tag}></div>`,
+          `<div>abcdef<span></span> <${tag}><br></div>`,
+        ],
+        `The text should be inserted before the previous empty inline element`
+      );
+    }
+  }, `Inserting text when selection is collapsed in <${tag}> which follows a text node, an empty <span> element and white-space only text node`);
+}
+
+</script>
\ No newline at end of file