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

   1 <!DOCTYPE HTML>
   2 <script src="../resources/testharness.js"></script>
   3 <script src="../resources/testharnessreport.js"></script>
   4
   5 <div id="container1">
   6     <ul id="future_parent" aria-owns="future_child"></ul>
   7 </div>
   8
   9 <script>
  10 async_test(function(t) {
  11     var axFutureParent = accessibilityController.accessibleElementById("future_parent");
  12     assert_equals(axFutureParent.childrenCount, 0);
  13     var listener = function(notification) {
  14       assert_equals(notification, "ChildrenChanged");
  15       assert_equals(axFutureParent.childrenCount, 1);
  16
  17       document.getElementById("container1").style.display = "none";
  18       axFutureParent.removeNotificationListener(listener);
  19       t.done();
  20     };
  21     axFutureParent.addNotificationListener(listener);
  22     var futureParent = document.getElementById("future_parent");
  23     var child = document.createElement("li");
  24     child.id = "future_child";
  25     futureParent.parentElement.appendChild(child);
  26 }, "A children changed notification is fired when an aria-owned child gets added to the tree.");
  27 </script>
  28
  29 <div id="container2">
  30     <ul id="list1">
  31     </ul>
  32     <ul id="list2">
  33       <li id="item1">Item 1</li>
  34     </ul>
  35 </div>
  36
  37 <script>
  38 async_test(function(t) {
  39     var axList1 = accessibilityController.accessibleElementById("list1");
  40     assert_equals(axList1.childrenCount, 0);
  41     var listener = function(notification) {
  42       assert_equals(notification, "ChildrenChanged");
  43       assert_equals(axList1.childrenCount, 1);
  44
  45       axList1.removeNotificationListener(listener);
  46       document.getElementById("container2").style.display = "none";
  47       t.done();
  48     };
  49     axList1.addNotificationListener(listener);
  50
  51     var list1 = document.getElementById("list1");
  52     list1.setAttribute("aria-owns", "item1");
  53 }, "A children changed notification is fired when an aria-owned attribute is added to an element that causes it to reparent another element to become its child.");
  54 </script>
  55
  56 <div id="container3">
  57     <ul id="newlist1" aria-label="newlist1">
  58     </ul>
  59     <ul id="newlist2" aria-label="newlist2">
  60       <li id="newitem1">New Item 1</li>
  61     </ul>
  62 </div>
  63
  64 <script>
  65 async_test(function(t) {
  66     var axList1 = accessibilityController.accessibleElementById("newlist1");
  67     assert_equals(axList1.childrenCount, 0);
  68     var axList2 = accessibilityController.accessibleElementById("newlist2");
  69     assert_equals(axList2.childrenCount, 1);
  70     var listener = function(notification) {
  71       assert_equals(notification, "ChildrenChanged");
  72       assert_equals(axList2.childrenCount, 0);
  73
  74       axList2.removeNotificationListener(listener);
  75       document.getElementById("container3").style.display = "none";
  76       t.done();
  77     };
  78     axList2.addNotificationListener(listener);
  79
  80     var list1 = document.getElementById("newlist1");
  81     list1.setAttribute("aria-owns", "newitem1");
  82     assert_equals(axList1.childrenCount, 1);
  83     assert_equals(axList2.childrenCount, 0);
  84 }, "A children changed notification is fired on the old parent when one of its children gets reparented to another element due to aria-owns.");
  85 </script>