LayoutTests/accessibility/table-headers-changing.html

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

<table id="table">
    <thead id="table-head">
        <tr id="row-in-head">
            <th id="a" scope="row">A</th>
            <td id="b">B</td>
            <td>C</td>
        </tr>
    </thead>
    <tbody id="table-body">
        <tr id="row-in-body">
            <th>D</th>
            <td>E</td>
            <td>F</td>
        </tr>
        <tr>
            <td id="g">G</td>
            <td>H</td>
            <td>I</td>
        </tr>
    </tbody>
</table>

<script>
if (window.accessibilityController) {
    window.jsTestIsAsync = true;
    var output = "";

    var table = accessibilityController.accessibleElementById("table");
    var cellB = table.cellForColumnAndRow(1, 0);
    var cellE = table.cellForColumnAndRow(1, 1);

    output += `Cell B should have 1 rowHeaders (has ${cellB.rowHeaders().length}) and 0 columnHeaders (has ${cellB.columnHeaders().length})\n`;
    output += `Cell E should have 1 rowHeader (has ${cellE.rowHeaders().length}) and 1 columnHeader (has ${cellE.columnHeaders().length})\n`;

    output += "Move row in <thead> to <tbody>:\n";
    var headRow = document.getElementById("row-in-head");
    var bodyRow = document.getElementById("row-in-body");
    var thead = document.getElementById("table-head");

    bodyRow.before(headRow);
    thead.remove();

    setTimeout(async () => {
        await waitFor(() => table.cellForColumnAndRow(1, 0));
        cellB = table.cellForColumnAndRow(1, 0);
        output += `Cell B should have 1 rowHeader (has ${cellB.rowHeaders().length}) and 0 columnHeaders (has ${cellB.columnHeaders().length})\n`;
        output += `Cell E should have 1 rowHeader (has ${cellE.rowHeaders().length}) and 0 columnHeaders (has ${cellE.columnHeaders().length})\n`;

        output += "Add header above E:\n";

        let th = document.createElement("th");
        th.textContent = "J";
        document.getElementById("a").after(th);

        await waitFor(() => table.cellForColumnAndRow(1, 1).columnHeaders().length);
        cellE = table.cellForColumnAndRow(1, 1);
        output += `Cell E should have 1 rowHeaders (has ${cellE.rowHeaders().length}) and 1 columnHeader (has ${cellE.columnHeaders().length})\n`;

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