Make spellcheck_test easier to use

third_party/WebKit/LayoutTests/editing/spelling/spellcheck_test.html

Index: third_party/WebKit/LayoutTests/editing/spelling/spellcheck_test.html
diff --git a/third_party/WebKit/LayoutTests/editing/spelling/spellcheck_test.html b/third_party/WebKit/LayoutTests/editing/spelling/spellcheck_test.html
index a6c4921b34c786e9155b6d2e740090aa2c1ad758..75670bed035450b3e37b316107f37a4f6386bceb 100644
--- a/third_party/WebKit/LayoutTests/editing/spelling/spellcheck_test.html
+++ b/third_party/WebKit/LayoutTests/editing/spelling/spellcheck_test.html
@@ -5,31 +5,44 @@
 <script src="spellcheck_test.js"></script>
 
 <script>
-// This file tests the functionality of spellcheck_test.js
+// This file shows sample usage of spellcheck_test.js
 
-test(
-    () => spellingMarker(0, 1, 'description').assertValid(),
-    'spellingMarker returns valid Marker.');
+spellcheck_test(
+    '<div contenteditable>|</div>',
+    'insertText zz.',
+    '<div contenteditable>__.</div>',
+    'Mark misspellings after typing.');
 
-test(
-    () => grammarMarker(0, 1, 'description').assertValid(),
-    'grammarMarker returns valid Marker.');
+spellcheck_test(
+    '<div contenteditable>|</div>',
+    'insertText You has the right.',
+    '<div contenteditable>You ~~~ the right.</div>',
+    'Mark ungrammatical phrases after typing.');
 
 spellcheck_test(
-    '<div contentEditable>|</div>',
-    'insertText wellcome.',
-    spellingMarker(0, 8, 'welcome'), // 'wellcome'
-    'Mark misspellings and give replacement suggestions after typing.');
+    '<div contenteditable>|</div>',
+    'insertText orange,zz,apple.',
+    // Grammar marker under the whole sentence, and spelling marker under 'zz'.
+    '<div contenteditable>~~~~~~~##~~~~~~~</div>',

[yosin_UTC9, 2016/10/25 09:54:00]

Yet another idea:

spellcheck_test(
    '<div contenteditable>|</div>',
    'insertText zz.',
    '<div contenteditable>~zz~.</div>',
    'Mark misspellings after typing.');


spellcheck_test(
    '<div contenteditable>|</div>',
    'insertText zz.',
    '<div contenteditable>_orange,~zz~,apple_</div>')

Pair of "~" denotes spelling marker range.
Pair of "_" denotes grammar marker range.

So no need to have combination marker "#"

[Xiaocheng, 2016/10/25 13:19:17]

Seems good. Done.

+    'Mark overlapping grammer and spelling errors.');
 
 spellcheck_test(
-    '<div contentEditable>|</div>',
-    'insertText zz zz.',
-    [spellingMarker(0, 2), spellingMarker(3, 2)], // Both 'zz's
-    'Mark multiple misspellings after typing.');
+    '<textarea>|</textarea>',
+    document => {
+      document.querySelector('textarea').focus();
+      document.execCommand('insertText', false, 'zz.');
+    },
+    '<textarea>__.</textarea>',
+    'Mark misspellings in <textarea>.');
 
 spellcheck_test(
-    '<div contentEditable>|</div>',
-    'insertText You has the right.',
-    grammarMarker(4, 3), // 'has'
-    'Mark ungrammatical phrases after typing.');
+    '<input type="text">|',
+    document => {
+      document.querySelector('input').focus();
+      document.execCommand('insertText', false, 'asd.');
+    },
+    '<input type="text" value="___.">',
+    'Mark misspellings in <input>.');
+
+// TODO(xiaochengh): Design interface for checking marker description.
 </script>