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

<div contenteditable="true" id="outer_editable" tabindex="-1">
    abc
    <div contenteditable="false" id="middle_editable">
        <button>xyz</button>
        <div contenteditable="true" id="inner_editable">
            def
        </div>
    </div>
</div>

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

<script>
    description("This tests that the correct AXValueChanged notifications are posted when editing nested text areas with an intermediate non-editable text area.");

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

        let count = 0;
        accessibilityController.addNotificationListener((axElement, notification) => {
            if (notification != "AXValueChanged")
                return;

            debug(`${++count} ${notification} for element ${axElement.domIdentifier} with ${axElement.role}`);
            debug(axElement.stringValue);

            if (count >= 8) {
                accessibilityController.removeNotificationListener();
                finishJSTest();
            }
        });

        const axOuter = accessibilityController.accessibleElementById("outer_editable");
        axOuter.takeFocus();
        setTimeout(async () => {
            await waitFor(() => {
                return accessibilityController.focusedElement.isEqual(axOuter);
            });
            // Log original value of outer_editable.
            debug(`outer_editable original ${axOuter.stringValue}`);

            // Set the insertion point before the second char and insert a new char.
            axOuter.setSelectedTextRange(1, 0);
            await waitFor(() => {
                return axOuter.selectedTextRange == "{1, 0}";
            });
            axOuter.insertText("a");

            // Set the insertion point before the second char of the inner_editable and insert a new char.
            axOuter.setSelectedTextRange(10, 0);
            await waitFor(() => {
                return axOuter.selectedTextRange == "{10, 0}";
            });
            axOuter.insertText("g");
        }, 0);
    }
</script>
<script src="../resources/js-test-post.js"></script>
</body>
</html>