insert-paragraph-in-void-element.tentative.html

<!doctype html>
<meta charset=utf-8>
<title>Test insertParagraph 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 <hr>, <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 container of ["div", "h1", "li"]) {
  const openTagOfContainer = (() => {
    if (container == "li") {
      return "<ol><li>";
    }
    return `<${container}>`;
  })();
  const closeTagOfContainer = (() => {
    if (container == "li") {
      return "</li></ol>";
    }
    return `</${container}>`;
  })();
  const closeAndOpenTagsOfSplitPoint = (() => {
    if (container == "li") {
      return "</li><li>";
    }
    return `</${container}><${container}>`;
  })();
  for (const tag of voidElements) {
    const visibleTag = tag == "hr" || tag == "img" || tag == "input";
    test(() => {
      editor.innerHTML = `${openTagOfContainer}<${tag}>${closeTagOfContainer}`;
      const element = editor.querySelector(tag);
      editor.focus();
      const selection = getSelection();
      selection.collapse(element, 0);
      document.execCommand("insertParagraph");
      if (tag == "br") {
        if (!visibleTag && container == "h1") {
          assert_in_array(
            editor.innerHTML,
            `${openTagOfContainer}<br>${closeTagOfContainer}<div><br></div>`,
            `The paragraph should be inserted before the <${tag}> element`
          );
        } else {
          assert_in_array(
            editor.innerHTML,
            `${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<br>${closeTagOfContainer}`,
            `The paragraph should be inserted before the <${tag}> element`
          );
        }
      } else if (!visibleTag && container == "h1") {
        assert_in_array(
          editor.innerHTML,
          [
            `${openTagOfContainer}<br>${closeTagOfContainer}<div><${tag}></div>`,
            `${openTagOfContainer}<br>${closeTagOfContainer}<div><${tag}><br></div>`,
          ],
          `The paragraph should be inserted before the <${tag}> element`
        );
      } else {
        assert_in_array(
          editor.innerHTML,
          [
            `${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<${tag}>${closeTagOfContainer}`,
            `${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<${tag}><br>${closeTagOfContainer}`,
          ],
          `The paragraph should be inserted before the <${tag}> element`
        );
      }
    }, `Inserting paragraph when selection is collapsed in <${tag}> in <${container}> which is only child`);

    test(() => {
      editor.innerHTML = `${openTagOfContainer}<${tag}>${closeTagOfContainer}`;
      const element = editor.querySelector(tag);
      editor.focus();
      const selection = getSelection();
      selection.collapse(element, 0);
      element.getBoundingClientRect();
      document.execCommand("insertParagraph");
      if (tag == "br") {
        if (!visibleTag && container == "h1") {
          assert_in_array(
            editor.innerHTML,
            `${openTagOfContainer}<br>${closeTagOfContainer}<div><br></div>`,
            `The paragraph should be inserted before the <${tag}> element`
          );
        } else {
          assert_in_array(
            editor.innerHTML,
            `${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<br>${closeTagOfContainer}`,
            `The paragraph should be inserted before the <${tag}> element`
          );
        }
      } else if (!visibleTag && container == "h1") {
        assert_in_array(
          editor.innerHTML,
          [
            `${openTagOfContainer}<br>${closeTagOfContainer}<div><${tag}></div>`,
            `${openTagOfContainer}<br>${closeTagOfContainer}<div><${tag}><br></div>`,
          ],
          `The paragraph should be inserted before the <${tag}> element`
        );
      } else {
        assert_in_array(
          editor.innerHTML,
          [
            `${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<${tag}>${closeTagOfContainer}`,
            `${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<${tag}><br>${closeTagOfContainer}`,
          ],
          `The paragraph should be inserted before the <${tag}> element`
        );
      }
    }, `Inserting paragraph when selection is collapsed in <${tag}> in <${container}> which is only child (explicitly flushes maybe pending layout)`);

    test(() => {
      editor.innerHTML = `${openTagOfContainer}abc<${tag}>${closeTagOfContainer}`;
      const element = editor.querySelector(tag);
      editor.focus();
      const selection = getSelection();
      selection.collapse(element, 0);
      document.execCommand("insertParagraph");
      if (tag == "br") {
        if (!visibleTag && container == "h1") {
          assert_in_array(
            editor.innerHTML,
            [
              `${openTagOfContainer}abc${closeTagOfContainer}<div><br></div>`,
              `${openTagOfContainer}abc<br>${closeTagOfContainer}<div><br></div>`,
            ],
            `The paragraph should be split before the <${tag}> element`
          );
        } else {
          assert_in_array(
            editor.innerHTML,
            [
              `${openTagOfContainer}abc${closeAndOpenTagsOfSplitPoint}<br>${closeTagOfContainer}`,
              `${openTagOfContainer}abc<br>${closeAndOpenTagsOfSplitPoint}<br>${closeTagOfContainer}`,
            ],
            `The paragraph should be split before the <${tag}> element`
          );
        }
      } else if (!visibleTag && container == "h1") {
        assert_in_array(
          editor.innerHTML,
          [
            `${openTagOfContainer}abc${closeTagOfContainer}<div><${tag}></div>`,
            `${openTagOfContainer}abc<br>${closeTagOfContainer}<div><${tag}></div>`,
            `${openTagOfContainer}abc${closeTagOfContainer}<div><${tag}><br></div>`,
            `${openTagOfContainer}abc<br>${closeTagOfContainer}<div><${tag}><br></div>`,
          ],
          `The paragraph should be split before the <${tag}> element`
        );
      } else {
        assert_in_array(
          editor.innerHTML,
          [
            `${openTagOfContainer}abc${closeAndOpenTagsOfSplitPoint}<${tag}>${closeTagOfContainer}`,
            `${openTagOfContainer}abc<br>${closeAndOpenTagsOfSplitPoint}<${tag}>${closeTagOfContainer}`,
            `${openTagOfContainer}abc${closeAndOpenTagsOfSplitPoint}<${tag}><br>${closeTagOfContainer}`,
            `${openTagOfContainer}abc<br>${closeAndOpenTagsOfSplitPoint}<${tag}><br>${closeTagOfContainer}`,
          ],
          `The paragraph should be split before the <${tag}> element`
        );
      }
    }, `Inserting paragraph when selection is collapsed in <${tag}> which follows a text node in <${container}>`);

    test(() => {
      editor.innerHTML = `${openTagOfContainer}<${tag}>abc${closeTagOfContainer}`;
      const element = editor.querySelector(tag);
      editor.focus();
      const selection = getSelection();
      selection.collapse(element, 0);
      document.execCommand("insertParagraph");
      assert_in_array(
        editor.innerHTML,
        [
          `${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<${tag}>abc${closeTagOfContainer}`,
          `${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<${tag}>abc<br>${closeTagOfContainer}`,
        ],
        `The paragraph should be inserted before the <${tag}> element`
      );
    }, `Inserting paragraph when selection is collapsed in <${tag}> which is followed by a text node in <${container}>`);
  }
}

</script>
chromium/third_party/blink/web_tests/external/wpt/editing/other/insert-paragraph-in-void-element.tentative.html
