caret-navigation-after-removing-line-break.html (2539B)
1 <!DOCTYPE HTML> 2 <style> 3 .wrap span { 4 white-space: pre-wrap; 5 } 6 </style> 7 <div class="wrap"> 8 <span id="initial" contenteditable="true"> abcd </span>111<span id="before" contenteditable="true"> efgh </span>222<br><span id="after" contenteditable="true"> ijkl </span>333<span id="next" contenteditable="true"> mnop </span>444<span id="last" contenteditable="true"> qrst </span> 9 </div> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="/resources/testdriver.js"></script> 13 <script src="/resources/testdriver-vendor.js"></script> 14 <script src="/resources/testdriver-actions.js"></script> 15 <script> 16 const KEY_CODE_MAP = { 17 'ArrowLeft': '\uE012', 18 'ArrowUp': '\uE013', 19 'ArrowRight': '\uE014', 20 'ArrowDown': '\uE015', 21 'Tab': '\uE004', 22 'S': '\u0053', 23 }; 24 25 function keyPress(target, key) { 26 const code = KEY_CODE_MAP[key]; 27 return test_driver.send_keys(target, code); 28 } 29 30 function deletebr() { 31 let el; 32 el = document.querySelector('br'); 33 if (el) { 34 el.remove(); 35 } 36 } 37 38 // Delete the <br> element so that we get a single line 39 deletebr(); 40 41 const s = getSelection(); 42 promise_test(async t => { 43 initial.focus(); 44 let node = initial.firstChild; 45 assert_equals(s.anchorNode, node, "Focus must be at the span with 'abcd'"); 46 assert_equals(s.anchorOffset, 0, "Caret must be at the start of the 'abcd' text"); 47 48 await keyPress(initial, "Tab"); 49 node = before.firstChild 50 assert_equals(s.anchorNode, node, "Caret moved to span with 'efgh'"); 51 assert_equals(s.anchorOffset, 0, "Caret must be at the start of the 'efgh' text"); 52 53 await keyPress(before, "Tab"); 54 node = after.firstChild 55 assert_equals(s.anchorNode, node, "Focus must be at the span with 'ijkl'"); 56 assert_equals(s.anchorOffset, 0, "Caret must be at the start of the 'efgh' text"); 57 58 await keyPress(after, "Tab"); 59 node = next.firstChild 60 assert_equals(s.anchorNode, node, "Focus must be at the span with 'mnop'"); 61 assert_equals(s.anchorOffset, 0, "Caret must be at the start of the 'efgh' text"); 62 63 }, "Navigate after deleting <br>"); 64 65 promise_test(async t => { 66 initial.focus(); 67 await keyPress(initial, "Tab"); 68 await keyPress(before, "Tab"); 69 await keyPress(after, "Tab"); 70 await keyPress(next, "ArrowRight"); 71 await keyPress(next, "ArrowRight"); 72 await keyPress(next, "ArrowRight"); 73 74 await keyPress(next, "S"); 75 assert_equals(next.firstChild.textContent, " mnSop ", "Inserting a 'S' char betwen 'n' and 'o'"); 76 }, "Insert text after deleting <br>") 77 78 </script>