insertlinebreak-with-white-space-style.tentative.html (16948B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <meta name="timeout" content="long"> 4 <meta name="variant" content="?pre"> 5 <meta name="variant" content="?pre-wrap"> 6 <meta name="variant" content="?pre-line"> 7 <meta name="variant" content="?nowrap"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="../include/editor-test-utils.js"></script> 11 <link rel=stylesheet href=../include/reset.css> 12 <title>insertlinebreak in white-space specified element</title> 13 <body><div contenteditable></div></body> 14 <script> 15 /** 16 * The expected behavior is based on Chrome 91. 17 */ 18 const style = location.search.substr(1); 19 const isNewLineSignificant = style == "pre" || style == "pre-wrap" || style == "pre-line"; 20 const editingHost = document.querySelector("div[contenteditable]"); 21 for (const defaultParagraphSeparator of ["div", "p"]) { 22 document.execCommand("defaultparagraphseparator", false, defaultParagraphSeparator); 23 for (const display of ["block", "inline", "inline-block"]) { 24 // insertlinebreak at direct child of editing host. 25 test(() => { 26 editingHost.style.whiteSpace = style; 27 editingHost.style.display = display; 28 const utils = new EditorTestUtils(editingHost); 29 utils.setupEditingHost(`abc[]`); 30 editingHost.getBoundingClientRect(); 31 document.execCommand("insertlinebreak"); 32 if (isNewLineSignificant) { 33 assert_in_array( 34 editingHost.innerHTML, 35 [ 36 `abc\n\n`, 37 `abc\n<br>`, 38 ], 39 "A linefeed should be inserted at end" 40 ); 41 } else { 42 assert_equals( 43 editingHost.innerHTML, 44 `abc<br><br>`, 45 "A <br> should be inserted at end" 46 ); 47 } 48 }, `<div contenteditable style="white-space:${style}; display:${display}">abc[]</div> (defaultparagraphseparator: ${defaultParagraphSeparator})`); 49 50 test(() => { 51 editingHost.style.whiteSpace = style; 52 editingHost.style.display = display; 53 const utils = new EditorTestUtils(editingHost); 54 utils.setupEditingHost(`[]abc`); 55 editingHost.getBoundingClientRect(); 56 document.execCommand("insertlinebreak"); 57 if (isNewLineSignificant) { 58 assert_in_array( 59 editingHost.innerHTML, 60 [ 61 `\nabc`, 62 `\nabc<br>`, 63 ], 64 "A linefeed should be inserted at start" 65 ); 66 } else { 67 assert_in_array( 68 editingHost.innerHTML, 69 [ 70 `<br>abc`, 71 `<br>abc<br>`, 72 ], 73 "A <br> should be inserted at start" 74 ); 75 } 76 }, `<div contenteditable style="white-space:${style}; display:${display}">[]abc</div> (defaultparagraphseparator: ${defaultParagraphSeparator})`); 77 78 test(() => { 79 editingHost.style.whiteSpace = style; 80 editingHost.style.display = display; 81 const utils = new EditorTestUtils(editingHost); 82 utils.setupEditingHost(`a[]bc`); 83 editingHost.getBoundingClientRect(); 84 document.execCommand("insertlinebreak"); 85 if (isNewLineSignificant) { 86 assert_in_array( 87 editingHost.innerHTML, 88 [ 89 `a\nbc`, 90 `a\nbc<br>`, 91 ], 92 "A linefeed should be inserted" 93 ); 94 } else { 95 assert_in_array( 96 editingHost.innerHTML, 97 [ 98 `a<br>bc`, 99 `a<br>bc<br>`, 100 ], 101 "A <br> should be inserted" 102 ); 103 } 104 }, `<div contenteditable style="white-space:${style}; display:${display}">a[]bc</div> (defaultparagraphseparator: ${defaultParagraphSeparator})`); 105 106 // inline styles should be preserved. 107 test(() => { 108 editingHost.style.whiteSpace = style; 109 editingHost.style.display = display; 110 const utils = new EditorTestUtils(editingHost); 111 utils.setupEditingHost(`abc[]`); 112 editingHost.getBoundingClientRect(); 113 document.execCommand("italic"); 114 document.execCommand("insertlinebreak"); 115 document.execCommand("inserttext", false, "def"); 116 if (isNewLineSignificant) { 117 assert_in_array( 118 editingHost.innerHTML, 119 [ 120 `abc\n<i>def</i>`, 121 `abc\n<i>def\n</i>`, 122 `abc\n<i>def<br></i>`, 123 `abc\n<i>def</i>\n`, 124 `abc\n<i>def</i><br>`, 125 ], 126 "The temporary inline style should be applied to next line" 127 ); 128 } else { 129 assert_in_array( 130 editingHost.innerHTML, 131 [ 132 `abc<br><i>def</i>`, 133 `abc<br><i>def<br></i>`, 134 `abc<br><i>def</i><br>`, 135 ], 136 "The temporary inline style should be applied to next line" 137 ); 138 } 139 }, `<div contenteditable style="white-space:${style}; display:${display}">abc[]</div> (defaultparagraphseparator: ${defaultParagraphSeparator}) (preserving temporary inline style test)`); 140 141 test(() => { 142 editingHost.style.whiteSpace = style; 143 editingHost.style.display = display; 144 const utils = new EditorTestUtils(editingHost); 145 utils.setupEditingHost(`<b>abc[]</b>`); 146 editingHost.getBoundingClientRect(); 147 document.execCommand("insertlinebreak"); 148 document.execCommand("inserttext", false, "def"); 149 if (isNewLineSignificant) { 150 assert_in_array( 151 editingHost.innerHTML, 152 [ 153 `<b>abc\ndef</b>`, 154 `<b>abc\ndef\n</b>`, 155 `<b>abc\ndef<br></b>`, 156 `<b>abc\ndef</b>\n`, 157 `<b>abc\ndef</b><br>`, 158 ], 159 "The inline style should be applied to next line" 160 ); 161 } else { 162 assert_in_array( 163 editingHost.innerHTML, 164 [ 165 `<b>abc<br>def</b>`, 166 `<b>abc<br>def<br></b>`, 167 `<b>abc<br>def</b><br>`, 168 ], 169 "The inline style should be applied to next line" 170 ); 171 } 172 }, `<div contenteditable style="white-space:${style}; display:${display}"><b>abc[]</b></div> (defaultparagraphseparator: ${defaultParagraphSeparator}) (preserving inline style test)`); 173 174 for (const paragraph of ["div", "p"]) { 175 // insertlinebreak in existing paragraph whose `white-space` is specified. 176 test(() => { 177 editingHost.style.whiteSpace = "normal"; 178 editingHost.style.display = display; 179 const utils = new EditorTestUtils(editingHost); 180 utils.setupEditingHost(`<${paragraph} style="white-space:${style}">abc[]</${paragraph}>`); 181 editingHost.getBoundingClientRect(); 182 document.execCommand("insertlinebreak"); 183 if (isNewLineSignificant) { 184 assert_in_array( 185 editingHost.innerHTML, 186 [ 187 `<${paragraph} style="white-space:${style}">abc\n\n</${paragraph}>`, 188 `<${paragraph} style="white-space:${style}">abc\n<br></${paragraph}>`, 189 ], 190 "A linefeed should be inserted at end of the paragraph" 191 ); 192 } else { 193 assert_equals( 194 editingHost.innerHTML, 195 `<${paragraph} style="white-space:${style}">abc<br><br></${paragraph}>`, 196 "A <br> should be inserted at end of the paragraph" 197 ); 198 } 199 }, `<div contenteditable style="display:${display}"><${paragraph} style="white-space:${style}">abc[]</${paragraph}></div> (defaultparagraphseparator: ${defaultParagraphSeparator})`); 200 201 test(() => { 202 editingHost.style.whiteSpace = "normal"; 203 editingHost.style.display = display; 204 const utils = new EditorTestUtils(editingHost); 205 utils.setupEditingHost(`<${paragraph} style="white-space:${style}">[]abc</${paragraph}>`); 206 editingHost.getBoundingClientRect(); 207 document.execCommand("insertlinebreak"); 208 if (isNewLineSignificant) { 209 assert_in_array( 210 editingHost.innerHTML, 211 [ 212 `<${paragraph} style="white-space:${style}">\nabc</${paragraph}>`, 213 `<${paragraph} style="white-space:${style}">\nabc<br></${paragraph}>`, 214 ], 215 "A linefeed should be inserted at start" 216 ); 217 } else { 218 assert_in_array( 219 editingHost.innerHTML, 220 [ 221 `<${paragraph} style="white-space:${style}"><br>abc</${paragraph}>`, 222 `<${paragraph} style="white-space:${style}"><br>abc<br></${paragraph}>`, 223 ], 224 "A <br> should be inserted at start" 225 ); 226 } 227 }, `<div contenteditable style="display:${display}"><${paragraph} style="white-space:${style}">[]abc</${paragraph}></div> (defaultparagraphseparator: ${defaultParagraphSeparator})`); 228 229 test(() => { 230 editingHost.style.whiteSpace = "normal"; 231 editingHost.style.display = display; 232 const utils = new EditorTestUtils(editingHost); 233 utils.setupEditingHost(`<${paragraph} style="white-space:${style}">a[]bc</${paragraph}>`); 234 editingHost.getBoundingClientRect(); 235 document.execCommand("insertlinebreak"); 236 if (isNewLineSignificant) { 237 assert_in_array( 238 editingHost.innerHTML, 239 [ 240 `<${paragraph} style="white-space:${style}">a\nbc</${paragraph}>`, 241 `<${paragraph} style="white-space:${style}">a\nbc<br></${paragraph}>`, 242 ], 243 "A linefeed should be inserted" 244 ); 245 } else { 246 assert_in_array( 247 editingHost.innerHTML, 248 [ 249 `<${paragraph} style="white-space:${style}">a<br>bc</${paragraph}>`, 250 `<${paragraph} style="white-space:${style}">a<br>bc<br></${paragraph}>`, 251 ], 252 "A <br> should be inserted" 253 ); 254 } 255 }, `<div contenteditable style="display:${display}"><${paragraph} style="white-space:${style}">a[]bc</${paragraph}></div> (defaultparagraphseparator: ${defaultParagraphSeparator})`); 256 257 // insertlinebreak in existing paragraph. 258 test(() => { 259 editingHost.style.whiteSpace = style; 260 editingHost.style.display = display; 261 const utils = new EditorTestUtils(editingHost); 262 utils.setupEditingHost(`<${paragraph}>abc[]</${paragraph}>`); 263 editingHost.getBoundingClientRect(); 264 document.execCommand("insertlinebreak"); 265 if (isNewLineSignificant) { 266 assert_in_array( 267 editingHost.innerHTML, 268 [ 269 `<${paragraph}>abc\n\n</${paragraph}>`, 270 `<${paragraph}>abc\n<br></${paragraph}>`, 271 ], 272 "A linefeed should be inserted at end of the paragraph" 273 ); 274 } else { 275 assert_equals( 276 editingHost.innerHTML, 277 `<${paragraph}>abc<br><br></${paragraph}>`, 278 "A <br> should be inserted at end of the paragraph" 279 ); 280 } 281 }, `<div contenteditable style="display:${display}; white-space:${style}"><${paragraph}>abc[]</${paragraph}></div> (defaultparagraphseparator: ${defaultParagraphSeparator})`); 282 283 test(() => { 284 editingHost.style.whiteSpace = style; 285 editingHost.style.display = display; 286 const utils = new EditorTestUtils(editingHost); 287 utils.setupEditingHost(`<${paragraph}>[]abc</${paragraph}>`); 288 editingHost.getBoundingClientRect(); 289 document.execCommand("insertlinebreak"); 290 if (isNewLineSignificant) { 291 assert_in_array( 292 editingHost.innerHTML, 293 [ 294 `<${paragraph}>\nabc</${paragraph}>`, 295 `<${paragraph}>\nabc<br></${paragraph}>`, 296 ], 297 "A linefeed should be inserted at start" 298 ); 299 } else { 300 assert_in_array( 301 editingHost.innerHTML, 302 [ 303 `<${paragraph}><br>abc</${paragraph}>`, 304 `<${paragraph}><br>abc<br></${paragraph}>`, 305 ], 306 "A <br> should be inserted at start" 307 ); 308 } 309 }, `<div contenteditable style="display:${display}; white-space:${style}"><${paragraph}>[]abc</${paragraph}></div> (defaultparagraphseparator: ${defaultParagraphSeparator})`); 310 311 test(() => { 312 editingHost.style.whiteSpace = style; 313 editingHost.style.display = display; 314 const utils = new EditorTestUtils(editingHost); 315 utils.setupEditingHost(`<${paragraph}>a[]bc</${paragraph}>`); 316 editingHost.getBoundingClientRect(); 317 document.execCommand("insertlinebreak"); 318 if (isNewLineSignificant) { 319 assert_in_array( 320 editingHost.innerHTML, 321 [ 322 `<${paragraph}>a\nbc</${paragraph}>`, 323 `<${paragraph}>a\nbc<br></${paragraph}>`, 324 ], 325 "A linefeed should be inserted" 326 ); 327 } else { 328 assert_in_array( 329 editingHost.innerHTML, 330 [ 331 `<${paragraph}>a<br>bc</${paragraph}>`, 332 `<${paragraph}>a<br>bc<br></${paragraph}>`, 333 ], 334 "A <br> should be inserted" 335 ); 336 } 337 }, `<div contenteditable style="display:${display}; white-space:${style}"><${paragraph}>a[]bc</${paragraph}></div> (defaultparagraphseparator: ${defaultParagraphSeparator})`); 338 339 // Styling the existing paragraph instead of editing host. 340 test(() => { 341 editingHost.style.whiteSpace = "normal"; 342 editingHost.style.display = "block"; 343 const utils = new EditorTestUtils(editingHost); 344 const styleAttr = `style="display:${display}; white-space:${style}"`; 345 utils.setupEditingHost(`<${paragraph} ${styleAttr}>abc[]</${paragraph}>`); 346 editingHost.getBoundingClientRect(); 347 document.execCommand("insertlinebreak"); 348 if (isNewLineSignificant) { 349 assert_in_array( 350 editingHost.innerHTML, 351 [ 352 `<${paragraph} ${styleAttr}>abc\n\n</${paragraph}>`, 353 `<${paragraph} ${styleAttr}>abc\n<br></${paragraph}>`, 354 ], 355 "A linefeed should be inserted at end of the paragraph" 356 ); 357 } else { 358 assert_equals( 359 editingHost.innerHTML, 360 `<${paragraph} ${styleAttr}>abc<br><br></${paragraph}>`, 361 "A <br> should be inserted at end of the paragraph" 362 ); 363 } 364 }, `<div contenteditable><${paragraph} style="display:${display}; white-space:${style}">abc[]</${paragraph}></div> (defaultparagraphseparator: ${defaultParagraphSeparator})`); 365 366 test(() => { 367 editingHost.style.whiteSpace = "normal"; 368 editingHost.style.display = "block"; 369 const utils = new EditorTestUtils(editingHost); 370 const styleAttr = `style="display:${display}; white-space:${style}"`; 371 utils.setupEditingHost(`<${paragraph} ${styleAttr}>[]abc</${paragraph}>`); 372 editingHost.getBoundingClientRect(); 373 document.execCommand("insertlinebreak"); 374 if (isNewLineSignificant) { 375 assert_in_array( 376 editingHost.innerHTML, 377 [ 378 `<${paragraph} ${styleAttr}>\nabc</${paragraph}>`, 379 `<${paragraph} ${styleAttr}>\nabc<br></${paragraph}>`, 380 ], 381 "A linefeed should be inserted at start" 382 ); 383 } else { 384 assert_in_array( 385 editingHost.innerHTML, 386 [ 387 `<${paragraph} ${styleAttr}><br>abc</${paragraph}>`, 388 `<${paragraph} ${styleAttr}><br>abc<br></${paragraph}>`, 389 ], 390 "A <br> should be inserted at start" 391 ); 392 } 393 }, `<div contenteditable><${paragraph} style="display:${display}; white-space:${style}">[]abc</${paragraph}></div> (defaultparagraphseparator: ${defaultParagraphSeparator})`); 394 395 test(() => { 396 editingHost.style.whiteSpace = "normal"; 397 editingHost.style.display = "block"; 398 const utils = new EditorTestUtils(editingHost); 399 const styleAttr = `style="display:${display}; white-space:${style}"`; 400 utils.setupEditingHost(`<${paragraph} ${styleAttr}>a[]bc</${paragraph}>`); 401 editingHost.getBoundingClientRect(); 402 document.execCommand("insertlinebreak"); 403 if (isNewLineSignificant) { 404 assert_in_array( 405 editingHost.innerHTML, 406 [ 407 `<${paragraph} ${styleAttr}>a\nbc</${paragraph}>`, 408 `<${paragraph} ${styleAttr}>a\nbc<br></${paragraph}>`, 409 ], 410 "A linefeed should be inserted" 411 ); 412 } else { 413 assert_in_array( 414 editingHost.innerHTML, 415 [ 416 `<${paragraph} ${styleAttr}>a<br>bc</${paragraph}>`, 417 `<${paragraph} ${styleAttr}>a<br>bc<br></${paragraph}>`, 418 ], 419 "A <br> should be inserted" 420 ); 421 } 422 }, `<div contenteditable><${paragraph} style="display:${display}; white-space:${style}">a[]bc</${paragraph}></div> (defaultparagraphseparator: ${defaultParagraphSeparator})`); 423 } 424 } 425 } 426 </script>