editable-root.html | Explore in Territory

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

<div id="main" role="main">

  <input id="input" type="text" value="Line 1">

  <div id="contenteditable-textbox" role="textbox" contenteditable="true">
    <input id="inner-input" value="Line 1">
    <textarea id="inner-textarea" rows="1" cols="40">Line 2</textarea>
  </div>

  <div id="contenteditable-div" contenteditable>
    <p id="paragraph1">Line 1<br>
      Line 2</p>
    <p id="plaintext" contenteditable="plaintext-only">Plain text.</p>
    <p id="paragraph2">Line 3</p>
  </div>

</div>

<script>
'use strict';

test(function() {
    const axInput = accessibilityController.accessibleElementById('input');
    assert_false(axInput.isEditableRoot);
}, 'An input element is not an editable root.');

test(function() {
    const axContentEditable = accessibilityController.accessibleElementById('contenteditable-textbox');
    assert_true(axContentEditable.isEditableRoot);
}, 'A content editable with a role of textbox is an editable root.');

test(function() {
    const axInnerInput = accessibilityController.accessibleElementById('inner-input');
    assert_false(axInnerInput.isEditableRoot);
}, 'An input element embedded inside a content editable is not an editable root.');

test(function() {
    const axInnerTextarea = accessibilityController.accessibleElementById('inner-textarea');
    assert_false(axInnerTextarea.isEditableRoot);
}, 'A textarea embedded inside a content editable is not an editable root.');

test(function() {
    const axContentEditable = accessibilityController.accessibleElementById('contenteditable-div');
    const axParagraph1 = accessibilityController.accessibleElementById('paragraph1');
    const axParagraph2 = accessibilityController.accessibleElementById('paragraph2');
    assert_true(axContentEditable.isEditableRoot);
    assert_false(axParagraph1.isEditableRoot);
    assert_false(axParagraph2.isEditableRoot);
}, 'A paragraph within a content editable is not an editable root but the content editable is.');

test(function() {
    const axInnerContentEditable = accessibilityController.accessibleElementById('plaintext');
    assert_true(axInnerContentEditable.isEditableRoot);
}, 'A plaintext-only content editable within another content editable is an editable root.');

</script>
chromium/third_party/blink/web_tests/accessibility/editable-root.html
