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

<div tabindex=0 id="listbox" role="listbox">
<div id="option1" role="option" aria-selected="true">Option</div>
<div id="option2" role="option">Option</div>
<div id="option3" role="option">Option</div>
</div>

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

<script>

    description("This tests that when aria-selected is changed in a listbox, the correct notification is sent.");

    var listbox = 0;
    var notificationCount = 0;
    function ariaCallback(element, notification) {
        if (notification == "AXSelectedChildrenChanged") {
            notificationCount++;

            // We should get a total of 4 live region changes.
            if (notificationCount == 2) {
               window.accessibilityController.removeNotificationListener();
               finishJSTest();
            }
        }
    }

    if (window.accessibilityController) {
        jsTestIsAsync = true;

        listbox = accessibilityController.accessibleElementById("listbox");

        var addedNotification = window.accessibilityController.addNotificationListener(ariaCallback);
        shouldBe("addedNotification", "true");

        // These should each trigger a notification that the selected children changed.
        document.getElementById("option2").setAttribute("aria-selected", "true");
        setTimeout(function() {
            document.getElementById("option2").setAttribute("aria-selected", "false");
        }, 1);
    }

</script>
</body>
</html>