<!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>

<ul id="tree" role="tree" tabindex="0">
    <li id="treeitem1" role="treeitem"></li>
    <li id="treeitem2" role="treeitem"></li>
    <li id="treeitem3" role="treeitem">
        <button>Button inside treeitem3</button>
    </li>
</ul>

<div id="group" role="group">
    <li id="treeitem4" role="treeitem">
        <button>Button inside treeitem4</button>
    </li>
</div>

<script>
    var testOutput = "This test ensures that tree and treeitem objects report the most up-to-date children and rows after dynamic page changes.\n\n";

    function verifyChildren(id) {
        const axElement = accessibilityController.accessibleElementById(id);
        if (!axElement)
            return;

        const childrenCount = axElement.childrenCount;
        testOutput += `#${id} childrenCount: ${childrenCount}\n`;
        for (let i = 0; i < childrenCount; i++)
            testOutput += `    child: ${axElement.childAtIndex(i).role}\n`;
    }

    function verifyTreeRows() {
        const axElement = accessibilityController.accessibleElementById("tree");
        if (!axElement)
            return;

        const rowCount = axElement.rowCount;
        testOutput += `#tree rowCount: ${rowCount}\n`;
        for (let i = 0; i < rowCount; i++) {
            const row = axElement.rowAtIndex(i);
            testOutput += `    row ${i}: ${row.role}, #${row.domIdentifier}\n`;
        }
    }

    if (window.accessibilityController) {
        window.jsTestIsAsync = true;
        verifyChildren("treeitem1");
        verifyChildren("treeitem2");
        verifyTreeRows();

        let button = document.createElement("button");
        button.innerHTML = "Button inside treeitem1";
        document.getElementById("treeitem1").appendChild(button);

        testOutput += "\nAdding content to #treeitem1 and #treeitem2.\n\n";
        document.getElementById("treeitem2").appendChild(document.getElementById("treeitem3"));
        document.getElementById("treeitem2").appendChild(document.getElementById("group"));
        setTimeout(async function() {
            let firstDisclosedRow, secondDisclosedRow;
            await waitFor(() => {
                const treeitem1 = accessibilityController.accessibleElementById("treeitem1");
                if (!treeitem1 || treeitem1.childrenCount !== 1)
                    return false;
                const treeitem2 = accessibilityController.accessibleElementById("treeitem2");
                firstDisclosedRow = treeitem2.disclosedRowAtIndex(0);
                secondDisclosedRow = treeitem2.disclosedRowAtIndex(1);
                return firstDisclosedRow && secondDisclosedRow;
            });
            verifyChildren("treeitem1");
            // We added a group and treeitem to #treeitem2, neither of which should show up as a child (but should be considered when computing disclosed rows).
            verifyChildren("treeitem2");
            testOutput += `#treeitem2 had disclosed row #${firstDisclosedRow.domIdentifier}\n`;
            testOutput += `#treeitem2 had disclosed row #${secondDisclosedRow.domIdentifier}\n`;
            verifyTreeRows();

            debug(testOutput);
            finishJSTest();
        }, 0);
    }
</script>
</body>
</html>