<!DOCTYPE html>
<script src="../resources/js-test.js"></script>
<!-- Richly editable elements. -->
<div id="richly_editable1" contentEditable></div>
<div id="richly_editable2" contentEditable="true"></div>
<div contentEditable>
<p id="richly_editable3">Some text.</p>
</div>
<div contentEditable="true">
<p id="richly_editable4">Some text.</p>
</div>
<div style="display: none;" aria-hidden="false">
<p id="richly_editable5" contentEditable>Some text.</p>
</div>
<canvas id="empty_canvas" width="200" height="100"
style="border: 1px solid #000000;">
<div id="richly_editable6" contentEditable="true">Some text.</div>
</canvas>
<div id="richly_editable7" contentEditable role="textbox">Some text.</div>
<!-- Non-richly editable elements. -->
<input id="non_richly_editable1" type="text" value="Some text.">
<textarea id="non_richly_editable2">
Some text.</textarea>
<div id="non_richly_editable3" contentEditable="plaintext-only"></div>
<div id="non_richly_editable4" contentEditable style="-webkit-user-modify: read-only;"></div>
<div contentEditable="plaintext-only">
<p id="non_richly_editable5">Some text.</p>
</div>
<p id="non_richly_editable6" tabindex="0">Some text.</p>
<button id="non_richly_editable7">Button</button>
<script>
description("This tests that only elements that allow the user to edit rich text in them are recognized as being richly editable.");
if (window.accessibilityController) {
for (var i = 1; i <= 7; ++i) {
var elementId = "richly_editable" + i;
var element = document.getElementById(elementId);
element.focus();
var axElement = accessibilityController.focusedElement;
shouldBeTrue("axElement.isRichlyEditable");
}
for (var i = 1; i <= 7; ++i) {
var elementId = "non_richly_editable" + i;
var element = document.getElementById(elementId);
element.focus();
var axElement = accessibilityController.focusedElement;
shouldBeFalse("axElement.isRichlyEditable");
}
}
</script>