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

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

<script>
    let output = "This tests that aria-expanded changes will send notifications.\n";

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

            output += `Received notification: ${notification}\n`;
            output += `Expanded status: ${element.isExpanded}\n`;
        }
    }

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

        accessibilityController.addNotificationListener(notificationCallback);
        let button = accessibilityController.accessibleElementById("button");
        output += `Initial expanded status: ${button.isExpanded}\n`;

        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;
            });

            await waitFor(() => {
                return notificationCount == 2;
            });

            debug(output);
            accessibilityController.removeNotificationListener();
            finishJSTest();
        }, 0);
    }
</script>
</body>
</html>