<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../resources/js-test-pre.js"></script>
<script src="../resources/accessibility-helper.js"></script>
</head>
<body id="body">

<!-- Example 1: controls a list -->
<input type="text" role="combobox" id="combobox1" aria-controls="list1" aria-label="Combobox1">
<div role="list" id="list1" aria-label="List1">
<div role="listitem" id="item1_1">item1</div>
<div role="listitem" id="item1_2">item2</div>
</div>

<!-- Example 2: owns a listbox -->
<input type="text" role="combobox" id="combobox2" aria-owns="listbox2" aria-label="Combobox2">
<div role="listbox" id="listbox2" aria-label="Listbox2">
<div role="option" id="option2_1">item1</div>
<div role="option" id="option2_2">item2</div>
</div>

<!-- Example 3: owns a grid -->
<input type="text" role="combobox" id="combobox3" aria-owns="grid3" aria-label="Combobox3">
<div role="grid" id="grid3" aria-label="Grid3">
<div role="row" id="row3_1">
<div role="gridcell" id="gridcell3_1">cell1</div>
</div>
</div>

<!-- Example 3: owns a tree -->
<input type="text" role="combobox" id="combobox4" aria-owns="tree4" aria-label="Combobox4">
<div role="tree" id="tree4" aria-label="Tree4">
<div role="treeitem" id="treeitem4_1">treeitem1</div>
<div role="treeitem" id="treeitem4_2">treeitem2</div>
</div>

<p id="description"></p>
<div id="console"></div>

<script>

    description("This tests variations of the comboboxes and elements it can control and own. Then verifies the active-descendant is reflected correctly.");

    if (window.accessibilityController) {
        window.jsTestIsAsync = true;
        var selectedChildrenChangeCount = 0;

        window.accessibilityController.addNotificationListener(function (target, notification) {
            if (notification == "AXSelectedChildrenChanged" || notification == "AXSelectedRowsChanged") {
                selectedChildrenChangeCount++;
                var targetString = platformValueForW3CName(target);
                debug("Received " + notification + " for " + targetString);
                if (selectedChildrenChangeCount == 4) {
                    accessibilityController.removeNotificationListener();
                    finishJSTest(); 
                }
            }
        });

        // Example 1: aria-controls a list.
        document.getElementById("combobox1").focus();
        var list = accessibilityController.accessibleElementById("list1");
        shouldBe("list.selectedChildrenCount", "0");
        // Set active-descendant, verify notification is sent and that list has correct selected children.
        document.getElementById("combobox1").setAttribute("aria-activedescendant", "item1_1");
        var listitem1 = accessibilityController.accessibleElementById("item1_1");
        shouldBe("list.selectedChildrenCount", "1");
        shouldBeTrue("list.selectedChildAtIndex(0).isEqual(listitem1)");

        // Example 2: aria-owns a listbox.
        document.getElementById("combobox2").focus();
        var listbox = accessibilityController.accessibleElementById("listbox2");
        shouldBe("listbox.selectedChildrenCount", "0");
        // Set active-descendant, verify notification is sent and that list has correct selected children.
        document.getElementById("combobox2").setAttribute("aria-activedescendant", "option2_1");
        var option2_1 = accessibilityController.accessibleElementById("option2_1");
        shouldBe("listbox.selectedChildrenCount", "1");
        shouldBeTrue("listbox.selectedChildAtIndex(0).isEqual(option2_1)");

        // Example 3: aria-owns a grid.
        document.getElementById("combobox3").focus();
        var grid = accessibilityController.accessibleElementById("grid3");
        shouldBe("grid.selectedChildrenCount", "0");
        // Set active-descendant, verify notification is sent and that list has correct selected children.
        document.getElementById("combobox3").setAttribute("aria-activedescendant", "row3_1");
        var row3_1 = accessibilityController.accessibleElementById("row3_1");
        shouldBe("grid.selectedChildrenCount", "1");
        shouldBeTrue("grid.selectedChildAtIndex(0).isEqual(row3_1)");

        // Example 4: aria-owns a tree.
        document.getElementById("combobox4").focus();
        var tree = accessibilityController.accessibleElementById("tree4");
        shouldBe("tree.selectedChildrenCount", "0");
        // Set active-descendant, verify notification is sent and that list has correct selected children.
        document.getElementById("combobox4").setAttribute("aria-activedescendant", "treeitem4_1");
        var treeitem4_1 = accessibilityController.accessibleElementById("treeitem4_1");
        shouldBe("tree.selectedChildrenCount", "1");
        shouldBeTrue("tree.selectedChildAtIndex(0).isEqual(treeitem4_1)");
    }

</script>

<script src="../resources/js-test-post.js"></script>
</body>
</html>