test_bug1310912.html (6737B)
1 <!DOCTYPE html> 2 <!-- 3 https://bugzilla.mozilla.org/show_bug.cgi?id=1310912 4 --> 5 <html> 6 <head> 7 <title>Test for Bug 1310912</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <script src="/tests/SimpleTest/EventUtils.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 11 </head> 12 <body> 13 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1310912">Mozilla Bug 1310912</a> 14 <p id="display"></p> 15 <div id="content" style="display: none;"> 16 17 </div> 18 19 <div contenteditable>ABC</div> 20 <pre id="test"> 21 22 <script class="testbody" type="application/javascript"> 23 SimpleTest.waitForExplicitFinish(); 24 SimpleTest.waitForFocus(function() { 25 const editor = document.querySelector("div[contenteditable]"); 26 27 editor.focus(); 28 const sel = window.getSelection(); 29 sel.collapse(editor.childNodes[0], editor.textContent.length); 30 31 (function testInsertEmptyTextNodeWhenCaretIsAtEndOfComposition() { 32 const description = 33 "testInsertEmptyTextNodeWhenCaretIsAtEndOfComposition: "; 34 synthesizeCompositionChange({ 35 composition: { 36 string: "DEF", 37 clauses: [ 38 { length: 3, attr: COMPOSITION_ATTR_RAW_CLAUSE }, 39 ], 40 }, 41 caret: { start: 3, length: 0 }, 42 }); 43 is( 44 editor.textContent, 45 "ABCDEF", 46 `${description} Composing text "DEF" should be inserted at end of the text node` 47 ); 48 49 window.getSelection().getRangeAt(0).insertNode(document.createTextNode("")); 50 is( 51 editor.childNodes[0].data, 52 "ABCDEF", 53 `${ 54 description 55 } First text node should have both preceding text and the composing text` 56 ); 57 is( 58 editor.childNodes[1].data, 59 "", 60 `${description} Second text node should be empty` 61 ); 62 })(); 63 64 (function testInsertEmptyTextNodeWhenCaretIsAtStartOfComposition() { 65 const description = 66 "testInsertEmptyTextNodeWhenCaretIsAtStartOfComposition: "; 67 synthesizeCompositionChange({ 68 composition: { 69 string: "GHI", 70 clauses: [ 71 { length: 3, attr: COMPOSITION_ATTR_CONVERTED_CLAUSE }, 72 ], 73 }, 74 caret: { start: 0, length: 0 }, 75 }); 76 is( 77 editor.textContent, 78 "ABCGHI", 79 `${description} Composing text should be replaced with new one` 80 ); 81 82 window.getSelection().getRangeAt(0).insertNode(document.createTextNode("")); 83 is( 84 editor.childNodes[0].data, 85 "ABC", 86 `${ 87 description 88 } First text node should have only the preceding text of the composition` 89 ); 90 is( 91 editor.childNodes[1].data, 92 "", 93 `${description} Second text node should have be empty` 94 ); 95 is( 96 editor.childNodes[2].data, 97 "GHI", 98 `${description} Third text node should have only composing text` 99 ); 100 })(); 101 102 (function testInsertEmptyTextNodeWhenCaretIsAtStartOfCompositionAgain() { 103 const description = 104 "testInsertEmptyTextNodeWhenCaretIsAtStartOfCompositionAgain: "; 105 synthesizeCompositionChange({ 106 composition: { 107 string: "JKL", 108 clauses: [ 109 { length: 3, attr: COMPOSITION_ATTR_CONVERTED_CLAUSE }, 110 ], 111 }, 112 caret: { start: 0, length: 0 }, 113 }); 114 is( 115 editor.textContent, 116 "ABCJKL", 117 `${description} Composing text should be replaced` 118 ); 119 120 window.getSelection().getRangeAt(0).insertNode(document.createTextNode("")); 121 is( 122 editor.childNodes[0].data, 123 "ABC", 124 `${ 125 description 126 } First text node should have only the preceding text of the composition` 127 ); 128 is( 129 editor.childNodes[1].data, 130 "", 131 `${description} Second text node should have be empty` 132 ); 133 is( 134 editor.childNodes[2].data, 135 "JKL", 136 `${description} Third text node should have only composing text` 137 ); 138 })(); 139 140 (function testInsertEmptyTextNodeWhenCaretIsAtMiddleOfComposition() { 141 const description = 142 "testInsertEmptyTextNodeWhenCaretIsAtMiddleOfComposition: "; 143 synthesizeCompositionChange({ 144 composition: { 145 string: "MNO", 146 clauses: [ 147 { length: 3, attr: COMPOSITION_ATTR_CONVERTED_CLAUSE }, 148 ], 149 }, 150 caret: { start: 1, length: 0 }, 151 }); 152 is( 153 editor.textContent, 154 "ABCMNO", 155 `${description} Composing text should be replaced` 156 ); 157 158 // Normal selection is the caret, therefore, inserting empty text node 159 // creates the following DOM tree: 160 // <div contenteditable> 161 // |- #text ("ABCM") 162 // |- #text ("") 163 // +- #text ("NO") 164 window.getSelection().getRangeAt(0).insertNode(document.createTextNode("")); 165 is( 166 editor.childNodes[0].data, 167 "ABCM", 168 `${ 169 description 170 } First text node should have the preceding text and composing string before the split point` 171 ); 172 is( 173 editor.childNodes[1].data, 174 "", 175 `${description} Second text node should be empty` 176 ); 177 is( 178 editor.childNodes[2].data, 179 "NO", 180 `${ 181 description 182 } Third text node should have the remaining composing string` 183 ); 184 todo_is(editor.childNodes[3].nodeName, "BR", 185 "Forth node is empty text node, but I don't where this comes from"); 186 })(); 187 188 // Then, committing composition makes the commit string into the first 189 // text node and makes the following text nodes empty. 190 // XXX I don't know whether the empty text nodes should be removed or not 191 // at this moment. 192 (function testCommitComposition() { 193 const description = "testCommitComposition: "; 194 synthesizeComposition({ type: "compositioncommitasis" }); 195 is( 196 editor.textContent, 197 "ABCMNO", 198 `${description} Composing text should be committed as-is` 199 ); 200 is( 201 editor.childNodes[0].data, 202 "ABCMNO", 203 `${description} First text node should have the committed string` 204 ); 205 })(); 206 207 (function testUndoComposition() { 208 const description = "testUndoComposition: "; 209 synthesizeKey("Z", { accelKey: true }); 210 is( 211 editor.textContent, 212 "ABC", 213 `${description} Text should be undone (commit string should've gone)` 214 ); 215 is( 216 editor.childNodes[0].data, 217 "ABC", 218 `${description} First text node should have all text` 219 ); 220 })(); 221 222 (function testUndoAgain() { 223 const description = "testUndoAgain: "; 224 synthesizeKey("Z", { accelKey: true, shiftKey: true }); 225 is( 226 editor.textContent, 227 "ABCMNO", 228 `${description} Text should be redone (commit string should've be back)` 229 ); 230 is( 231 editor.childNodes[0].data, 232 "ABCMNO", 233 `${description} First text node should have all text` 234 ); 235 })(); 236 237 SimpleTest.finish(); 238 }); 239 </script> 240 </pre> 241 </body> 242 </html>