LayoutTests/accessibility/column-header-scope.html

<!DOCTYPE html>
<html>
<head>
<script src="../resources/js-test.js"></script>
<script src="../resources/accessibility-helper.js"></script>
</head>
<body>
<table id="table1">
    <tbody>
        <tr>
            <th scope="col">Title</th>
            <th scope="col" id="title-cell">Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
        </tr>
        <tr>
            <th scope="row" id="second-row-cell">Data abc</td>
            <td>Data def</td>
            <td>Data ghi</td>
            <td>Data jkl</td>
        </tr>
        <tr>
            <td>Data abc</td>
            <td>Data def</td>
            <td>Data ghi</td>
        </tr>
    </tbody>
</table>
<script>
var testOutput = "This test ensures that the right header is returned when AX clients request the table header.\n\n";

if (window.accessibilityController) {
    window.jsTestIsAsync = true;
    var table = accessibilityController.accessibleElementById("table1");
    var cell1 = table.cellForColumnAndRow(1, 1);
    var cell2 = table.cellForColumnAndRow(2, 0);
    var cell3 = table.cellForColumnAndRow(1, 2);

    testOutput += `The table cell at (0, 1) should have exactly 1 column header, currently it has ${cell1.columnHeaders().length} column header(s).\n`;
    testOutput += `The table cell at (2, 0) should have exactly 0 row headers, currently it has ${cell2.rowHeaders().length} row header(s).\n`;
    testOutput += `The table cell at (1, 2) should have exactly 0 row headers, currently it has ${cell3.rowHeaders().length} row header(s).\n\n`;

    testOutput += "Changing scope of table header at (0, 0) to 'row':\n";
    document.getElementById("title-cell").setAttribute("scope", "row");

    setTimeout(async function() {
        await waitFor(() => cell1.columnHeaders().length == 0);
        testOutput += `The table cell at (0, 1) should have exactly 0 column headers, currently it has ${cell1.columnHeaders().length} column header(s).\n`;

        await waitFor(() => cell2.rowHeaders().length);
        testOutput += `The table cell at (2, 0) should have exactly 1 row header, currently it has ${cell2.rowHeaders().length} row header(s).\n`;
        testOutput += `The table cell at (1, 2) should have exactly 0 row headers, currently it has ${cell3.rowHeaders().length} row header(s).\n\n`;

        testOutput += "Changing scope of cell at (0, 1) to 'rowgroup':\n";
        document.getElementById("second-row-cell").setAttribute("scope", "rowgroup");
        document.getElementById("second-row-cell").setAttribute("rowspan", "2");

        cell3 = table.cellForColumnAndRow(1, 2);
        await waitFor(() => cell3.rowHeaders().length);
        testOutput += `The table cell at (1, 2) should have exactly 1 row header, currently it has ${cell3.rowHeaders().length} row header(s).\n`;

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