aria-owns-sends-notification.html | Explore in Territory

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

<div id="container1">
    <ul id="future_parent" aria-owns="future_child"></ul>
</div>

<script>
async_test(function(t) {
    var axFutureParent = accessibilityController.accessibleElementById("future_parent");
    var testRunner = function*() {
      assert_equals(axFutureParent.childrenCount, 0);

      var expected_notifications = new Set();
      expected_notifications.add("MarkDirty");

      while (expected_notifications.size) {
        var notification = yield;
        expected_notifications.delete(notification);
      }

      assert_equals(axFutureParent.childrenCount, 1);
    }();
    testRunner.next();
    var listener = function(notification) {
      if (testRunner.next(notification).done) {
        axFutureParent.removeNotificationListener(listener);
        t.done();
      }
    };
    axFutureParent.addNotificationListener(listener);
    var futureParent = document.getElementById("future_parent");
    var child = document.createElement("li");
    child.id = "future_child";
    futureParent.parentElement.appendChild(child);
}, "A mark dirty notification is fired when an aria-owned child gets added to the tree.");
</script>

<div id="container2">
    <ul id="list1">
    </ul>
    <ul id="list2">
      <li id="item1">Item 1</li>
    </ul>
</div>

<script>
async_test(function(t) {
    window.setTimeout(t.step_func(() => {
        assert_unreached("Did not receive all expected notifications");
    }), 500);
    var axList1 = accessibilityController.accessibleElementById("list1");
    assert_equals(axList1.childrenCount, 0, "No children before setting aria-owns");
    var listener = t.step_func((notification) => {
        assert_equals(notification, "MarkDirty");
        assert_equals(axList1.childrenCount, 1, "One child after setting aria-owns");

        axList1.removeNotificationListener(listener);
        t.done();
    });
    axList1.addNotificationListener(listener);

    var list1 = document.getElementById("list1");
    list1.setAttribute("aria-owns", "item1");
}, "A mark dirty notification is fired when an aria-owned attribute is added to an element that causes it to reparent another element to become its child.");
</script>

<div id="container3">
    <ul id="newlist1" aria-label="newlist1">
    </ul>
    <ul id="newlist2" aria-label="newlist2">
      <li id="newitem1">New Item 1</li>
    </ul>
</div>

<script>
async_test((t) => {
    window.setTimeout(t.step_func(() => {
        assert_unreached("Did not receive all expected notifications");
    }), 500);
    var axList1 = accessibilityController.accessibleElementById("newlist1");
    assert_equals(axList1.childrenCount, 0);
    var axList2 = accessibilityController.accessibleElementById("newlist2");
    assert_equals(axList2.childrenCount, 1);
    var listener = t.step_func((notification) => {
        assert_equals(notification, "MarkDirty");
        assert_equals(axList2.childrenCount, 0);
        assert_equals(axList1.childrenCount, 1);

        t.done();
    });
    axList2.addNotificationListener(listener);

    var list1 = document.getElementById("newlist1");
    list1.setAttribute("aria-owns", "newitem1");
    assert_equals(axList1.childrenCount, 1);
    assert_equals(axList2.childrenCount, 0);
}, "A mark dirty notification is fired on the old parent when one of its children gets reparented to another element due to aria-owns.");
</script>
chromium/third_party/blink/web_tests/accessibility/aria-owns-sends-notification.html
