spelling-markers.html | Explore in Territory

<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<div id="editable" contentEditable="true" spellcheck="true">Test spelling markers</div>

<p id="paragraph" tabIndex="0" spellcheck="true">Test spelling markers</p>

<input id="input" spellcheck="true" value="Test spelling markers">

<textarea id="textarea" spellcheck="true">Test spelling markers</textarea>

<script>
'use strict';

test(() => {
  if (!window.internals)
    return;

  const editable = document.getElementById('editable');
  assert_equals(editable.childNodes.length, 1);
  const text = editable.firstChild;
  const range = document.createRange();
  range.setStart(text, 0);
  range.setEnd(text, 4);
  internals.setMarker(document, range, 'spelling');
  range.setStart(text, 14);
  range.setEnd(text, 21);
  internals.setMarker(document, range, 'spelling');

  const axEditable = accessibilityController.accessibleElementById('editable');
  const axStaticText = axEditable.childAtIndex(0);
  assert_equals(axStaticText.childrenCount, 1);
  const axInlineTextBox = axStaticText.childAtIndex(0);

  assert_equals(axStaticText.misspellingsCount, 2);
  assert_equals(axStaticText.misspellingAtIndex(0), 'Test');
  assert_equals(axStaticText.misspellingAtIndex(1), 'markers');
  assert_equals(axInlineTextBox.misspellingsCount, 2);
  assert_equals(axInlineTextBox.misspellingAtIndex(0), 'Test');
  assert_equals(axInlineTextBox.misspellingAtIndex(1), 'markers');
}, 'Spelling markers should be reported in content editables.');

test(() => {
  if (!window.internals)
    return;

  document.designMode = 'on';
  const paragraph = document.getElementById('paragraph');
  assert_equals(paragraph.childNodes.length, 1);
  const text = paragraph.firstChild;
  const range = document.createRange();
  range.setStart(text, 0);
  range.setEnd(text, 4);
  internals.setMarker(document, range, 'spelling');
  range.setStart(text, 14);
  range.setEnd(text, 21);
  internals.setMarker(document, range, 'spelling');

  const axParagraph = accessibilityController.accessibleElementById('paragraph');
  const axStaticText = axParagraph.childAtIndex(0);
  assert_equals(axStaticText.childrenCount, 1);
  const axInlineTextBox = axStaticText.childAtIndex(0);

  assert_equals(axStaticText.misspellingsCount, 2);
  assert_equals(axStaticText.misspellingAtIndex(0), 'Test');
  assert_equals(axStaticText.misspellingAtIndex(1), 'markers');
  assert_equals(axInlineTextBox.misspellingsCount, 2);
  assert_equals(axInlineTextBox.misspellingAtIndex(0), 'Test');
  assert_equals(axInlineTextBox.misspellingAtIndex(1), 'markers');

  document.designMode = 'off';
}, 'Spelling markers should be reported in static text when design mode is on.');

test(() => {
  if (!window.internals)
    return;

  const input = document.getElementById('input');
  input.focus();
  const innerEditor = internals.innerEditorElement(input);
  assert_equals(innerEditor.childNodes.length, 1);
  const text = innerEditor.firstChild;
  const range = document.createRange();
  range.setStart(text, 5);
  range.setEnd(text, 13);
  internals.setMarker(document, range, 'spelling');

  const axInput = accessibilityController.accessibleElementById('input');
  // If input's shadow DOM changes, this logic might need to be modified.
  assert_equals(axInput.childrenCount, 1);
  const axDiv = axInput.childAtIndex(0);
  assert_equals(axDiv.childrenCount, 1);
  const axStaticText = axDiv.childAtIndex(0);
  assert_equals(axStaticText.childrenCount, 1);
  const axInlineTextBox = axStaticText.childAtIndex(0);

  assert_equals(axStaticText.misspellingsCount, 1);
  assert_equals(axStaticText.misspellingAtIndex(0), 'spelling');
  assert_equals(axInlineTextBox.misspellingsCount, 1);
  assert_equals(axInlineTextBox.misspellingAtIndex(0), 'spelling');
}, 'Spelling markers should be reported in input text fields.');

test(() => {
  if (!window.internals)
    return;

  const textarea = document.getElementById('textarea');
  const innerEditor = internals.innerEditorElement(textarea);
  assert_equals(innerEditor.childNodes.length, 1);
  const text = innerEditor.firstChild;
  const range = document.createRange();
  range.setStart(text, 14);
  range.setEnd(text, 21);
  internals.setMarker(document, range, 'spelling');

  const axTextarea = accessibilityController.accessibleElementById('textarea');
  // If textarea's shadow DOM changes, this logic might need to be modified.
  assert_equals(axTextarea.childrenCount, 1);
  const axDiv = axTextarea.childAtIndex(0);
  assert_equals(axDiv.childrenCount, 1);
  const axStaticText = axDiv.childAtIndex(0);
  assert_equals(axStaticText.childrenCount, 1);
  const axInlineTextBox = axStaticText.childAtIndex(0);

  assert_equals(axStaticText.misspellingsCount, 1);
  assert_equals(axStaticText.misspellingAtIndex(0), 'markers');
  assert_equals(axInlineTextBox.misspellingsCount, 1);
  assert_equals(axInlineTextBox.misspellingAtIndex(0), 'markers');
}, 'Spelling markers should be reported in textareas.');

</script>
chromium/third_party/blink/web_tests/accessibility/spelling-markers.html
