<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script src="spellcheck_test.js"></script>
<script>
// This file shows sample usage of spellcheck_test.js
spellcheck_test(
'<div contenteditable>|</div>',
'insertText zz. ',
'<div contenteditable>#zz#.\u00A0</div>',
'Mark misspellings after typing.');
spellcheck_test(
'<div contenteditable>|</div>',
'insertText You has the right. ',
'<div contenteditable>You ~has~ the right.\u00A0</div>',
'Mark ungrammatical phrases after typing.');
spellcheck_test(
'<div contenteditable>|</div>',
'insertText orange,zz,apple. ',
// Grammar marker under the whole sentence, and spelling marker under 'zz'.
'<div contenteditable>~orange,#zz#,apple.~\u00A0</div>',
'Mark overlapping grammar and spelling errors.');
spellcheck_test(
'<textarea>|</textarea>',
document => {
document.querySelector('textarea').focus();
document.execCommand('insertText', false, 'zz. ');
},
'<textarea>#zz#. </textarea>',
'Mark misspellings in <textarea>.');
spellcheck_test(
'<input type="text">|',
document => {
document.querySelector('input').focus();
document.execCommand('insertText', false, 'asd. ');
},
'<input type="text" value="#asd#. ">',
'Mark misspellings in <input>.');
spellcheck_test(
'<div contenteditable spellcheck="false">zz. |</div>',
'',
'<div contenteditable spellcheck="false">zz. </div>',
{
title: 'No marker on misspelled word when spellcheck=false.',
callback: sample => spellcheck_test(
sample,
document => {
const div = document.querySelector('div');
div.setAttribute('spellcheck', 'true');
// Trigger spellchecker by selection change.
document.getSelection().collapse(div, 0);
},
'<div contenteditable spellcheck="true">#zz#. </div>',
'Marker appears after setting spellcheck=true.'
)
});
</script>