<!DOCTYPE>
<html>
<script src="../../resources/js-test-pre.js"></script>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Table test</title>
    <style>
    table {border: 1px solid;}
    table th {background-color: #eeeeee;}
    table td {background-color: #dddddd;}
    .table thead {display:block;}
    .table tbody {display:block;}
    .table2 thead {display:block;}
    .table2 tbody {display:block;}
    </style>
</head>
<body id="body">

<table role="grid" class="table" id="table">
    <caption>Table with CSS and ARIA</caption>
    <thead>
        <tr role="row">
            <th role="gridcell">Heading one</th>
            <th role="gridcell">Heading two</th>
        </tr>
    </thead>
    <tbody>
        <tr role="row">
            <td role="gridcell">a</td>
            <td role="gridcell">b</td>
        </tr>
    </tbody>
</table>

<table class="table2" id="table2">
    <caption>Table with CSS and no ARIA</caption>
    <thead>
        <tr>
            <th>Heading one</th>
            <th>Heading two</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
    <tbody>
</table>

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

<script>

    description("This tests that contents in malformed tables are accessible.");

    if (window.accessibilityController) {
        var table1 = accessibilityController.accessibleElementById("table");
        var table2 = accessibilityController.accessibleElementById("table2");
        var tableArray = [table1, table2];
        // check for table role
        shouldBe("table1.role", "'AXRole: AXTable'");
        shouldBe("table2.role", "'AXRole: AXTable'");

        // check for correct column and row count
        var table1ColumnCount = table1.numberAttributeValue("AXColumnCount");
        var table1RowCount = table1.numberAttributeValue("AXRowCount");
        var table2ColumnCount = table2.numberAttributeValue("AXColumnCount");
        var table2RowCount = table2.numberAttributeValue("AXRowCount");
        shouldBe("table1ColumnCount", "2");
        shouldBe("table1RowCount", "2");
        shouldBe("table2ColumnCount", "2");
        shouldBe("table2RowCount", "2");

        // check rows
        for (var tableIndex = 0; tableIndex < 2; tableIndex++) {
            debug("\nCheck rows for Table" + (tableIndex+1));
            var table = tableArray[tableIndex];
            for (var i = 0; i < 2; i++) {
                var rowa = table.rowAtIndex(i);
                var rowb = table.childAtIndex(i);
                shouldBeTrue("rowa.isEqual(rowb)");
                shouldBe("rowa.role", "'AXRole: AXRow'");
            }
        }

        // check cells
        for (var tableIndex = 0; tableIndex < 2; tableIndex++) {
            debug("\nCheck cells for Table" + (tableIndex+1));
            var table = tableArray[tableIndex];
            for (var i = 0; i < 2; i++) {
                for (var j = 0; j < 2; j++) {
                    var cella = table.cellForColumnAndRow(i, j);
                    var cellb = table.childAtIndex(j).childAtIndex(i);
                    shouldBeTrue("cella.isEqual(cellb)");
                    shouldBe("cella.role", "'AXRole: AXCell'");
                }
            }
        }
    }

</script>

<script src="../../resources/js-test-post.js"></script>
</body>
</html>