third_party/WebKit/LayoutTests/accessibility/aria-owns.html

   1 <!DOCTYPE HTML>
   2 <script src="../resources/testharness.js"></script>
   3 <script src="../resources/testharnessreport.js"></script>
   4
   5 <style>
   6 .hideAllContainers .container { display: none; }
   7 </style>
   8
   9 <div class="container">
  10     <ul id="list1" aria-owns="item3">
  11         <li>One</li>
  12         <li>Two</li>
  13     </ul>
  14     <ul id="list2">
  15         <li id="item3">Three</li>
  16         <li>Four</li>
  17     </ul>
  18 </div>
  19
  20 <script>
  21 test(function(t)
  22 {
  23     var axList1 = accessibilityController.accessibleElementById("list1");
  24     assert_equals(axList1.role, "AXRole: AXList");
  25     assert_equals(axList1.childrenCount, 3);
  26
  27     var axItem = axList1.childAtIndex(0);
  28     assert_equals(axList1.childAtIndex(0).title, "AXTitle: One");
  29     assert_equals(axList1.childAtIndex(1).title, "AXTitle: Two");
  30     assert_equals(axList1.childAtIndex(2).title, "AXTitle: Three");
  31
  32     var axList2 = accessibilityController.accessibleElementById("list2");
  33     assert_equals(axList2.role, "AXRole: AXList");
  34     assert_equals(axList2.childrenCount, 1);
  35     assert_equals(axList2.childAtIndex(0).title, "AXTitle: Four");
  36 }, "Aria-owns moves an element from one part of the tree to another.");
  37 </script>
  38
  39 <div class="container">
  40     <ul id="parent1" aria-owns="child"></ul>
  41     <ul id="parent2" aria-owns="child"></ul>
  42     <ul id="parent3">
  43         <li id="child">Child</li>
  44     </ul>
  45 </div>
  46
  47 <script>
  48 test(function(t)
  49 {
  50     var axParent1 = accessibilityController.accessibleElementById("parent1");
  51     var axParent2 = accessibilityController.accessibleElementById("parent2");
  52     var axParent3 = accessibilityController.accessibleElementById("parent3");
  53     var axChild = accessibilityController.accessibleElementById("child");
  54
  55     // Either parent1 or parent2 should own the child, but either one is okay.
  56     var axActualParent = axChild.parentElement();
  57     assert_true(axActualParent.isEqual(axParent1) || axActualParent.isEqual(axParent2));
  58     if (axActualParent.isEqual(axParent1)) {
  59         assert_equals(axParent1.childrenCount, 1);
  60         assert_equals(axParent1.childAtIndex(0).title, "AXTitle: Child");
  61         assert_equals(axParent2.childrenCount, 0);
  62     } else {
  63         assert_equals(axParent1.childrenCount, 0);
  64         assert_equals(axParent2.childrenCount, 1);
  65         assert_equals(axParent2.childAtIndex(0).title, "AXTitle: Child");
  66     }
  67     assert_equals(axParent3.childrenCount, 0);
  68 }, "If two nodes own (using aria-owns) the same element by id, only one gets to be the owner.");
  69 </script>
  70
  71 <div class="container">
  72     <div id="xyz" role="group">
  73         <div id="x" role="group" aria-owns="y"></div>
  74         <div id="y" role="group" aria-owns="z"></div>
  75         <div id="z" role="group" aria-owns="x"></div>
  76     </div>
  77 </div>
  78
  79 <script>
  80 test(function(t)
  81 {
  82     // Make sure we can walk the whole tree.
  83     accessibilityController.accessibleElementById("dummy");
  84
  85     // Since there's no valid resolution to the cycle of aria-owns,
  86     // just assert that each element's parent is either its real parent
  87     // or its aria-owned parent, it doesn't matter which one.
  88     var axXYZ = accessibilityController.accessibleElementById("xyz");
  89     var axX = accessibilityController.accessibleElementById("x");
  90     var axY = accessibilityController.accessibleElementById("y");
  91     var axZ = accessibilityController.accessibleElementById("z");
  92     assert_true(axX.parentElement().isEqual(axXYZ) ||
  93                 axX.parentElement().isEqual(axZ));
  94     assert_true(axY.parentElement().isEqual(axXYZ) ||
  95                 axY.parentElement().isEqual(axX));
  96     assert_true(axZ.parentElement().isEqual(axXYZ) ||
  97                 axZ.parentElement().isEqual(axY));
  98 }, "An aria-owns relationship that would create a cycle is ignored.");
  99 </script>
 100
 101 <div class="container">
 102     <div id="real-parent" role="group">
 103         <div id="owns-self" role="group" aria-owns="owns-self"></div>
 104     </div>
 105 </div>
 106
 107 <script>
 108 test(function(t)
 109 {
 110     var axRealParent = accessibilityController.accessibleElementById("real-parent");
 111     var axOwnsSelf  = accessibilityController.accessibleElementById("owns-self");
 112
 113     assert_true(axOwnsSelf.parentElement().isEqual(axRealParent));
 114     assert_equals(axOwnsSelf.childrenCount, 0);
 115 }, "An element can't own itself.");
 116 </script>
 117
 118 <div class="container">
 119     <div id="yancy" role="group">
 120         <div id="fry" role="group" aria-owns="yancy"></div>
 121     </div>
 122 </div>
 123
 124 <script>
 125 test(function(t)
 126 {
 127     var axYancy = accessibilityController.accessibleElementById("yancy");
 128     var axFry = accessibilityController.accessibleElementById("fry");
 129
 130     assert_equals(axFry.childrenCount, 0);
 131     assert_equals(axYancy.childrenCount, 1);
 132     assert_true(axYancy.childAtIndex(0).isEqual(axFry));
 133 }, "An object cannot use aria-owns to own its own parent.");
 134 </script>
 135
 136 <div class="container">
 137     <div id="logical_parent" role="group" aria-owns="logical_1 logical_2 logical_3 logical_4">
 138         <div id="logical_3">3</div>
 139         <div id="logical_4">4</div>
 140         <div id="logical_2">2</div>
 141         <div id="logical_1">1</div>
 142     </div>
 143 </div>
 144
 145 <script>
 146 test(function(t)
 147 {
 148     var axLogicalParent = accessibilityController.accessibleElementById("logical_parent");
 149
 150     assert_equals(axLogicalParent.childrenCount, 4);
 151     assert_equals(axLogicalParent.childAtIndex(0).childAtIndex(0).name, "1");
 152     assert_equals(axLogicalParent.childAtIndex(1).childAtIndex(0).name, "2");
 153     assert_equals(axLogicalParent.childAtIndex(2).childAtIndex(0).name, "3");
 154     assert_equals(axLogicalParent.childAtIndex(3).childAtIndex(0).name, "4");
 155 }, "A parent can use aria-owns to reorder its children into a more logical AX ordering.");
 156 </script>
 157
 158 <script>
 159 if (window.testRunner)
 160     document.body.className = "hideAllContainers";
 161 </script>