link-boundaries-insertion.html (1617B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Placing selection and typing inside empty elements</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="../include/editor-test-utils.js"></script> 7 8 <div contenteditable></div> 9 10 <script> 11 const utils = new EditorTestUtils( document.querySelector( 'div[contenteditable]' ) ); 12 13 test( () => { 14 utils.setupEditingHost( `<p><a href="https://example.com" id="test-end">Link</a></p>` ); 15 16 const target = document.querySelector( '#test-end' ); 17 const range = document.createRange(); 18 const selection = getSelection(); 19 20 range.selectNodeContents( target ); 21 selection.removeAllRanges(); 22 selection.addRange( range ); 23 selection.collapseToEnd(); 24 25 document.execCommand( 'insertText', false, 'a' ); 26 assert_equals( target.innerHTML, 'Linka', 'The text should be inserted into the link' ); 27 }, 'Insert text into the selection at the end of a link' ); 28 29 test( () => { 30 utils.setupEditingHost( `<p><a href="https://example.com" id="test-beginning">Link</a></p>` ); 31 32 const target = document.querySelector( '#test-beginning' ); 33 const range = document.createRange(); 34 const selection = getSelection(); 35 36 range.selectNodeContents( target ); 37 selection.removeAllRanges(); 38 selection.addRange( range ); 39 selection.collapseToStart(); 40 41 document.execCommand( 'insertText', false, 'a' ); 42 assert_equals( target.innerHTML, 'aLink', 'The text should be inserted into the link' ); 43 }, 'Insert text into the selection at the beginning of a link' ); 44 </script>