<!DOCTYPE HTML>
<style>
.wrap span {
white-space: pre-wrap;
}
</style>
<div class="wrap">
<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>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script>
const KEY_CODE_MAP = {
'ArrowLeft': '\uE012',
'ArrowUp': '\uE013',
'ArrowRight': '\uE014',
'ArrowDown': '\uE015',
'Tab': '\uE004',
'S': '\u0053',
};
function keyPress(target, key) {
const code = KEY_CODE_MAP[key];
return test_driver.send_keys(target, code);
}
function deletebr() {
let el;
el = document.querySelector('br');
if (el) {
el.remove();
}
}
// Delete the <br> element so that we get a single line
deletebr();
const s = getSelection();
promise_test(async t => {
initial.focus();
let node = initial.firstChild;
assert_equals(s.anchorNode, node, "Focus must be at the span with 'abcd'");
assert_equals(s.anchorOffset, 0, "Caret must be at the start of the 'abcd' text");
await keyPress(initial, "Tab");
node = before.firstChild
assert_equals(s.anchorNode, node, "Caret moved to span with 'efgh'");
assert_equals(s.anchorOffset, 0, "Caret must be at the start of the 'efgh' text");
await keyPress(before, "Tab");
node = after.firstChild
assert_equals(s.anchorNode, node, "Focus must be at the span with 'ijkl'");
assert_equals(s.anchorOffset, 0, "Caret must be at the start of the 'efgh' text");
await keyPress(after, "Tab");
node = next.firstChild
assert_equals(s.anchorNode, node, "Focus must be at the span with 'mnop'");
assert_equals(s.anchorOffset, 0, "Caret must be at the start of the 'efgh' text");
}, "Navigate after deleting <br>");
promise_test(async t => {
initial.focus();
await keyPress(initial, "Tab");
await keyPress(before, "Tab");
await keyPress(after, "Tab");
await keyPress(next, "ArrowRight");
await keyPress(next, "ArrowRight");
await keyPress(next, "ArrowRight");
await keyPress(next, "S");
assert_equals(next.firstChild.textContent, " mnSop ", "Inserting a 'S' char betwen 'n' and 'o'");
}, "Insert text after deleting <br>")
</script>
Codebase Browser
chromium