insertParagraph.html (3451B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="timeout" content="long"> 6 <meta name="variant" content="?white-space=normal"> 7 <meta name="variant" content="?white-space=pre"> 8 <meta name="variant" content="?white-space=pre-line"> 9 <meta name="variant" content="?white-space=pre-wrap"> 10 <title>excCommand("insertParagraph") in plaintext-only</title> 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script src="../include/editor-test-utils.js"></script> 14 <script> 15 "use strict"; 16 17 const searchParams = new URLSearchParams(document.location.search); 18 const whiteSpace = searchParams.get("white-space"); 19 const useBR = whiteSpace == "normal"; 20 21 addEventListener("load", () => { 22 const editingHost = document.createElement("div"); 23 editingHost.style.whiteSpace = whiteSpace; 24 editingHost.setAttribute("contenteditable", "plaintext-only"); 25 document.body.appendChild(editingHost); 26 editingHost.focus(); 27 editingHost.getBoundingClientRect(); 28 const utils = new EditorTestUtils(editingHost); 29 30 /** 31 * insertParagraph command in plaintext-only is available only with document.execCommand. 32 * It should work as same as contenteditable=true, therefore, this test checks only 33 * basic behavior. Various edge cases should be tested in run/insertparagraph.html. 34 * 35 * Currently, <br> is used for padding line break in empty paragraph. This won't appear 36 * in `.textContent` of the editing host, but the paragraph itself does not appear in 37 * the value too. Therefore, web apps anyway need to use `.innerHTML` to get the result. 38 * So, using <br> should not be a problem for web apps. 39 */ 40 41 for (const data of [ 42 { 43 initialInnerHTML: "<p>[]AB</p>", 44 expected: "<p><br></p><p>AB</p>", 45 }, 46 { 47 initialInnerHTML: "<p>A[]B</p>", 48 expected: "<p>A</p><p>B</p>", 49 }, 50 { 51 initialInnerHTML: "<p>AB[]</p>", 52 expected: "<p>AB</p><p><br></p>", 53 }, 54 { 55 initialInnerHTML: `<p style="white-space:normal">[]AB</p>`, 56 expected: `<p style="white-space:normal"><br></p><p style="white-space:normal">AB</p>`, 57 }, 58 { 59 initialInnerHTML: `<p style="white-space:pre">[]AB</p>`, 60 expected: `<p style="white-space:pre"><br></p><p style="white-space:pre">AB</p>`, 61 }, 62 { 63 initialInnerHTML: `<p style="white-space:pre-line">[]AB</p>`, 64 expected: `<p style="white-space:pre-line"><br></p><p style="white-space:pre-line">AB</p>`, 65 }, 66 { 67 initialInnerHTML: `<p style="white-space:pre-wrap">[]AB</p>`, 68 expected: `<p style="white-space:pre-wrap"><br></p><p style="white-space:pre-wrap">AB</p>`, 69 }, 70 { 71 initialInnerHTML: "<ul><li>[]AB</li></ul>", 72 expected: "<ul><li><br></li><li>AB</li></ul>", 73 }, 74 { 75 initialInnerHTML: "<ul><li>A[]B</li></ul>", 76 expected: "<ul><li>A</li><li>B</li></ul>", 77 }, 78 { 79 initialInnerHTML: "<ul><li>AB[]</li></ul>", 80 expected: "<ul><li>AB</li><li><br></li></ul>", 81 }, 82 ]) { 83 test(() => { 84 utils.setupEditingHost(data.initialInnerHTML); 85 document.execCommand("insertParagraph"); 86 if (Array.isArray(data.expected)) { 87 assert_in_array(editingHost.innerHTML, data.expected); 88 } else { 89 assert_equals(editingHost.innerHTML, data.expected); 90 } 91 }, `execCommand("insertParagraph") when ${data.initialInnerHTML}`); 92 } 93 }, {once: true}); 94 </script> 95 </head> 96 <body></body> 97 </html>