third_party/WebKit/LayoutTests/accessibility/name-calc-native-markup-input-buttons.html

   1 <!DOCTYPE HTML>
   2 <script src="../resources/testharness.js"></script>
   3 <script src="../resources/testharnessreport.js"></script>
   4
   5 <style>
   6 .hideAllContainers .container {
   7     display: none;
   8 }
   9 </style>
  10
  11 <div class="container">
  12     <input id="button1" type="button">
  13 </div>
  14
  15 <script>
  16 test(function(t) {
  17     var axButtonInput1 = accessibilityController.accessibleElementById("button1");
  18     assert_equals(axButtonInput1.name, "");
  19 }, "Input button with no value");
  20 </script>
  21
  22 <div class="container">
  23     <input id="button2" type="button" value="button-value2">
  24 </div>
  25
  26 <script>
  27 test(function(t) {
  28     var axButtonInput2 = accessibilityController.accessibleElementById("button2");
  29     assert_equals(axButtonInput2.name, "button-value2");
  30     assert_equals(axButtonInput2.nameFrom, "attribute");
  31 }, "Input button with value");
  32 </script>
  33
  34 <div class="container">
  35     <input id="button3" type="button" value="button-value3" title="button-title3">
  36 </div>
  37
  38 <script>
  39 test(function(t) {
  40     var axButtonInput3 = accessibilityController.accessibleElementById("button3");
  41     assert_equals(axButtonInput3.name, "button-value3");
  42     assert_equals(axButtonInput3.nameFrom, "attribute");
  43 }, "Input button with value and title");
  44 </script>
  45
  46 <div class="container">
  47     <input id="button4" type="button" title="button-title4">
  48 </div>
  49
  50 <script>
  51 test(function(t) {
  52     var axButtonInput4 = accessibilityController.accessibleElementById("button4");
  53     assert_equals(axButtonInput4.name, "button-title4");
  54     assert_equals(axButtonInput4.nameFrom, "attribute");
  55 }, "Input button with title only");
  56 </script>
  57
  58 <div class="container">
  59     <input id="button5" type="button">
  60     <label for="button5">button-label-5</label>
  61 </div>
  62
  63 <script>
  64 test(function(t) {
  65     var axButtonInput5 = accessibilityController.accessibleElementById("button5");
  66     assert_equals(axButtonInput5.name, "button-label-5");
  67     assert_equals(axButtonInput5.nameFrom, "relatedElement");
  68 }, "Input button with label for= and no value");
  69 </script>
  70
  71 <div class="container">
  72     <label>button-label-6<input id="button6" type="button"></label>
  73 </div>
  74
  75 <script>
  76 test(function(t) {
  77     var axButtonInput6 = accessibilityController.accessibleElementById("button6");
  78     assert_equals(axButtonInput6.name, "button-label-6");
  79     assert_equals(axButtonInput6.nameFrom, "relatedElement");
  80 }, "Input button with label wrapped and no value");
  81 </script>
  82
  83 <div class="container">
  84     <input id="button7" type="button" value="button-value7">
  85     <label for="button7">button-label-7</label>
  86 </div>
  87
  88 <script>
  89 test(function(t) {
  90     var axButtonInput7 = accessibilityController.accessibleElementById("button7");
  91     assert_equals(axButtonInput7.name, "button-label-7");
  92     assert_equals(axButtonInput7.nameFrom, "relatedElement");
  93 }, "Input button with label for= and value");
  94 </script>
  95
  96 <div class="container">
  97     <input id="button8" type="button" value="button-value8" aria-label="button-aria-label-8">
  98     <label for="button8">button-label-8</label>
  99 </div>
 100
 101 <script>
 102 test(function(t) {
 103     var axButtonInput8 = accessibilityController.accessibleElementById("button8");
 104     assert_equals(axButtonInput8.name, "button-aria-label-8");
 105     assert_equals(axButtonInput8.nameFrom, "attribute");
 106 }, "Input button with label for= and aria-label");
 107 </script>
 108
 109 <div class="container">
 110     <input id="button9" type="button" value="button-value9" aria-label="button-aria-label-9" aria-labelledby="label-for-button9">
 111     <label for="button9">button-label-9</label>
 112     <span id="label-for-button9">button9-aria-labelledby</span>
 113 </div>
 114
 115 <script>
 116 test(function(t) {
 117     var axButtonInput9 = accessibilityController.accessibleElementById("button9");
 118     assert_equals(axButtonInput9.name, "button9-aria-labelledby");
 119     assert_equals(axButtonInput9.nameFrom, "relatedElement");
 120 }, "Input button with label for=, aria-label and aria-labelledby");
 121 </script>
 122
 123 <div class="container">
 124     <input id="submit1" type="submit">
 125 </div>
 126
 127 <script>
 128 test(function(t) {
 129     var axSubmitButton1 = accessibilityController.accessibleElementById("submit1");
 130     assert_equals(axSubmitButton1.name, "Submit");
 131     assert_equals(axSubmitButton1.nameFrom, "contents");
 132 }, "Submit button without value");
 133 </script>
 134
 135 <div class="container">
 136     <input id="submit2" type="submit" value="submit-value2">
 137 </div>
 138
 139 <script>
 140 test(function(t) {
 141     var axSubmitButton2 = accessibilityController.accessibleElementById("submit2");
 142     assert_equals(axSubmitButton2.name, "submit-value2");
 143     assert_equals(axSubmitButton2.nameFrom, "attribute");
 144 }, "Submit button with value");
 145 </script>
 146
 147 <div class="container">
 148     <input id="submit3" type="submit" title="submit-title">
 149 </div>
 150
 151 <script>
 152 test(function(t) {
 153     var axSubmitButton3 = accessibilityController.accessibleElementById("submit3");
 154     assert_equals(axSubmitButton3.name, "Submit");
 155     assert_equals(axSubmitButton3.nameFrom, "contents");
 156 }, "Submit button with title only");
 157 </script>
 158
 159 <div class="container">
 160     <input id="reset1" type="reset">
 161 </div>
 162
 163 <script>
 164 test(function(t) {
 165     var axResetButton1 = accessibilityController.accessibleElementById("reset1");
 166     assert_equals(axResetButton1.name, "Reset");
 167     assert_equals(axResetButton1.nameFrom, "contents");
 168 }, "Reset button with no value");
 169 </script>
 170
 171 <div class="container">
 172     <input id="image-input1" type="image" src="resources/cake.png">
 173 </div>
 174
 175 <script>
 176 test(function(t) {
 177     var axImageInput1 = accessibilityController.accessibleElementById("image-input1");
 178     assert_equals(axImageInput1.name, "Submit");
 179     assert_equals(axImageInput1.nameFrom, "attribute");
 180 }, "Image input with no value");
 181 </script>
 182
 183 <div class="container">
 184     <input id="image-input2" type="image" src="resources/cake.png" value="image-input-value2">
 185 </div>
 186
 187 <script>
 188 test(function(t) {
 189     var axImageInput2 = accessibilityController.accessibleElementById("image-input2");
 190     assert_equals(axImageInput2.name, "image-input-value2");
 191     assert_equals(axImageInput2.nameFrom, "attribute");
 192 }, "Image input with value");
 193 </script>
 194
 195 <div class="container">
 196     <input id="image-input3" type="image" src="resources/cake.png" alt="image-input-alt3">
 197 </div>
 198
 199 <script>
 200 test(function(t) {
 201     var axImageInput3 = accessibilityController.accessibleElementById("image-input3");
 202     assert_equals(axImageInput3.name, "image-input-alt3");
 203     assert_equals(axImageInput3.nameFrom, "attribute");
 204 }, "Image input with alt");
 205 </script>
 206
 207 <div class="container">
 208     <input id="image-input4" type="image" src="resources/cake.png" alt="image-input-alt4" value="image-input-value4">
 209 </div>
 210
 211 <script>
 212 test(function(t) {
 213     var axImageInput4 = accessibilityController.accessibleElementById("image-input4");
 214     assert_equals(axImageInput4.name, "image-input-alt4");
 215     assert_equals(axImageInput4.nameFrom, "attribute");
 216 }, "Image input with alt and value");
 217 </script>
 218
 219 <div class="container">
 220     <input id="image-input5" type="image" src="resources/cake.png" title="image-input-title5">
 221 </div>
 222
 223 <script>
 224 test(function(t) {
 225     var axImageInput5 = accessibilityController.accessibleElementById("image-input5");
 226     assert_equals(axImageInput5.name, "Submit");
 227     assert_equals(axImageInput5.nameFrom, "attribute");
 228 }, "Image input with title only");
 229 </script>
 230
 231 <script>
 232 if (window.testRunner)
 233     document.body.className = "hideAllContainers";
 234 </script>