<html>
<head>
<script src="../resources/js-test.js"></script>
<script src="../resources/accessibility-helper.js"></script>
</head>
<body>

<select id="select" value="Select"></select>

<div id="slider" tabindex="0" role="slider" aria-valuenow="5">Slider</div>

<script>
    description("This tests that a notification listener on an element only listens to that one element, and that a global notification listener listens to all notifications.");

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

        setTimeout(async () => {
            window.selectNotificationCount = 0;
            window.sliderNotificationCount = 0;
            window.globalNotificationCount = 0;

            let select = await waitForElementById("select");
            select.addNotificationListener((notification) => {
                selectNotificationCount++;
                debug(`SELECT ${notification}`);
            });

            let slider = accessibilityController.accessibleElementById("slider");
            slider.addNotificationListener((notification) => {
                sliderNotificationCount++;
                debug(`SLIDER ${notification}`);
            });

            accessibilityController.addNotificationListener((element, notification) => {
                if (element.isEqual(slider) || element.isEqual(select)) {
                    globalNotificationCount++;
                    debug(`GLOBAL ${notification} on element with role ${element.role}`);
                }
            });

            // This should trigger a "invalid status changed" notification on the select.
            document.getElementById("select").setAttribute("aria-invalid", "true");
            await expectAsyncExpression("selectNotificationCount", 1);

            // This should trigger a "value changed" notification on the slider.
            document.getElementById("slider").setAttribute("aria-valuenow", "6");
            await expectAsyncExpression("sliderNotificationCount", 1);

            await expectAsyncExpression("globalNotificationCount", 2);

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