<!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>

<button id="button" aria-expanded="false">

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

<script>
    description("This tests that aria-expanded changes will send notifications.");

    var notificationCount = 0;
    function notificationCallback(element, notification) {
        if (notification == "AXExpandedChanged") {
           notificationCount++;

           debug("Received notification: " + notification);
           debug("Expanded status: " + element.isExpanded);
           if (notificationCount == 2) {
               accessibilityController.removeNotificationListener();
               finishJSTest();
           }
        }
    }

    if (window.accessibilityController) {
        window.jsTestIsAsync = true;

        accessibilityController.addNotificationListener(notificationCallback);
        var button = accessibilityController.accessibleElementById("button");
        debug("Initial expanded status: " + button.isExpanded);

        document.getElementById("button").setAttribute("aria-expanded", "true");
        setTimeout(async () => {
            await waitFor(() => {
                return button.isExpanded;
            });

            document.getElementById("button").setAttribute("aria-expanded", "false");
            await waitFor(() => {
                return !button.isExpanded;
            });
        }, 0);
    }
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>