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

<div id="content" contenteditable tabindex="0">
hello<br>
<b>world</b>
</div>

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

<script>

    description("This tests that a contenteditable region will send an AXValueChange notification when JS methods for changing children are used.");

    var notification = 0;
    var textArea = 0;
    var valueChangeCount = 0;
    function callback(notification) {
        if (notification == "AXValueChanged") {
            debug("Updated value: " + textArea.stringValue);
            valueChangeCount++;

            if (valueChangeCount == 1) {
                document.getElementById("content").innerHTML = "Test2";
            }
            else if (valueChangeCount == 2) {
                document.getElementById("content").innerText = "Test3";
            }
            else if (valueChangeCount == 3) {
                document.getElementById("content").appendChild(document.createTextNode("Test4"));
            }
            else if (valueChangeCount == 4) {
                document.getElementById("content").style.visibility = "hidden";
                textArea.removeNotificationListener();
                finishJSTest();
            }
        }
    }

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

        textArea = accessibilityController.accessibleElementById("content");
        textArea.addNotificationListener(callback);

        // Send value changes.
        document.getElementById("content").innerText = "Test1";
    }

</script>

<script src="../resources/js-test-post.js"></script>
</body>
</html>