insertparagraph-in-editing-host-cannot-have-div.tentative.html (10714B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <meta name="timeout" content="long"> 4 5 <meta name="variant" content="?host=span&white-space=normal&display=block&command=insertParagraph"> 6 <meta name="variant" content="?host=span&white-space=pre&display=block&command=insertParagraph"> 7 <meta name="variant" content="?host=span&white-space=pre-wrap&display=block&command=insertParagraph"> 8 <meta name="variant" content="?host=span&white-space=pre-line&display=block&command=insertParagraph"> 9 <meta name="variant" content="?host=span&white-space=normal&display=block&command=insertText"> 10 <meta name="variant" content="?host=span&white-space=pre&display=block&command=insertText"> 11 <meta name="variant" content="?host=span&white-space=pre-wrap&display=block&command=insertText"> 12 <meta name="variant" content="?host=span&white-space=pre-line&display=block&command=insertText"> 13 14 <meta name="variant" content="?host=span&white-space=normal&display=inline&command=insertParagraph"> 15 <meta name="variant" content="?host=span&white-space=pre&display=inline&command=insertParagraph"> 16 <meta name="variant" content="?host=span&white-space=pre-wrap&display=inline&command=insertParagraph"> 17 <meta name="variant" content="?host=span&white-space=pre-line&display=inline&command=insertParagraph"> 18 <meta name="variant" content="?host=span&white-space=normal&display=inline&command=insertText"> 19 <meta name="variant" content="?host=span&white-space=pre&display=inline&command=insertText"> 20 <meta name="variant" content="?host=span&white-space=pre-wrap&display=inline&command=insertText"> 21 <meta name="variant" content="?host=span&white-space=pre-line&display=inline&command=insertText"> 22 23 <meta name="variant" content="?host=span&white-space=normal&display=inline-block&command=insertParagraph"> 24 <meta name="variant" content="?host=span&white-space=pre&display=inline-block&command=insertParagraph"> 25 <meta name="variant" content="?host=span&white-space=pre-wrap&display=inline-block&command=insertParagraph"> 26 <meta name="variant" content="?host=span&white-space=pre-line&display=inline-block&command=insertParagraph"> 27 <meta name="variant" content="?host=span&white-space=normal&display=inline-block&command=insertText"> 28 <meta name="variant" content="?host=span&white-space=pre&display=inline-block&command=insertText"> 29 <meta name="variant" content="?host=span&white-space=pre-wrap&display=inline-block&command=insertText"> 30 <meta name="variant" content="?host=span&white-space=pre-line&display=inline-block&command=insertText"> 31 32 <meta name="variant" content="?host=p&white-space=normal&display=block&command=insertParagraph"> 33 <meta name="variant" content="?host=p&white-space=pre&display=block&command=insertParagraph"> 34 <meta name="variant" content="?host=p&white-space=pre-wrap&display=block&command=insertParagraph"> 35 <meta name="variant" content="?host=p&white-space=pre-line&display=block&command=insertParagraph"> 36 <meta name="variant" content="?host=p&white-space=normal&display=block&command=insertText"> 37 <meta name="variant" content="?host=p&white-space=pre&display=block&command=insertText"> 38 <meta name="variant" content="?host=p&white-space=pre-wrap&display=block&command=insertText"> 39 <meta name="variant" content="?host=p&white-space=pre-line&display=block&command=insertText"> 40 41 <meta name="variant" content="?host=p&white-space=normal&display=inline&command=insertParagraph"> 42 <meta name="variant" content="?host=p&white-space=pre&display=inline&command=insertParagraph"> 43 <meta name="variant" content="?host=p&white-space=pre-wrap&display=inline&command=insertParagraph"> 44 <meta name="variant" content="?host=p&white-space=pre-line&display=inline&command=insertParagraph"> 45 <meta name="variant" content="?host=p&white-space=normal&display=inline&command=insertText"> 46 <meta name="variant" content="?host=p&white-space=pre&display=inline&command=insertText"> 47 <meta name="variant" content="?host=p&white-space=pre-wrap&display=inline&command=insertText"> 48 <meta name="variant" content="?host=p&white-space=pre-line&display=inline&command=insertText"> 49 50 <meta name="variant" content="?host=p&white-space=normal&display=inline-block&command=insertParagraph"> 51 <meta name="variant" content="?host=p&white-space=pre&display=inline-block&command=insertParagraph"> 52 <meta name="variant" content="?host=p&white-space=pre-wrap&display=inline-block&command=insertParagraph"> 53 <meta name="variant" content="?host=p&white-space=pre-line&display=inline-block&command=insertParagraph"> 54 <meta name="variant" content="?host=p&white-space=normal&display=inline-block&command=insertText"> 55 <meta name="variant" content="?host=p&white-space=pre&display=inline-block&command=insertText"> 56 <meta name="variant" content="?host=p&white-space=pre-wrap&display=inline-block&command=insertText"> 57 <meta name="variant" content="?host=p&white-space=pre-line&display=inline-block&command=insertText"> 58 59 <script src="/resources/testharness.js"></script> 60 <script src="/resources/testharnessreport.js"></script> 61 <script src="../include/editor-test-utils.js"></script> 62 <link rel=stylesheet href=../include/reset.css> 63 <title>Tests for inserting paragraph in editing host which cannot have <div> element as child</title> 64 <body></body> 65 <script> 66 const params = new URLSearchParams(location.search); 67 const tag = params.get("host"); 68 const whiteSpace = params.get("white-space"); 69 const isNewLineSignificant = whiteSpace == "pre" || whiteSpace == "pre-line" || whiteSpace == "pre-wrap"; 70 const display = params.get("display"); 71 const command = params.get("command"); 72 const editingHost = document.createElement(tag); 73 editingHost.contentEditable = true; 74 editingHost.style.whiteSpace = whiteSpace; 75 editingHost.style.display = display; 76 document.body.appendChild(editingHost); 77 78 function execInsertTextOrParagraphCommand() { 79 if (command == "insertParagraph") { 80 document.execCommand(command); 81 } else { 82 // Inserting a linefeed by insertText command should be equivalent of insertParagraph. 83 document.execCommand(command, false, "\n"); 84 } 85 } 86 87 const editingHostOpenTagAttrs = `contenteditable style="display:${display}; white-space:${whiteSpace}"`; 88 test(() => { 89 const utils = new EditorTestUtils(editingHost); 90 utils.setupEditingHost(`a[]b`); 91 editingHost.getBoundingClientRect(); 92 execInsertTextOrParagraphCommand(); 93 // A linefeed should be inserted if it's significant. Otherwise, <br>. 94 assert_equals( 95 editingHost.innerHTML, 96 isNewLineSignificant ? "a\nb" : "a<br>b" 97 ); 98 }, `<${tag} ${editingHostOpenTagAttrs}>a[]b</${tag}>`); 99 100 test(() => { 101 const utils = new EditorTestUtils(editingHost); 102 utils.setupEditingHost(`<span style="white-space:normal">a[]b</span>`); 103 editingHost.getBoundingClientRect(); 104 execInsertTextOrParagraphCommand(); 105 // A <br> element should be inserted if another <span> makes the linebreaks not significant. 106 assert_equals(editingHost.innerHTML, `<span style="white-space:normal">a<br>b</span>`); 107 }, `<${tag} ${editingHostOpenTagAttrs}><span style="white-space:normal">a[]b</span></${tag}>`); 108 109 if (isNewLineSignificant) { 110 test(() => { 111 const utils = new EditorTestUtils(editingHost); 112 utils.setupEditingHost(`<span style="white-space:normal"><span style="white-space:${whiteSpace}">a[]b</span></span>`); 113 editingHost.getBoundingClientRect(); 114 execInsertTextOrParagraphCommand(); 115 // A linefeed should be inserted even if `white-space` is changed by ancestor, but it's back to preformatted. 116 assert_equals(editingHost.innerHTML, `<span style="white-space:normal"><span style="white-space:${whiteSpace}">a\nb</span></span>`); 117 }, `<${tag} ${editingHostOpenTagAttrs}><span style="white-space:normal"><span style="white-space:${whiteSpace}">a[]b</span></span></${tag}>`); 118 } 119 120 test(() => { 121 const utils = new EditorTestUtils(editingHost); 122 utils.setupEditingHost(`<span style="display:block">a[]b</span>`); 123 editingHost.getBoundingClientRect(); 124 execInsertTextOrParagraphCommand(); 125 // Split the internal <span> which is styled as block. 126 assert_equals( 127 editingHost.innerHTML, 128 `<span style="display:block">a</span><span style="display:block">b</span>` 129 ); 130 }, `<${tag} ${editingHostOpenTagAttrs}><span style="display:block;white-space:normal">a[]b</span></${tag}>`); 131 132 test(() => { 133 const utils = new EditorTestUtils(editingHost); 134 utils.setupEditingHost(`<div>a[]b</div>`); 135 editingHost.getBoundingClientRect(); 136 execInsertTextOrParagraphCommand(); 137 // Although neither <span> nor <p> can have <div>, but if the insertion point is in the invalid <div>, 138 // browsers should just split the <div>. 139 assert_equals(editingHost.innerHTML, `<div>a</div><div>b</div>`); 140 }, `<${tag} ${editingHostOpenTagAttrs}><div>a[]b</div></${tag}>`); 141 142 test(() => { 143 const utils = new EditorTestUtils(editingHost); 144 utils.setupEditingHost(`<div style="display:inline">a[]b</div>`); 145 editingHost.getBoundingClientRect(); 146 execInsertTextOrParagraphCommand(); 147 // If <div> is styled as inline, it should be treated like <span>. 148 assert_equals(editingHost.innerHTML, `<div style="display:inline">a\nb</div>`); 149 }, `<${tag} ${editingHostOpenTagAttrs}><div style="display:inline">a[]b</div></${tag}>`); 150 151 test(() => { 152 const utils = new EditorTestUtils(editingHost); 153 utils.setupEditingHost(`<div style="display:inline-block">a[]b</div>`); 154 editingHost.getBoundingClientRect(); 155 execInsertTextOrParagraphCommand(); 156 // If <div> is styled as inline-block, it should be treated like <span>. 157 assert_equals( 158 editingHost.innerHTML, 159 isNewLineSignificant 160 ? `<div style="display:inline-block">a\nb</div>` 161 : `<div style="display:inline-block">a<br>b</div>` 162 ); 163 }, `<${tag} ${editingHostOpenTagAttrs}><div style="display:inline-block">a[]b</div></${tag}>`); 164 165 test(() => { 166 const utils = new EditorTestUtils(editingHost); 167 utils.setupEditingHost(`<div style="display:inline;white-space:normal">a[]b</div>`); 168 editingHost.getBoundingClientRect(); 169 execInsertTextOrParagraphCommand(); 170 // If <div> is styled as inline, it should be treated like <span>. 171 assert_equals(editingHost.innerHTML, `<div style="display:inline;white-space:normal">a<br>b</div>`); 172 }, `<${tag} ${editingHostOpenTagAttrs}><div style="display:inline;white-space:normal">a[]b</div></${tag}>`); 173 174 test(() => { 175 const utils = new EditorTestUtils(editingHost); 176 utils.setupEditingHost(`<div style="display:inline-block;white-space:normal">a[]b</div>`); 177 editingHost.getBoundingClientRect(); 178 execInsertTextOrParagraphCommand(); 179 // If <div> is styled as inline-block, it should be treated like <span>. 180 assert_equals(editingHost.innerHTML, `<div style="display:inline-block;white-space:normal">a<br>b</div>`); 181 }, `<${tag} ${editingHostOpenTagAttrs}><div style="display:inline-block;white-space:normal">a[]b</div></${tag}>`); 182 </script>