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

<div role="group" tabindex=0 id="liveregion" aria-live="polite" aria-relevant="additions">
<h3 id="innerlive">text</h3>
<div id="addregion">hello</div>
</div>

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

<script>

    description("This tests that adding an element to a live region will trigger the right notification.");

    var liveRegion = 0;
    function ariaCallback(notification) {
        if (notification == "AXLiveRegionChanged") {
           document.getElementById("notifications").innerHTML += "Successfully received " + notification;
           liveRegion.removeNotificationListener();
           finishJSTest();
        }
    }

    if (window.accessibilityController) {
        jsTestIsAsync = true;

        document.getElementById("liveregion").focus();
        liveRegion = window.accessibilityController.focusedElement;

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

        // this should trigger our live region callback for a new element.
        document.getElementById("addregion").innerHTML += "new text element";
    }

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