name-calc-inputs.html | Explore in Territory

<!DOCTYPE HTML>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<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-title");
    assert_equals(axTextInput3.nameFrom, "title");
}, "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
        <span>   <!-- Also testing ancestor label that is not direct parent -->
            <input id="text7" type="text" title="text7-title">
        </span>
    </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, "title");
}, "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-title");
    assert_equals(axTextInput12.nameFrom, "title");
}, "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-title");
    assert_equals(axTextInput13.nameFrom, "title");
}, "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>
chromium/third_party/blink/web_tests/accessibility/name-calc-inputs.html
