caretnavigation.html (1826B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Caret navigation</title> 4 5 <link rel="stylesheet" href="../support/reset.css"> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 13 <script> 14 const KEY_CODE_MAP = { 15 'ArrowLeft': '\uE012', 16 'ArrowUp': '\uE013', 17 'ArrowRight': '\uE014', 18 'ArrowDown': '\uE015', 19 }; 20 21 /** 22 * Send key event to the target element using test driver. Supports human 23 * friendly key names for common keyboard scroll operations e.g., arrow keys, 24 * page keys, etc. 25 * @param {Node} target 26 * @param {string} key 27 * @returns {Promise} 28 */ 29 function keyPress(target, key) { 30 const code = KEY_CODE_MAP[key]; 31 return test_driver.send_keys(target, code); 32 } 33 </script> 34 35 <div id="container"> 36 <div contenteditable data-title="Move with ArrowLeft to BR following a div"> 37 <div>line 1</div> 38 <br> 39 <div class="caret">line 2</div> 40 </div> 41 <div contenteditable data-title="Move with ArrowLeft to BR following an img"> 42 <img style="display:block;width:100px;height:100px"> 43 <br> 44 <div class="caret">line 2</div> 45 </div> 46 </div> 47 48 <script> 49 const container = document.getElementById("container"); 50 51 for (const test of container.children) { 52 promise_test(async t => { 53 test.focus(); 54 getSelection().collapse(test.querySelector(".caret")); 55 await keyPress(test, "ArrowLeft"); 56 57 const range = getSelection().getRangeAt(0); 58 59 assert_equals(range.commonAncestorContainer.localName, "div"); 60 assert_equals(range.startOffset, 3); 61 assert_equals(range.commonAncestorContainer.childNodes[range.startOffset].localName, "br"); 62 }, test.dataset.title); 63 } 64 </script>