third_party/WebKit/LayoutTests/accessibility/name-calc-aria-labelledby.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     <div id="div">Div Contents</div>
  13 </div>
  14
  15 <script>
  16 test(function(t){
  17     var axDiv = accessibilityController.accessibleElementById("div");
  18     assert_equals(axDiv.name, "");
  19 }, "A simple div with inner text should not have an accessible name.");
  20 </script>
  21
  22 <div class="container">
  23     <button id="self">Contents of button</button>
  24 </div>
  25
  26 <script>
  27 test(function(t){
  28     var axSelf = accessibilityController.accessibleElementById("self");
  29     assert_equals(axSelf.name, "Contents of button");
  30     assert_equals(axSelf.nameFrom, "contents");
  31 }, "A button's accessible name should come from its contents.");
  32 </script>
  33
  34 <div class="container">
  35     <button id="labelledby" aria-labelledby="label1">Contents</button>
  36     <div id="label1">Label 1</div>
  37 </div>
  38
  39 <script>
  40 test(function(t){
  41     var axLabelledby = accessibilityController.accessibleElementById("labelledby");
  42     assert_equals(axLabelledby.name, "Label 1");
  43     assert_equals(axLabelledby.nameFrom, "relatedElement");
  44     assert_equals(axLabelledby.nameElementCount(), 1);
  45     assert_equals(axLabelledby.nameElementAtIndex(0).role, "AXRole: AXDiv");
  46 }, "Button with aria-labelledby referencing the id of another element.");
  47 </script>
  48
  49 <div class="container">
  50     <button id="labelledby2" aria-labelledby="labelledby2">Contents</button>
  51 </div>
  52
  53 <script>
  54 test(function(t){
  55     var axLabelledby2 = accessibilityController.accessibleElementById("labelledby2");
  56     assert_equals(axLabelledby2.name, "Contents");
  57     assert_equals(axLabelledby2.nameFrom, "relatedElement");
  58     assert_equals(axLabelledby2.nameElementCount(), 1);
  59     assert_equals(axLabelledby2.nameElementAtIndex(0).role, "AXRole: AXButton");
  60 }, "Button with aria-labelledby referencing itself.");
  61 </script>
  62
  63 <div class="container">
  64     <button id="labelledby3" aria-labelledby="labelledby3 label3">Contents</button>
  65     <div id="label3">Label 3</div>
  66 </div>
  67
  68 <script>
  69 test(function(t){
  70     var axLabelledby3 = accessibilityController.accessibleElementById("labelledby3");
  71     assert_equals(axLabelledby3.name, "Contents Label 3");
  72     assert_equals(axLabelledby3.nameFrom, "relatedElement");
  73     assert_equals(axLabelledby3.nameElementCount(), 2);
  74     assert_equals(axLabelledby3.nameElementAtIndex(0).role, "AXRole: AXButton");
  75     assert_equals(axLabelledby3.nameElementAtIndex(1).role, "AXRole: AXDiv");
  76 }, "Button with aria-labelledby referencing itself and the id of another element.");
  77 </script>
  78
  79 <div class="container">
  80     <button id="labelledby4" aria-labelledby="label4">Contents</button>
  81     <div id="label4" aria-labelledby="label4chained">Contents 4</div>
  82     <p id="label4chained">Contents 4 chained</p>
  83 </div>
  84
  85 <script>
  86 test(function(t){
  87     var axLabelledby4 = accessibilityController.accessibleElementById("labelledby4");
  88     assert_equals(axLabelledby4.name, "Contents 4");
  89     assert_equals(axLabelledby4.nameFrom, "relatedElement");
  90     assert_equals(axLabelledby4.nameElementCount(), 1);
  91     assert_equals(axLabelledby4.nameElementAtIndex(0).role, "AXRole: AXDiv");
  92 }, "Button with chain of aria-labelledby references.");
  93 </script>
  94
  95 <div class="container">
  96     <button id="labelledby5" aria-labelledby="label5">Contents</button>
  97 </div>
  98
  99 <script>
 100 test(function(t){
 101     var axLabelledby5 = accessibilityController.accessibleElementById("labelledby5");
 102     assert_equals(axLabelledby5.name, "Contents");
 103     assert_equals(axLabelledby5.nameFrom, "contents");
 104     assert_equals(axLabelledby5.nameElementCount(), 0);
 105 }, "aria-labelledby reference to nonexistant element.");
 106 </script>
 107
 108 <div class="container">
 109     <button id="labelledby6" aria-labelledby="label6">Contents</button>
 110     <div id="label6"></div>
 111 </div>
 112
 113 <script>
 114 test(function(t){
 115     var axLabelledby6 = accessibilityController.accessibleElementById("labelledby6");
 116     assert_equals(axLabelledby6.name, "");
 117     assert_equals(axLabelledby6.nameFrom, "relatedElement");
 118     assert_equals(axLabelledby6.nameElementCount(), 1);
 119     assert_equals(axLabelledby6.nameElementAtIndex(0).role, "AXRole: AXDiv");
 120 }, "aria-labelledby reference to element with no text.");
 121 </script>
 122
 123 <div class="container">
 124     <button id="labelledby7" aria-labelledby="label7">Contents</button>
 125     <h3 id="label7" style="visibility: hidden">Invisible label</h3>
 126 </div>
 127
 128 <script>
 129 test(function(t){
 130     assert_equals(accessibilityController.accessibleElementById("label7"), undefined);
 131     var axLabelledby7 = accessibilityController.accessibleElementById("labelledby7");
 132     assert_equals(axLabelledby7.name, "Invisible label");
 133     assert_equals(axLabelledby7.nameFrom, "relatedElement");
 134     assert_equals(axLabelledby7.nameElementCount(), 1);
 135     assert_equals(axLabelledby7.nameElementAtIndex(0).role, "AXRole: AXHeading");
 136 }, "Button with aria-labelledby reference to invisible element.");
 137 </script>
 138
 139 <div class="container">
 140     <button id="labelledby8" aria-labelledby="label8">Contents</button>
 141     <h3 id="label8" style="display: none">Display-none label</h3>
 142 </div>
 143
 144 <script>
 145 test(function(t){
 146     assert_equals(accessibilityController.accessibleElementById("label8"), undefined);
 147     var axLabelledby8 = accessibilityController.accessibleElementById("labelledby8");
 148     assert_equals(axLabelledby8.name, "Display-none label");
 149     assert_equals(axLabelledby8.nameFrom, "relatedElement");
 150     assert_equals(axLabelledby8.nameElementCount(), 1);
 151     assert_equals(axLabelledby8.nameElementAtIndex(0).role, "AXRole: AXHeading");
 152 }, "Button with aria-labelledby reference to display-none element.");
 153 </script>
 154
 155 <script>
 156 if (window.testRunner)
 157     document.body.className = "hideAllContainers";
 158 </script>