Commit b0da7fb2 authored by Yoshifumi Inoue's avatar Yoshifumi Inoue Committed by Commit Bot

Rewrite editing/execCommand/overtype.html to use selection_test()

This patch changes "overtype.html" to utilize |selection_test()| for ease of
maintenance.

This patch is a preparation for the patch[1].

[1] http://crrev.com/c/737981 Introduce TextOffsetMapping to simplify
word/paragraph selection

Bug: 679977
Change-Id: I9a043b5537dc188a46984d62708ad98dcd9b933b
Reviewed-on: https://chromium-review.googlesource.com/897306Reviewed-by: default avatarYoichi Osato <yoichio@chromium.org>
Commit-Queue: Yoshifumi Inoue <yosin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#533933}
parent e8c8b2bb
This is a test for Overwrite mode
These are the original contents:
| "
"
| <b>
| "foo"
| <a>
| href="http://www.google.com/"
| <div>
| id="linkText"
| "bar"
| "
"
After overwritting the first character:
| "
"
| <b>
| "F<#selection-caret>oo"
| <a>
| href="http://www.google.com/"
| <div>
| id="linkText"
| "bar"
| "
"
After inserting a blank:
| "
"
| <b>
| "F <#selection-caret>o"
| <a>
| href="http://www.google.com/"
| <div>
| id="linkText"
| "bar"
| "
"
After inserting a blank at the line end:
| "
"
| <b>
| "F o <#selection-caret>"
| <a>
| href="http://www.google.com/"
| <div>
| id="linkText"
| "bar"
| "
"
Overwrite at the end of a line performs as a normal Insert:
| "
"
| <b>
| "F o SOME MORE<#selection-caret>"
| <a>
| href="http://www.google.com/"
| <div>
| id="linkText"
| "bar"
| "
"
Overwritting works even if the inserted text is longer than the replaced text:
| "
"
| <b>
| "F o SOME MORE"
| <a>
| href="http://www.google.com/"
| <div>
| id="linkText"
| "BAR.BAR<#selection-caret>"
| "
"
Overwrite should create new text nodes on demand:
| "
"
| <b>
| "F o SOME MORE"
| <div>
| id="linkText"
| <a>
| href="http://www.google.com/"
| "BAR.BAR"
| <br>
| "TEXT IN NEW NODE<#selection-caret>"
| "
"
New plain text contents with an inner selection:
| "we<#selection-anchor>bk<#selection-focus>it"
Overwrite behaves like insert on range selections:
| "weBK<#selection-caret>it"
New CJK contents:
| "丠両丢丣"
Overwrite CJK text:
| "且且<#selection-caret>丢丣"
New RTL contents:
| <div>
| dir="rtl"
| id="rtl-div"
| "ℵℶℷℸ"
Overwrite RTL text:
| <div>
| dir="rtl"
| id="rtl-div"
| "אא<#selection-caret>ℷℸ"
console:
|
<!DOCTYPE html> <!doctype html>
<html> <script src="../../resources/testharness.js"></script>
<head> <script src="../../resources/testharnessreport.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="../assert_selection.js"></script>
</head>
<body>
<script type="text/javascript" src="../editing.js"></script>
<script src="../../resources/dump-as-markup.js"></script>
<div id="test" contenteditable="true">
<b>foo</b><a href="http://www.google.com/"><div id="linkText">bar</div></a>
</div>
<pre id="console"></pre>
<script> <script>
function log(message) { function enableOverwriteMode(selection) {
var console = document.getElementById("console"); if (!window.internals)
console.innerHTML += message + '\n'; throw 'This test requires internals.toggleOverwriteModeEnabled()';
internals.toggleOverwriteModeEnabled(selection.document);
} }
if (!window.internals) // Verfiy in bold
log("FAILED: this test requires the 'internals' object."); selection_test(
else { '<div contenteditable><b>|abc</b></div>',
Markup.description('This is a test for Overwrite mode'); selection => {
enableOverwriteMode(selection);
var element = document.getElementById("test"); selection.document.execCommand('insertText', false, 'A');
var selection = window.getSelection(); },
'<div contenteditable><b>A|bc</b></div>',
Markup.dump(element, 'These are the original contents'); '1 Overwrite the first character');
selection.collapse(element, 0); selection_test(
internals.toggleOverwriteModeEnabled(document); '<div contenteditable><b>a|bc</b></div>',
selection => {
document.execCommand("InsertText", false, 'F'); enableOverwriteMode(selection);
Markup.dump(element, 'After overwritting the first character'); selection.document.execCommand('insertText', false, ' ');
},
document.execCommand("InsertText", false, ' '); '<div contenteditable><b>a |c</b></div>',
Markup.dump(element, 'After inserting a blank'); '2 Insert a space');
moveSelectionForwardByCharacterCommand(); selection_test(
document.execCommand("InsertText", false, ' '); '<div contenteditable><b>abc|</b></div>',
Markup.dump(element, 'After inserting a blank at the line end'); selection => {
enableOverwriteMode(selection);
document.execCommand("InsertText", false, 'SOME MORE'); selection.document.execCommand('insertText', false, ' ');
Markup.dump(element, 'Overwrite at the end of a line performs as a normal Insert'); },
'<div contenteditable><b>abc\u00A0|</b></div>',
selection.collapse(document.getElementById("linkText"), 0); '3 Insert a space at end of line');
document.execCommand("InsertText", false, 'BAR.BAR');
Markup.dump(element, 'Overwritting works even if the inserted text is longer than the replaced text'); selection_test(
'<div contenteditable><b>abc|</b></div>',
moveSelectionForwardByWordCommand(); selection => {
document.execCommand("InsertLineBreak"); enableOverwriteMode(selection);
document.execCommand("InsertText", false, 'TEXT IN NEW NODE'); selection.document.execCommand('insertText', false, 'XYZ');
Markup.dump(element, 'Overwrite should create new text nodes on demand'); },
'<div contenteditable><b>abcXYZ|</b></div>',
element.innerHTML = "webkit"; '4 Insert more at end of line');
selection.collapse(element, 0);
for (i = 0; i < 2; i++) selection_test(
moveSelectionForwardByCharacterCommand(); '<div contenteditable><b>abc|</b></div>',
for (i = 0; i < 2; i++) selection => {
extendSelectionForwardByCharacterCommand(); enableOverwriteMode(selection);
Markup.dump(element, 'New plain text contents with an inner selection'); selection.document.execCommand('insertText', false, 'XYZ');
},
document.execCommand("InsertText", false, 'BK'); '<div contenteditable><b>abcXYZ|</b></div>',
Markup.dump(element, 'Overwrite behaves like insert on range selections'); '5 Insert more at end of line');
element.innerHTML = "&#x4E20;&#x4E21;&#x4E22;&#x4E23;"; // Verfiy for anchor text
selection.removeAllRanges(); selection_test(
Markup.dump(element, 'New CJK contents'); '<div contenteditable><a href="http://foo"><div>|abc</div></a></div>',
selection => {
selection.collapse(element, 0); enableOverwriteMode(selection);
document.execCommand("InsertText", false, '\u4E14\u4E14'); selection.document.execCommand('insertText', false, 'ABC+XYZ');
Markup.dump(element, 'Overwrite CJK text'); },
'<div contenteditable><a href="http://foo"><div>ABC+XYZ|</div></a></div>',
element.innerHTML="<div id=\"rtl-div\" dir=\"rtl\">&aleph;&beth;&gimel;&daleth;</div>" 'Link-1 Overwrite longer than existing text');
selection.removeAllRanges();
Markup.dump(element, 'New RTL contents'); selection_test(
'<div contenteditable><a href="http://foo"><div>abc|</div></a></div>',
selection.collapse(element, 0); selection => {
document.execCommand("InsertText", false, '\u05d0\u05d0'); enableOverwriteMode(selection);
Markup.dump(element, 'Overwrite RTL text'); selection.document.execCommand('insertLineBreak');
} },
Markup.dump('console', 'console'); '<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> </script>
</body>
</html>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment