<!DOCTYPE HTML>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<div class="container">
<button id="button1"></button>
</div>
<script>
test(function(t) {
var axButton1 = accessibilityController.accessibleElementById("button1");
assert_equals(axButton1.name, "");
}, "Button with no content");
</script>
<div class="container">
<button id="button2">button2-content</button>
</div>
<script>
test(function(t) {
var axButton2 = accessibilityController.accessibleElementById("button2");
assert_equals(axButton2.name, "button2-content");
assert_equals(axButton2.nameFrom, "contents");
}, "Button with text content");
</script>
<div class="container">
<button id="button3"><img src="resources/cake.png"></button>
</div>
<script>
test(function(t) {
var axButton3 = accessibilityController.accessibleElementById("button3");
assert_equals(axButton3.name, "");
}, "Button with img content with no alt");
</script>
<div class="container">
<button id="button4"><img src="resources/cake.png" alt="cake"></button>
</div>
<script>
test(function(t) {
var axButton4 = accessibilityController.accessibleElementById("button4");
assert_equals(axButton4.name, "cake");
assert_equals(axButton4.nameFrom, "contents");
}, "Button with img content with alt");
</script>
<div class="container">
<button id="button5">I love <img src="resources/cake.png">!</button>
</div>
<script>
test(function(t) {
var axButton5 = accessibilityController.accessibleElementById("button5");
assert_equals(axButton5.name, "I love !");
assert_equals(axButton5.nameFrom, "contents");
}, "Button with text content and img content with no alt");
</script>
<div class="container">
<button id="button6">I love <img src="resources/cake.png" alt="cake">!</button>
</div>
<script>
test(function(t) {
var axButton6 = accessibilityController.accessibleElementById("button6");
assert_equals(axButton6.name, "I love cake !");
assert_equals(axButton6.nameFrom, "contents");
}, "Button with text content and img content with alt");
</script>
<div class="container">
<button id="button7" title="button7-title"></button>
</div>
<script>
test(function(t) {
var axButton7 = accessibilityController.accessibleElementById("button7");
assert_equals(axButton7.name, "button7-title");
assert_equals(axButton7.nameFrom, "title");
}, "Button with title only");
</script>
<div class="container">
<button id="button8" title="button8-title">button8-content</button>
</div>
<script>
test(function(t) {
var axButton8 = accessibilityController.accessibleElementById("button8");
assert_equals(axButton8.name, "button8-content");
assert_equals(axButton8.nameFrom, "contents");
}, "Button with title and contents");
</script>
<div class="container">
<button id="button9" title="button9-title"><img src="resources/cake.png"></button>
</div>
<script>
test(function(t) {
var axButton9 = accessibilityController.accessibleElementById("button9");
assert_equals(axButton9.name, "button9-title");
assert_equals(axButton9.nameFrom, "title");
}, "Button with title and img content with no alt");
</script>
<div class="container">
<button id="button10" title="button10-title"><img src="resources/cake.png" alt="cake"></button>
</div>
<script>
test(function(t) {
var axButton10 = accessibilityController.accessibleElementById("button10");
assert_equals(axButton10.name, "cake");
assert_equals(axButton10.nameFrom, "contents");
}, "Button with title and img content with alt");
</script>
<div class="container">
<button id="button11">button11-content</button>
<label for="button11">label-for-button11</label>
</div>
<script>
test(function(t) {
var axButton11 = accessibilityController.accessibleElementById("button11");
assert_equals(axButton11.name, "label-for-button11");
assert_equals(axButton11.nameFrom, "relatedElement");
}, "Button with text content and label");
</script>
Codebase Browser
chromium