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..23b5cd8fc475815f40b600fec17ecf73e639e5ff 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>_zz_.</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 ~has~ 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>~orange,_zz_,apple.~</div>',
+    '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>_zz_.</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="_asd_.">',
+    'Mark misspellings in <input>.');
+
+// TODO(xiaochengh): Design interface for checking marker description.
 </script>