test_caret_move_in_vertical_content.html (10283B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1103374 5 --> 6 <head> 7 <title>Testing caret move in vertical content</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=289384">Mozilla Bug 1103374</a> 14 <input value="ABCD"><textarea>ABCD 15 EFGH</textarea> 16 <div contenteditable></div> 17 <script> 18 SimpleTest.waitForExplicitFinish(); 19 SimpleTest.waitForFocus(async () => { 20 await (async function testContentEditable() { 21 const editor = document.querySelector("div[contenteditable]"); 22 const selection = getSelection(); 23 function nodeStr(node) { 24 if (node.nodeType === Node.TEXT_NODE) { 25 return `#text ("${node.data}")`; 26 } 27 if (node.nodeType === Node.ELEMENT_NODE) { 28 return `<${node.tagName.toLowerCase()}>`; 29 } 30 return node; 31 } 32 function rangeStr(container, offset) { 33 return `{ container: ${nodeStr(container)}, offset: ${offset} }`; 34 } 35 function selectionStr() { 36 if (selection.rangeCount === 0) { 37 return "<no range>"; 38 } 39 if (selection.isCollapsed) { 40 return rangeStr(selection.focusNode, selection.focusOffset); 41 } 42 return `${ 43 rangeStr(selection.anchorNode, selection.anchorOffset) 44 } - ${ 45 rangeStr(selection.focusNode, selection.focusOffset) 46 }`; 47 } 48 await (async function testVerticalRL() { 49 editor.innerHTML = '<p style="font-family: monospace; writing-mode: vertical-rl">ABCD<br>EFGH</p>'; 50 editor.focus(); 51 const firstLine = editor.querySelector("p").firstChild; 52 const secondLine = firstLine.nextSibling.nextSibling; 53 await new Promise(resolve => requestAnimationFrame( 54 () => requestAnimationFrame(resolve)) // guarantee sending focus notification to the widget 55 ); 56 selection.collapse(firstLine, firstLine.length / 2); 57 synthesizeKey("KEY_ArrowUp"); 58 is(selectionStr(), rangeStr(firstLine, firstLine.length / 2 - 1), 59 "contenteditable: ArrowUp should move caret to previous character in vertical-rl content"); 60 selection.collapse(firstLine, firstLine.length / 2 - 1); 61 synthesizeKey("KEY_ArrowDown"); 62 is(selectionStr(), rangeStr(firstLine, firstLine.length / 2), 63 "contenteditable: ArrowDown should move caret to next character in vertical-rl content"); 64 selection.collapse(firstLine, firstLine.length / 2); 65 synthesizeKey("KEY_ArrowLeft"); 66 is(selectionStr(), rangeStr(secondLine, secondLine.length / 2), 67 "contenteditable: ArrowLeft should move caret to next line in vertical-rl content"); 68 selection.collapse(secondLine, secondLine.length / 2); 69 synthesizeKey("KEY_ArrowRight"); 70 is(selectionStr(), rangeStr(firstLine, firstLine.length / 2), 71 "contenteditable: ArrowRight should move caret to previous line in vertical-rl content"); 72 selection.removeAllRanges(); 73 editor.blur(); 74 })(); 75 await (async function testVerticalLR() { 76 editor.innerHTML = '<p style="font-family: monospace; writing-mode: vertical-lr">ABCD<br>EFGH</p>'; 77 editor.focus(); 78 const firstLine = editor.querySelector("p").firstChild; 79 const secondLine = firstLine.nextSibling.nextSibling; 80 await new Promise(resolve => requestAnimationFrame( 81 () => requestAnimationFrame(resolve)) // guarantee sending focus notification to the widget 82 ); 83 selection.collapse(firstLine, firstLine.length / 2); 84 synthesizeKey("KEY_ArrowUp"); 85 is(selectionStr(), rangeStr(firstLine, firstLine.length / 2 - 1), 86 "contenteditable: ArrowUp should move caret to previous character in vertical-lr content"); 87 selection.collapse(firstLine, firstLine.length / 2 - 1); 88 synthesizeKey("KEY_ArrowDown"); 89 is(selectionStr(), rangeStr(firstLine, firstLine.length / 2), 90 "contenteditable: ArrowDown should move caret to next character in vertical-lr content"); 91 selection.collapse(firstLine, firstLine.length / 2); 92 synthesizeKey("KEY_ArrowRight"); 93 is(selectionStr(), rangeStr(secondLine, secondLine.length / 2), 94 "contenteditable: ArrowRight should move caret to next line in vertical-lr content"); 95 selection.collapse(secondLine, secondLine.length / 2); 96 synthesizeKey("KEY_ArrowLeft"); 97 is(selectionStr(), rangeStr(firstLine, firstLine.length / 2), 98 "contenteditable: ArrowLeft should move caret to previous line in vertical-lr content"); 99 selection.removeAllRanges(); 100 editor.blur(); 101 })(); 102 })(); 103 await (async function testInputTypeText() { 104 const editor = document.querySelector("input"); 105 await (async function testVerticalRL() { 106 editor.style.writingMode = "vertical-rl"; 107 editor.focus(); 108 await new Promise(resolve => requestAnimationFrame( 109 () => requestAnimationFrame(resolve)) // guarantee sending focus notification to the widget 110 ); 111 editor.selectionStart = editor.selectionEnd = editor.value.length / 2; 112 synthesizeKey("KEY_ArrowRight"); 113 is(editor.selectionStart, 0, 114 "<input>: ArrowRight should move caret to beginning of the input element if vertical-rl"); 115 editor.selectionStart = editor.selectionEnd = editor.value.length / 2; 116 synthesizeKey("KEY_ArrowLeft"); 117 is(editor.selectionStart, editor.value.length, 118 "<input>: ArrowLeft should move caret to end of the input element if vertical-rl"); 119 editor.selectionStart = editor.selectionEnd = editor.value.length / 2; 120 synthesizeKey("KEY_ArrowDown"); 121 is(editor.selectionStart, editor.value.length / 2 + 1, 122 "<input>: ArrowDown should move caret to next character if vertical-rl"); 123 editor.selectionStart = editor.selectionEnd = editor.value.length / 2; 124 synthesizeKey("KEY_ArrowUp"); 125 is(editor.selectionStart, editor.value.length / 2 - 1, 126 "<input>: ArrowUp should move caret to previous character if vertical-rl"); 127 editor.blur(); 128 })(); 129 await (async function testVerticalLR() { 130 editor.style.writingMode = "vertical-lr"; 131 editor.focus(); 132 await new Promise(resolve => requestAnimationFrame( 133 () => requestAnimationFrame(resolve)) // guarantee sending focus notification to the widget 134 ); 135 editor.selectionStart = editor.selectionEnd = editor.value.length / 2; 136 synthesizeKey("KEY_ArrowLeft"); 137 is(editor.selectionStart, 0, 138 "<input>: ArrowLeft should move caret to beginning of the input element if vertical-lr"); 139 editor.selectionStart = editor.selectionEnd = editor.value.length / 2; 140 synthesizeKey("KEY_ArrowRight"); 141 is(editor.selectionStart, editor.value.length, 142 "<input>: ArrowRight should move caret to end of the input element if vertical-lr"); 143 editor.selectionStart = editor.selectionEnd = editor.value.length / 2; 144 synthesizeKey("KEY_ArrowDown"); 145 is(editor.selectionStart, editor.value.length / 2 + 1, 146 "<input>: ArrowDown should move caret to next character if vertical-lr"); 147 editor.selectionStart = editor.selectionEnd = editor.value.length / 2; 148 synthesizeKey("KEY_ArrowUp"); 149 is(editor.selectionStart, editor.value.length / 2 - 1, 150 "<input>: ArrowUp should move caret to previous character if vertical-lr"); 151 editor.blur(); 152 })(); 153 })(); 154 await (async function testTextArea() { 155 const editor = document.querySelector("textarea"); 156 await (async function testVerticalRL() { 157 editor.style.writingMode = "vertical-rl"; 158 editor.focus(); 159 await new Promise(resolve => requestAnimationFrame( 160 () => requestAnimationFrame(resolve)) // guarantee sending focus notification to the widget 161 ); 162 editor.selectionStart = editor.selectionEnd = "ABCD\nEF".length; 163 synthesizeKey("KEY_ArrowRight"); 164 isfuzzy(editor.selectionStart, "AB".length, 1, 165 "<textarea>: ArrowRight should move caret to previous line of textarea element if vertical-rl"); 166 editor.selectionStart = editor.selectionEnd = "AB".length; 167 synthesizeKey("KEY_ArrowLeft"); 168 isfuzzy(editor.selectionStart, "ABCD\nEF".length, 1, 169 "<textarea>: ArrowLeft should move caret to next line of textarea element if vertical-rl"); 170 editor.selectionStart = editor.selectionEnd = "AB".length; 171 synthesizeKey("KEY_ArrowDown"); 172 is(editor.selectionStart, "ABC".length, 173 "<textarea>: ArrowDown should move caret to next character if vertical-rl"); 174 editor.selectionStart = editor.selectionEnd = "AB".length; 175 synthesizeKey("KEY_ArrowUp"); 176 is(editor.selectionStart, "A".length, 177 "<textarea>: ArrowUp should move caret to previous character if vertical-rl"); 178 editor.blur(); 179 })(); 180 await (async function testVerticalLR() { 181 editor.style.writingMode = "vertical-lr"; 182 editor.focus(); 183 await new Promise(resolve => requestAnimationFrame( 184 () => requestAnimationFrame(resolve)) // guarantee sending focus notification to the widget 185 ); 186 editor.selectionStart = editor.selectionEnd = "ABCD\nEF".length; 187 synthesizeKey("KEY_ArrowLeft"); 188 isfuzzy(editor.selectionStart, "AB".length, 1, 189 "<textarea>: ArrowLeft should move caret to previous line of textarea element if vertical-rl"); 190 editor.selectionStart = editor.selectionEnd = "AB".length; 191 synthesizeKey("KEY_ArrowRight"); 192 isfuzzy(editor.selectionStart, "ABCD\nEF".length, 1, 193 "<textarea>: ArrowRight should move caret to next line of textarea element if vertical-rl"); 194 editor.selectionStart = editor.selectionEnd = "AB".length; 195 synthesizeKey("KEY_ArrowDown"); 196 is(editor.selectionStart, "ABC".length, 197 "<textarea>: ArrowDown should move caret to next character if vertical-rl"); 198 editor.selectionStart = editor.selectionEnd = "AB".length; 199 synthesizeKey("KEY_ArrowUp"); 200 is(editor.selectionStart, "A".length, 201 "<textarea>: ArrowUp should move caret to previous character if vertical-rl"); 202 editor.blur(); 203 })(); 204 })(); 205 SimpleTest.finish(); 206 }); 207 </script> 208 </body> 209 </html>