| <!doctype html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../assert_selection.js"></script> |
| <script> |
| function enableOverwriteMode(selection) { |
| if (!window.internals) |
| throw 'This test requires internals.toggleOverwriteModeEnabled()'; |
| internals.toggleOverwriteModeEnabled(selection.document); |
| } |
| |
| // Verfiy in bold |
| selection_test( |
| '<div contenteditable><b>|abc</b></div>', |
| selection => { |
| enableOverwriteMode(selection); |
| selection.document.execCommand('insertText', false, 'A'); |
| }, |
| '<div contenteditable><b>A|bc</b></div>', |
| '1 Overwrite the first character'); |
| |
| selection_test( |
| '<div contenteditable><b>a|bc</b></div>', |
| selection => { |
| enableOverwriteMode(selection); |
| selection.document.execCommand('insertText', false, ' '); |
| }, |
| '<div contenteditable><b>a |c</b></div>', |
| '2 Insert a space'); |
| |
| selection_test( |
| '<div contenteditable><b>abc|</b></div>', |
| selection => { |
| enableOverwriteMode(selection); |
| selection.document.execCommand('insertText', false, ' '); |
| }, |
| '<div contenteditable><b>abc\u00A0|</b></div>', |
| '3 Insert a space at end of line'); |
| |
| selection_test( |
| '<div contenteditable><b>abc|</b></div>', |
| selection => { |
| enableOverwriteMode(selection); |
| selection.document.execCommand('insertText', false, 'XYZ'); |
| }, |
| '<div contenteditable><b>abcXYZ|</b></div>', |
| '4 Insert more at end of line'); |
| |
| selection_test( |
| '<div contenteditable><b>abc|</b></div>', |
| selection => { |
| enableOverwriteMode(selection); |
| selection.document.execCommand('insertText', false, 'XYZ'); |
| }, |
| '<div contenteditable><b>abcXYZ|</b></div>', |
| '5 Insert more at end of line'); |
| |
| // Verfiy for anchor text |
| selection_test( |
| '<div contenteditable><a href="http://foo"><div>|abc</div></a></div>', |
| selection => { |
| enableOverwriteMode(selection); |
| selection.document.execCommand('insertText', false, 'ABC+XYZ'); |
| }, |
| '<div contenteditable><a href="http://foo"><div>ABC+XYZ|</div></a></div>', |
| 'Link-1 Overwrite longer than existing text'); |
| |
| selection_test( |
| '<div contenteditable><a href="http://foo"><div>abc|</div></a></div>', |
| selection => { |
| enableOverwriteMode(selection); |
| selection.document.execCommand('insertLineBreak'); |
| }, |
| '<div contenteditable><div><a href="http://foo">abc</a><br>|<br></div></div>', |
| 'Link-2 Insert line break'); |
| |
| selection_test( |
| '<div contenteditable><div><a href="http://foo">abc</a><br>|<br></div></div>', |
| selection => { |
| enableOverwriteMode(selection); |
| selection.document.execCommand('insertText', false, 'XYZ'); |
| }, |
| '<div contenteditable><div><a href="http://foo">abc</a><br>XYZ|</div></div>', |
| 'Link-3 Insert after BR'); |
| |
| // Misc |
| selection_test( |
| '<div contenteditable>^abc|def</div>', |
| selection => { |
| enableOverwriteMode(selection); |
| selection.document.execCommand('insertText', false, 'XY'); |
| }, |
| '<div contenteditable>XY|def</div>', |
| 'Misc-1 Overwrite in range'); |
| |
| selection_test( |
| '<div contenteditable>|\u4E20\u4E21\u4E22\u4E23</div>', |
| selection => { |
| enableOverwriteMode(selection); |
| selection.document.execCommand('insertText', false, '\u4E14\u4E15'); |
| }, |
| '<div contenteditable>\u4E14\u4E15|\u4E22\u4E23</div>', |
| 'Misc-2 Overwrite in CJK'); |
| |
| const kAleph = '\u2135'; |
| const kBeth = '\u2136'; |
| const kGimel = '\u2137'; |
| const kDaleth = '\u2138'; |
| selection_test( |
| `<div contenteditable dir="rtl">|${kAleph}${kBeth}${kGimel}${kDaleth}</div>`, |
| selection => { |
| enableOverwriteMode(selection); |
| selection.document.execCommand('insertText', false, '\u05d0\u05d1'); |
| }, |
| `<div contenteditable dir="rtl">\u05d0\u05d1|${kGimel}${kDaleth}</div>`, |
| 'Misc-3 Overwrite in RTL'); |
| </script> |
