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

<table id="table" role="grid">
    <thead>
        <tr id="row1"><th>a</th><th>b</th></tr>
    </thead>
    <tbody>
        <tr id="row2"><td>c</td><td>d</td></tr>
    </tbody>
</table>

<script>
    if (window.accessibilityController) {
        window.jsTestIsAsync = true;
        let output = "Tests that changes in table and row roles result in the appropriate AX properties being exposed.\n";

        let axTable = accessibilityController.accessibleElementById("table");
        output += `Originally axTable has ${axTable.columnCount} columns and ${axTable.rowCount} rows\n`;

        // Change the role of the table arbitrarily to "button".
        let table = document.getElementById("table");
        table.setAttribute("role", "button");
        setTimeout(async () => {
            await waitFor(() => {
                axTable = accessibilityController.accessibleElementById("table");
                return axTable && !axTable.columnCount && !axTable.rowCount;
            });
            output += `After setting role to button, axTable has ${axTable.columnCount} columns and ${axTable.rowCount} rows\n`;

            // Set the role of the table to a different table role.
            table.setAttribute("role", "table");
            await waitFor(() => {
                axTable = accessibilityController.accessibleElementById("table");
                return axTable && axTable.columnCount && axTable.rowCount;
            });
            output += `After setting role to table, axTable has ${axTable.columnCount} columns and ${axTable.rowCount} rows\n`;

            // Set the role of the trs in the table arbitrarily to "list".
            document.getElementById("row1").setAttribute("role", "list");
            document.getElementById("row2").setAttribute("role", "list");
            await waitFor(() => {
                axTable = accessibilityController.accessibleElementById("table");
                return axTable && !axTable.columnCount && !axTable.rowCount;
            });
            output += `After setting trs role to list, axTable has ${axTable.columnCount} columns and ${axTable.rowCount} rows\n`;

            // Set the role of the trs to "row".
            document.getElementById("row1").setAttribute("role", "row");
            document.getElementById("row2").setAttribute("role", "row");
            await waitFor(() => {
                axTable = accessibilityController.accessibleElementById("table");
                return axTable && axTable.columnCount && axTable.rowCount;
            });
            output += `After setting trs role to row, axTable has ${axTable.columnCount} columns and ${axTable.rowCount} rows\n`;

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