insert-paragraph-in-void-element.tentative.html (8246B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Test insertParagraph when selection collapsed in void element</title> 4 <meta name="timeout" content="long"> 5 <script src=/resources/testharness.js></script> 6 <script src=/resources/testharnessreport.js></script> 7 <div contenteditable></div> 8 <script> 9 "use strict"; 10 11 const voidElements = [ 12 "br", 13 "embed", 14 "hr", 15 "img", 16 "input", 17 "wbr", 18 ]; 19 20 // This test tests whether the inserted text is inserted into, when selection 21 // is collapsed in the void element. The expected results are based on Blink, 22 // but the results of <hr>, <embed> and <wbr> elements are not consistent with 23 // the other elements'. Therefore, Blink also does not pass some of the 24 // following tests. 25 // FYI: This cannot be tested by editing/run because there is no way to collapse 26 // selection into a void element with the framework. 27 28 const editor = document.querySelector("div[contenteditable]"); 29 for (const container of ["div", "h1", "li"]) { 30 const openTagOfContainer = (() => { 31 if (container == "li") { 32 return "<ol><li>"; 33 } 34 return `<${container}>`; 35 })(); 36 const closeTagOfContainer = (() => { 37 if (container == "li") { 38 return "</li></ol>"; 39 } 40 return `</${container}>`; 41 })(); 42 const closeAndOpenTagsOfSplitPoint = (() => { 43 if (container == "li") { 44 return "</li><li>"; 45 } 46 return `</${container}><${container}>`; 47 })(); 48 for (const tag of voidElements) { 49 const visibleTag = tag == "hr" || tag == "img" || tag == "input"; 50 test(() => { 51 editor.innerHTML = `${openTagOfContainer}<${tag}>${closeTagOfContainer}`; 52 const element = editor.querySelector(tag); 53 editor.focus(); 54 const selection = getSelection(); 55 selection.collapse(element, 0); 56 document.execCommand("insertParagraph"); 57 if (tag == "br") { 58 if (!visibleTag && container == "h1") { 59 assert_in_array( 60 editor.innerHTML, 61 `${openTagOfContainer}<br>${closeTagOfContainer}<div><br></div>`, 62 `The paragraph should be inserted before the <${tag}> element` 63 ); 64 } else { 65 assert_in_array( 66 editor.innerHTML, 67 `${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<br>${closeTagOfContainer}`, 68 `The paragraph should be inserted before the <${tag}> element` 69 ); 70 } 71 } else if (!visibleTag && container == "h1") { 72 assert_in_array( 73 editor.innerHTML, 74 [ 75 `${openTagOfContainer}<br>${closeTagOfContainer}<div><${tag}></div>`, 76 `${openTagOfContainer}<br>${closeTagOfContainer}<div><${tag}><br></div>`, 77 ], 78 `The paragraph should be inserted before the <${tag}> element` 79 ); 80 } else { 81 assert_in_array( 82 editor.innerHTML, 83 [ 84 `${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<${tag}>${closeTagOfContainer}`, 85 `${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<${tag}><br>${closeTagOfContainer}`, 86 ], 87 `The paragraph should be inserted before the <${tag}> element` 88 ); 89 } 90 }, `Inserting paragraph when selection is collapsed in <${tag}> in <${container}> which is only child`); 91 92 test(() => { 93 editor.innerHTML = `${openTagOfContainer}<${tag}>${closeTagOfContainer}`; 94 const element = editor.querySelector(tag); 95 editor.focus(); 96 const selection = getSelection(); 97 selection.collapse(element, 0); 98 element.getBoundingClientRect(); 99 document.execCommand("insertParagraph"); 100 if (tag == "br") { 101 if (!visibleTag && container == "h1") { 102 assert_in_array( 103 editor.innerHTML, 104 `${openTagOfContainer}<br>${closeTagOfContainer}<div><br></div>`, 105 `The paragraph should be inserted before the <${tag}> element` 106 ); 107 } else { 108 assert_in_array( 109 editor.innerHTML, 110 `${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<br>${closeTagOfContainer}`, 111 `The paragraph should be inserted before the <${tag}> element` 112 ); 113 } 114 } else if (!visibleTag && container == "h1") { 115 assert_in_array( 116 editor.innerHTML, 117 [ 118 `${openTagOfContainer}<br>${closeTagOfContainer}<div><${tag}></div>`, 119 `${openTagOfContainer}<br>${closeTagOfContainer}<div><${tag}><br></div>`, 120 ], 121 `The paragraph should be inserted before the <${tag}> element` 122 ); 123 } else { 124 assert_in_array( 125 editor.innerHTML, 126 [ 127 `${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<${tag}>${closeTagOfContainer}`, 128 `${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<${tag}><br>${closeTagOfContainer}`, 129 ], 130 `The paragraph should be inserted before the <${tag}> element` 131 ); 132 } 133 }, `Inserting paragraph when selection is collapsed in <${tag}> in <${container}> which is only child (explicitly flushes maybe pending layout)`); 134 135 test(() => { 136 editor.innerHTML = `${openTagOfContainer}abc<${tag}>${closeTagOfContainer}`; 137 const element = editor.querySelector(tag); 138 editor.focus(); 139 const selection = getSelection(); 140 selection.collapse(element, 0); 141 document.execCommand("insertParagraph"); 142 if (tag == "br") { 143 if (!visibleTag && container == "h1") { 144 assert_in_array( 145 editor.innerHTML, 146 [ 147 `${openTagOfContainer}abc${closeTagOfContainer}<div><br></div>`, 148 `${openTagOfContainer}abc<br>${closeTagOfContainer}<div><br></div>`, 149 ], 150 `The paragraph should be split before the <${tag}> element` 151 ); 152 } else { 153 assert_in_array( 154 editor.innerHTML, 155 [ 156 `${openTagOfContainer}abc${closeAndOpenTagsOfSplitPoint}<br>${closeTagOfContainer}`, 157 `${openTagOfContainer}abc<br>${closeAndOpenTagsOfSplitPoint}<br>${closeTagOfContainer}`, 158 ], 159 `The paragraph should be split before the <${tag}> element` 160 ); 161 } 162 } else if (!visibleTag && container == "h1") { 163 assert_in_array( 164 editor.innerHTML, 165 [ 166 `${openTagOfContainer}abc${closeTagOfContainer}<div><${tag}></div>`, 167 `${openTagOfContainer}abc<br>${closeTagOfContainer}<div><${tag}></div>`, 168 `${openTagOfContainer}abc${closeTagOfContainer}<div><${tag}><br></div>`, 169 `${openTagOfContainer}abc<br>${closeTagOfContainer}<div><${tag}><br></div>`, 170 ], 171 `The paragraph should be split before the <${tag}> element` 172 ); 173 } else { 174 assert_in_array( 175 editor.innerHTML, 176 [ 177 `${openTagOfContainer}abc${closeAndOpenTagsOfSplitPoint}<${tag}>${closeTagOfContainer}`, 178 `${openTagOfContainer}abc<br>${closeAndOpenTagsOfSplitPoint}<${tag}>${closeTagOfContainer}`, 179 `${openTagOfContainer}abc${closeAndOpenTagsOfSplitPoint}<${tag}><br>${closeTagOfContainer}`, 180 `${openTagOfContainer}abc<br>${closeAndOpenTagsOfSplitPoint}<${tag}><br>${closeTagOfContainer}`, 181 ], 182 `The paragraph should be split before the <${tag}> element` 183 ); 184 } 185 }, `Inserting paragraph when selection is collapsed in <${tag}> which follows a text node in <${container}>`); 186 187 test(() => { 188 editor.innerHTML = `${openTagOfContainer}<${tag}>abc${closeTagOfContainer}`; 189 const element = editor.querySelector(tag); 190 editor.focus(); 191 const selection = getSelection(); 192 selection.collapse(element, 0); 193 document.execCommand("insertParagraph"); 194 assert_in_array( 195 editor.innerHTML, 196 [ 197 `${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<${tag}>abc${closeTagOfContainer}`, 198 `${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<${tag}>abc<br>${closeTagOfContainer}`, 199 ], 200 `The paragraph should be inserted before the <${tag}> element` 201 ); 202 }, `Inserting paragraph when selection is collapsed in <${tag}> which is followed by a text node in <${container}>`); 203 } 204 } 205 206 </script>