blob: bd7190c1d43b8f821c59b5102cfbffed28460165 [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">
<input id="text1" type="text">
</div>
<script>
test(function(t) {
var axTextInput1 = accessibilityController.accessibleElementById("text1");
assert_equals(axTextInput1.name, "");
}, "Text input");
</script>
<div class="container">
<input id="text2" type="text" title="text2-title">
</div>
<script>
test(function(t) {
var axTextInput2 = accessibilityController.accessibleElementById("text2");
assert_equals(axTextInput2.name, "text2-title");
assert_equals(axTextInput2.nameFrom, "title");
}, "Text input with title");
</script>
<div class="container">
<input id="text3" type="text" title="text3-title" placeholder="text3-placeholder">
</div>
<script>
test(function(t) {
var axTextInput3 = accessibilityController.accessibleElementById("text3");
assert_equals(axTextInput3.name, "text3-placeholder");
assert_equals(axTextInput3.nameFrom, "placeholder");
}, "Text input with title and placeholder");
</script>
<div class="container">
<input id="text4" type="text" title="text4-title" placeholder="text4-placeholder">
<label for="text4">label-for-text4</label>
</div>
<script>
test(function(t) {
var axTextInput4 = accessibilityController.accessibleElementById("text4");
assert_equals(axTextInput4.name, "label-for-text4");
assert_equals(axTextInput4.nameFrom, "relatedElement");
}, "Text input with title, placeholder and label-for");
</script>
<div class="container">
<input id="text5" type="text" title="text5-title" placeholder="text5-placeholder" aria-label="text5-aria-label">
<label for="text5">label-for-text5</label>
</div>
<script>
test(function(t) {
var axTextInput5 = accessibilityController.accessibleElementById("text5");
assert_equals(axTextInput5.name, "text5-aria-label");
assert_equals(axTextInput5.nameFrom, "attribute");
}, "Text input with title, placeholder, label-for and aria-label");
</script>
<div class="container">
<input id="text6" type="text" title="text6-title" placeholder="text6-placeholder" aria-label="text6-aria-label" aria-labelledby="labelledby6">
<label for="text6">label-for-text6</label>
<span id="labelledby6">labelledby-for-text6</span>
</div>
<script>
test(function(t) {
var axTextInput6 = accessibilityController.accessibleElementById("text6");
assert_equals(axTextInput6.name, "labelledby-for-text6");
assert_equals(axTextInput6.nameFrom, "relatedElement");
}, "Text input with title, placeholder, label-for, aria-label and aria-labelledby");
</script>
<div class="container">
<label>label-wrapping-text7
<input id="text7" type="text" title="text7-title">
</label>
</div>
<script>
test(function(t) {
var axTextInput7 = accessibilityController.accessibleElementById("text7");
assert_equals(axTextInput7.name, "label-wrapping-text7");
assert_equals(axTextInput7.nameFrom, "relatedElement");
}, "Text input with title and label-wrapped");
</script>
<div class="container">
<label for="dummy">label-wrapping-text8
<input id="text8" type="text">
</label>
</div>
<script>
test(function(t) {
var axTextInput8 = accessibilityController.accessibleElementById("text8");
assert_equals(axTextInput8.name, "");
}, "Text input with wrapped label with wrong ID");
</script>
<div class="container">
<label for="text9">label-for-text9</label>
<label>label-wrapping-text9<input id="text9" type="text" title="text9-title" placeholder="text9-placeholder"></label>
</div>
<script>
test(function(t) {
var axTextInput9 = accessibilityController.accessibleElementById("text9");
assert_equals(axTextInput9.name,
"label-for-text9 label-wrapping-text9");
assert_equals(axTextInput9.nameFrom, "relatedElement");
}, "Text input with title, placeholder, label-for and label-wrapped");
</script>
<div class="container">
<label>label-wrapping-text10<input id="text10" type="text" title="text10-title" placeholder="text10-placeholder">
</label>
</div>
<script>
test(function(t) {
var axTextInput10 = accessibilityController.accessibleElementById("text10");
assert_equals(axTextInput10.name, "label-wrapping-text10");
assert_equals(axTextInput10.nameFrom, "relatedElement");
assert_equals(axTextInput10.description, "text10-title");
assert_equals(axTextInput10.descriptionFrom, "attribute");
}, "Text input with placeholder and label-wrapped");
</script>
<div class="container">
<input id="text11" type="text">
<label for="text11">first-label-for-text11</label>
<label for="text11">second-label-for-text11</label>
</div>
<script>
test(function(t) {
var axTextInput11 = accessibilityController.accessibleElementById("text11");
assert_equals(axTextInput11.name,
"first-label-for-text11 second-label-for-text11");
assert_equals(axTextInput11.nameFrom, "relatedElement");
}, "Text input with multiple label-for");
</script>
<div class="container">
<input id="text12" type="text" title="text12-title" aria-placeholder="text12-aria-placeholder">
</div>
<script>
test(function(t) {
var axTextInput12 = accessibilityController.accessibleElementById("text12");
assert_equals(axTextInput12.name, "text12-aria-placeholder");
assert_equals(axTextInput12.nameFrom, "placeholder");
}, "Text input with title and aria-placeholder");
</script>
<div class="container">
<input id="text13" type="text" title="text13-title" aria-placeholder="text13-aria-placeholder" placeholder="text13-placeholder">
</div>
<script>
test(function(t) {
var axTextInput13 = accessibilityController.accessibleElementById("text13");
assert_equals(axTextInput13.name, "text13-placeholder");
assert_equals(axTextInput13.nameFrom, "placeholder");
}, "Text input with title and aria-placeholder");
</script>
<div class="container">
<div role="textbox" id="text14" aria-placeholder="text14-aria-placeholder">
</div>
<script>
test(function(t) {
var axTextInput14 = accessibilityController.accessibleElementById("text14");
assert_equals(axTextInput14.name, "text14-aria-placeholder");
assert_equals(axTextInput14.nameFrom, "placeholder");
}, "Div with textbox role and aria-placeholder");
</script>
<div class="container">
<div role="textbox" id="text15" title="text15-title" aria-placeholder="text15-aria-placeholder">
</div>
<script>
test(function(t) {
var axTextInput15 = accessibilityController.accessibleElementById("text15");
assert_equals(axTextInput15.name, "text15-aria-placeholder");
assert_equals(axTextInput15.nameFrom, "placeholder");
}, "Div with textbox role and title and aria-placeholder");
</script>
<div class="container">
<div id="text16" role="button" aria-placeholder="text16-aria-placeholder">
</div>
<script>
test(function(t) {
var axTextInput16 = accessibilityController.accessibleElementById("text16");
assert_equals(axTextInput16.name, "");
assert_equals(axTextInput16.nameFrom, "");
}, "Div without textbox role and aria-placeholder");
</script>
<script>
if (window.testRunner)
document.body.className = "hideAllContainers";
</script>