blob: c6b06730ffd634eed1943989c25143c2fe222970 [file] [log] [blame]
<!DOCTYPE HTML>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
.hideAllContainers .container {
display: none;
}
</style>
<div class="container">
<div id="div">Div Contents</div>
</div>
<script>
test(function(t){
var axDiv = accessibilityController.accessibleElementById("div");
assert_equals(axDiv.description, "");
}, "A simple div should not have an accessible description.");
</script>
<div class="container">
<button id="self">Contents of button</button>
</div>
<script>
test(function(t){
var axSelf = accessibilityController.accessibleElementById("self");
assert_equals(axSelf.name, "Contents of button");
assert_equals(axSelf.nameFrom, "contents");
assert_equals(axSelf.description, "");
assert_equals(axSelf.descriptionFrom, "");
}, "A button's accessible name should come from its contents and it should have no accessible description.");
</script>
<div class="container">
<button id="describedby" aria-describedby="description1">Contents</button>
<div id="description1">Description 1</div>
</div>
<script>
test(function(t){
var axDescribedby = accessibilityController.accessibleElementById("describedby");
assert_equals(axDescribedby.name, "Contents");
assert_equals(axDescribedby.nameFrom, "contents");
assert_equals(axDescribedby.description, "Description 1");
assert_equals(axDescribedby.descriptionFrom, "relatedElement");
assert_equals(axDescribedby.descriptionElementCount(), 1);
assert_equals(axDescribedby.descriptionElementAtIndex(0).role, "AXRole: AXGenericContainer");
}, "Button with aria-describedby referencing the id of another element.");
</script>
<div class="container">
<button id="describedby2" aria-describedby="describedby2">Contents</button>
</div>
<script>
test(function(t){
var axDescribedby2 = accessibilityController.accessibleElementById("describedby2");
assert_equals(axDescribedby2.name, "Contents");
assert_equals(axDescribedby2.nameFrom, "contents");
assert_equals(axDescribedby2.description, "Contents");
assert_equals(axDescribedby2.descriptionFrom, "relatedElement");
assert_equals(axDescribedby2.descriptionElementCount(), 1);
assert_equals(axDescribedby2.descriptionElementAtIndex(0).role, "AXRole: AXButton");
}, "Button with aria-describedby referencing itself.");
</script>
<div class="container">
<button id="describedby3" aria-describedby="describedby3 description3">Contents</button>
<div id="description3">Description 3</div>
</div>
<script>
test(function(t){
var axDescribedby3 = accessibilityController.accessibleElementById("describedby3");
assert_equals(axDescribedby3.name, "Contents");
assert_equals(axDescribedby3.nameFrom, "contents");
assert_equals(axDescribedby3.description, "Contents Description 3");
assert_equals(axDescribedby3.descriptionFrom, "relatedElement");
assert_equals(axDescribedby3.descriptionElementCount(), 2);
assert_equals(axDescribedby3.descriptionElementAtIndex(0).role, "AXRole: AXButton");
assert_equals(axDescribedby3.descriptionElementAtIndex(1).role, "AXRole: AXGenericContainer");
}, "Button with aria-describedby referencing itself and the id of another element.");
</script>
<div class="container">
<button id="describedby4" aria-describedby="description4">Contents</button>
</div>
<script>
test(function(t){
var axDescribedby4 = accessibilityController.accessibleElementById("describedby4");
assert_equals(axDescribedby4.name, "Contents");
assert_equals(axDescribedby4.nameFrom, "contents");
assert_equals(axDescribedby4.description, "");
assert_equals(axDescribedby4.descriptionFrom, "");
assert_equals(axDescribedby4.descriptionElementCount(), 0);
}, "aria-describedby reference to nonexistant element.");
</script>
<div class="container">
<button id="describedby5" aria-describedby="description5">Contents</button>
<div id="description5"></div>
</div>
<script>
test(function(t){
var axDescribedby5 = accessibilityController.accessibleElementById("describedby5");
assert_equals(axDescribedby5.name, "Contents");
assert_equals(axDescribedby5.nameFrom, "contents");
assert_equals(axDescribedby5.description, "");
assert_equals(axDescribedby5.descriptionFrom, "relatedElement");
assert_equals(axDescribedby5.descriptionElementCount(), 1);
assert_equals(axDescribedby5.descriptionElementAtIndex(0).role, "AXRole: AXGenericContainer");
}, "aria-describedby reference to element with no text.");
</script>
<div class="container">
<button id="describedby6" aria-describedby="description6">Contents</button>
<h3 id="description6" style="visibility: hidden">Invisible description</h3>
</div>
<script>
test(function(t){
assert_equals(accessibilityController.accessibleElementById("description6"), undefined);
var axDescribedby6 = accessibilityController.accessibleElementById("describedby6");
assert_equals(axDescribedby6.name, "Contents");
assert_equals(axDescribedby6.nameFrom, "contents");
assert_equals(axDescribedby6.description, "Invisible description");
assert_equals(axDescribedby6.descriptionFrom, "relatedElement");
assert_equals(axDescribedby6.descriptionElementCount(), 1);
assert_equals(axDescribedby6.descriptionElementAtIndex(0).role, "AXRole: AXHeading");
}, "Button with aria-describedby reference to invisible element.");
</script>
<div class="container">
<button id="describedby7" aria-describedby="description7">Contents</button>
<h3 id="description7" style="display: none">Display-none description</h3>
</div>
<script>
test(function(t){
assert_equals(accessibilityController.accessibleElementById("description7"), undefined);
var axDescribedby7 = accessibilityController.accessibleElementById("describedby7");
assert_equals(axDescribedby7.name, "Contents");
assert_equals(axDescribedby7.nameFrom, "contents");
assert_equals(axDescribedby7.description, "Display-none description");
assert_equals(axDescribedby7.descriptionFrom, "relatedElement");
assert_equals(axDescribedby7.descriptionElementCount(), 1);
assert_equals(axDescribedby7.descriptionElementAtIndex(0).role, "AXRole: AXHeading");
}, "Button with aria-describedby reference to display-none element.");
</script>
<script>
if (window.testRunner)
document.body.className = "hideAllContainers";
</script>