blob: e1f56d6f67c7d5755e03eb61290f5c21040633f6 [file] [log] [blame]
<!DOCTYPE HTML>
<script src="../resources/gc.js"></script>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="../resources/run-after-layout-and-paint.js"></script>
<!--
Accessibility Object Model
Explainer: https://github.com/WICG/aom/blob/gh-pages/explainer.md
Spec: https://wicg.github.io/aom/spec/
-->
<script>
test_after_layout_and_paint(function(t) {
assert_true(internals.runtimeFlags.accessibilityObjectModelEnabled);
}, "Make sure that Accessibility Object Model is enabled");
</script>
<input role="combobox" id="autocomplete">
<script>
test_after_layout_and_paint(function(t) {
var node = document.getElementById("autocomplete");
var axNode = accessibilityController.accessibleElementById("autocomplete");
assert_equals(axNode.autocomplete, "");
node.accessibleNode.autocomplete = "inline";
assert_equals(axNode.autocomplete, "inline");
}, "AccessibleNode.autocomplete");
</script>
<div role="checkbox" id="checked"></div>
<script>
test_after_layout_and_paint(function(t) {
var node = document.getElementById("checked");
var axNode = accessibilityController.accessibleElementById("checked");
assert_equals(axNode.checked, "false");
node.accessibleNode.checked = "true";
assert_equals(axNode.checked, "true");
node.accessibleNode.checked = "mixed";
assert_equals(axNode.checked, "mixed");
// It also works to set it to just true or false (no quotes).
node.accessibleNode.checked = true;
assert_equals(axNode.checked, "true");
node.accessibleNode.checked = false;
assert_equals(axNode.checked, "false");
}, "AccessibleNode.checked");
</script>
<div role="tab" id="current"></div>
<script>
test_after_layout_and_paint(function(t) {
var node = document.getElementById("current");
var axNode = accessibilityController.accessibleElementById("current");
assert_equals(axNode.current, "");
node.accessibleNode.current = "page";
assert_equals(axNode.current, "page");
}, "AccessibleNode.current");
</script>
<div role="textbox" id="hasPopUp" aria-haspopup="false"></div>
<script>
test_after_layout_and_paint(function(t) {
var node = document.getElementById("hasPopUp");
var axNode = accessibilityController.accessibleElementById("hasPopUp");
assert_equals(axNode.hasPopup, "");
node.accessibleNode.hasPopUp = "dialog";
// Refresh the axNode as aria-haspopup changes can invalidate it for
// purposes of allowing the role change.
axNode = accessibilityController.accessibleElementById("hasPopUp");
assert_equals(axNode.hasPopup, "dialog");
}, "AccessibleNode.hasPopUp");
</script>
<div role="textbox" id="invalid"></div>
<script>
test_after_layout_and_paint(function(t) {
var node = document.getElementById("invalid");
var axNode = accessibilityController.accessibleElementById("invalid");
assert_equals(axNode.invalid, "");
node.accessibleNode.invalid = "spelling";
assert_equals(axNode.invalid, "spelling");
}, "AccessibleNode.invalid");
</script>
<div role="button" id="keyShortcuts"></div>
<script>
test_after_layout_and_paint(function(t) {
var node = document.getElementById("keyShortcuts");
var axNode = accessibilityController.accessibleElementById("keyShortcuts");
assert_equals(axNode.keyShortcuts, "");
node.accessibleNode.keyShortcuts = "Ctrl+F";
assert_equals(axNode.keyShortcuts, "Ctrl+F");
}, "AccessibleNode.keyShortcuts");
</script>
<div role="heading" id="label">Inner text</div>
<script>
test_after_layout_and_paint(function(t) {
var node = document.getElementById("label");
var axNode = accessibilityController.accessibleElementById("label");
assert_equals(axNode.name, "Inner text");
node.accessibleNode.label = "Label";
assert_equals(axNode.name, "Label");
}, "AccessibleNode.label");
</script>
<div role="banner" id="live"></div>
<script>
test_after_layout_and_paint(function(t) {
var node = document.getElementById("live");
var axNode = accessibilityController.accessibleElementById("live");
assert_equals(axNode.live, "");
node.accessibleNode.live = "polite";
assert_equals(axNode.live, "polite");
}, "AccessibleNode.live");
</script>
<div role="slider" id="orientation"></div>
<script>
test_after_layout_and_paint(function(t) {
var node = document.getElementById("orientation");
var axNode = accessibilityController.accessibleElementById("orientation");
assert_equals(axNode.orientation, "AXOrientation: AXHorizontalOrientation");
node.accessibleNode.orientation = "vertical";
assert_equals(axNode.orientation, "AXOrientation: AXVerticalOrientation");
}, "AccessibleNode.orientation");
</script>
<input id="placeholder">
<script>
test_after_layout_and_paint(function(t) {
var node = document.getElementById("placeholder");
var axNode = accessibilityController.accessibleElementById("placeholder");
assert_equals(axNode.name, "");
node.accessibleNode.placeholder = "Placeholder";
assert_equals(axNode.name, "Placeholder");
assert_equals(axNode.nameFrom, "placeholder");
}, "AccessibleNode.placeholder");
</script>
<div role="banner" id="relevant"></div>
<script>
test_after_layout_and_paint(function(t) {
var node = document.getElementById("relevant");
var axNode = accessibilityController.accessibleElementById("relevant");
assert_equals(axNode.relevant, "additions text");
node.accessibleNode.relevant = "additions";
assert_equals(axNode.relevant, "additions");
}, "AccessibleNode.relevant");
</script>
<div role="button" id="role"></div>
<script>
test_after_layout_and_paint(function(t) {
var node = document.getElementById("role");
var axNode = accessibilityController.accessibleElementById("role");
assert_equals(axNode.role, "AXRole: AXButton");
node.accessibleNode.role = "combobox";
axNode = accessibilityController.accessibleElementById("role");
assert_equals(axNode.role, "AXRole: AXComboBoxGrouping");
node.accessibleNode.role = "banana button";
axNode = accessibilityController.accessibleElementById("role");
assert_equals(axNode.role, "AXRole: AXButton");
}, "AccessibleNode.role");
</script>
<div role="button" id="roleDescription"></div>
<script>
test_after_layout_and_paint(function(t) {
var node = document.getElementById("roleDescription");
var axNode = accessibilityController.accessibleElementById("roleDescription");
assert_equals(axNode.roleDescription, "");
node.accessibleNode.roleDescription = "Push Button";
assert_equals(axNode.roleDescription, "Push Button");
}, "AccessibleNode.roleDescription");
</script>
<div role="columnheader" id="sort"></div>
<script>
test_after_layout_and_paint(function(t) {
var node = document.getElementById("sort");
var axNode = accessibilityController.accessibleElementById("sort");
assert_equals(axNode.sort, "");
node.accessibleNode.sort = "ascending";
assert_equals(axNode.sort, "ascending");
}, "AccessibleNode.sort");
</script>
<div role="slider" id="valueText" aria-valuetext="5"></div>
<script>
test_after_layout_and_paint(function(t) {
var node = document.getElementById("valueText");
var axNode = accessibilityController.accessibleElementById("valueText");
assert_equals(axNode.valueDescription, "AXValueDescription: 5");
node.accessibleNode.valueText = "Five";
assert_equals(axNode.valueDescription, "AXValueDescription: Five");
}, "AccessibleNode.valueText");
</script>