| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../resources/js-test.js"></script> |
| </head> |
| <body id="body"> |
| |
| <table id="table1" border="1"> |
| <thead> |
| <tr> |
| <th>No</th> |
| <th>Month</th> |
| <th>Expenses</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <th>1</th> |
| <td>Jan</td> |
| <td>100</td> |
| </tr> |
| <tr> |
| <th>2</th> |
| <td>Feb</td> |
| <td>150</td> |
| </tr> |
| <tr> |
| <th>3</th> |
| <td>Mar</td> |
| <td>200</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <table id="table2" border="1"> |
| <caption> |
| scope test |
| </caption> |
| <tr> |
| <th scope="col">col head</th> |
| <th scope="row">row head</th> |
| <th>col head</th> |
| </tr> |
| <tr> |
| <th scope="col">col head</th> |
| <td scope="row">data</td> |
| <th>row head</th> |
| </tr> |
| <tr> |
| <th>row head</th> |
| <td>data</td> |
| <th scope="col">col head</th> |
| </tr> |
| </table> |
| |
| <table id="table3" border="1"> |
| <caption> |
| row header and column header (1) |
| </caption> |
| <tr> |
| <td>data</td> |
| <th>row head</th> |
| <th>row head</th> |
| </tr> |
| <tr> |
| <th>row head</th> |
| <th>row head</th> |
| <td>data</td> |
| </tr> |
| <tr> |
| <th>row head</th> |
| <td>data</td> |
| <th>row head</th> |
| </tr> |
| </table> |
| |
| <table id="table4" border="1"> |
| <caption> |
| row header and column header (2) |
| </caption> |
| <tr> |
| <th>row head</th> |
| <td>data</td> |
| <td>data</td> |
| </tr> |
| <tr> |
| <th>column head</th> |
| <th>column head</th> |
| <th>column head</th> |
| </tr> |
| <tr> |
| <td>data</td> |
| <td>data</td> |
| <td>data</td> |
| </tr> |
| </table> |
| |
| <table id="table5" border="1"> |
| <caption> |
| scope and rowspan |
| </caption> |
| <tr> |
| <th rowspan="2" scope="rowgroup">row head</th> |
| <th scope="col">col head</th> |
| </tr> |
| <tr> |
| <th scope="row">row head</th> |
| </tr> |
| </table> |
| |
| <table id="table6" border="1"> |
| <caption> |
| scope and colspan |
| </caption> |
| <tr> |
| <th scope="col">col head</th> |
| <th scope="col">col head</th> |
| <th scope="col">col head</th> |
| </tr> |
| <tr> |
| <td>data</td> |
| <td>data</td> |
| <td>data</td> |
| </tr> |
| <tr> |
| <th colspan="2" scope="colgroup">col head</th> |
| <th>col head</th> |
| </tr> |
| <tr> |
| <td>data</td> |
| <td>data</td> |
| <th>row head</td> |
| </tr> |
| </table> |
| <div id="table7" role="grid"> |
| <div role="row"> |
| <div role="columnheader">col head</div> |
| <div role="columnheader">col head</div> |
| <div role="columnheader">col head</div> |
| </div> |
| <div role="row"> |
| <div role="rowheader">row head</div> |
| <div role="gridcell">data</div> |
| <div role="rowheader">row head</div> |
| </div> |
| <div role="row"> |
| <div role="rowheader">row head</div> |
| <div role="rowheader">row head</div> |
| <div role="columnheader">col head</div> |
| </div> |
| </div> |
| <p id="description"></p> |
| <div id="console"></div> |
| |
| <script> |
| |
| description("Check whether column and row headers are reported correctly"); |
| |
| if (window.accessibilityController) { |
| var table = accessibilityController.accessibleElementById("table1"); |
| // Row headers |
| shouldBeTrue("table.rowHeaderAtIndex(0).isEqual(table.cellForColumnAndRow(0, 1))"); |
| shouldBeTrue("table.rowHeaderAtIndex(1).isEqual(table.cellForColumnAndRow(0, 2))"); |
| shouldBeTrue("table.rowHeaderAtIndex(2).isEqual(table.cellForColumnAndRow(0, 3))"); |
| shouldBe("table.rowHeadersCount", "3"); |
| // Column headers |
| shouldBeTrue("table.columnHeaderAtIndex(0).isEqual(table.cellForColumnAndRow(0, 0))"); |
| shouldBeTrue("table.columnHeaderAtIndex(1).isEqual(table.cellForColumnAndRow(1, 0))"); |
| shouldBeTrue("table.columnHeaderAtIndex(2).isEqual(table.cellForColumnAndRow(2, 0))"); |
| shouldBe("table.columnHeadersCount", "3"); |
| |
| var table2 = accessibilityController.accessibleElementById("table2"); |
| // Row headers |
| shouldBeTrue("table2.rowHeaderAtIndex(0).isEqual(table2.cellForColumnAndRow(1, 0))"); |
| shouldBeTrue("table2.rowHeaderAtIndex(1).isEqual(table2.cellForColumnAndRow(2, 1))"); |
| shouldBeTrue("table2.rowHeaderAtIndex(2).isEqual(table2.cellForColumnAndRow(0, 2))"); |
| shouldBe("table2.rowHeadersCount", "3"); |
| // Column headers |
| shouldBeTrue("table2.columnHeaderAtIndex(0).isEqual(table2.cellForColumnAndRow(0, 0))"); |
| shouldBeTrue("table2.columnHeaderAtIndex(1).isEqual(table2.cellForColumnAndRow(2, 0))"); |
| shouldBeTrue("table2.columnHeaderAtIndex(2).isEqual(table2.cellForColumnAndRow(0, 1))"); |
| shouldBeTrue("table2.columnHeaderAtIndex(3).isEqual(table2.cellForColumnAndRow(2, 2))"); |
| shouldBe("table2.columnHeadersCount", "4"); |
| |
| var table3 = accessibilityController.accessibleElementById("table3"); |
| // Row headers |
| shouldBe("table3.rowHeadersCount", "6"); |
| // Column headers |
| shouldBe("table3.columnHeadersCount", "0"); |
| |
| var table4 = accessibilityController.accessibleElementById("table4"); |
| // Row headers |
| shouldBeTrue("table4.rowHeaderAtIndex(0).isEqual(table4.cellForColumnAndRow(0, 0))"); |
| shouldBe("table4.rowHeadersCount", "1"); |
| // Column headers |
| shouldBeTrue("table4.columnHeaderAtIndex(0).isEqual(table4.cellForColumnAndRow(0, 1))"); |
| shouldBeTrue("table4.columnHeaderAtIndex(1).isEqual(table4.cellForColumnAndRow(1, 1))"); |
| shouldBeTrue("table4.columnHeaderAtIndex(2).isEqual(table4.cellForColumnAndRow(2, 1))"); |
| shouldBe("table4.columnHeadersCount", "3"); |
| |
| var table5 = accessibilityController.accessibleElementById("table5"); |
| // Row headers |
| shouldBeTrue("table5.rowHeaderAtIndex(0).isEqual(table5.cellForColumnAndRow(0, 0))"); // rowspan=2 |
| shouldBeTrue("table5.rowHeaderAtIndex(0).isEqual(table5.cellForColumnAndRow(0, 1))"); // rowspan=2 |
| shouldBeTrue("table5.rowHeaderAtIndex(1).isEqual(table5.cellForColumnAndRow(1, 1))"); |
| shouldBe("table5.rowHeadersCount", "2"); |
| // Column headers |
| shouldBeTrue("table5.columnHeaderAtIndex(0).isEqual(table5.cellForColumnAndRow(1, 0))"); |
| shouldBe("table5.columnHeadersCount", "1"); |
| |
| var table6 = accessibilityController.accessibleElementById("table6"); |
| // Row headers |
| shouldBeTrue("table6.rowHeaderAtIndex(0).isEqual(table6.cellForColumnAndRow(2, 3))"); |
| shouldBe("table6.rowHeadersCount", "1"); |
| // Column headers |
| shouldBeTrue("table6.columnHeaderAtIndex(0).isEqual(table6.cellForColumnAndRow(0, 0))"); |
| shouldBeTrue("table6.columnHeaderAtIndex(1).isEqual(table6.cellForColumnAndRow(1, 0))"); |
| shouldBeTrue("table6.columnHeaderAtIndex(2).isEqual(table6.cellForColumnAndRow(2, 0))"); |
| shouldBeTrue("table6.columnHeaderAtIndex(3).isEqual(table6.cellForColumnAndRow(0, 2))"); // colspan=2 |
| shouldBeTrue("table6.columnHeaderAtIndex(3).isEqual(table6.cellForColumnAndRow(1, 2))"); // colspan=2 |
| shouldBeTrue("table6.columnHeaderAtIndex(4).isEqual(table6.cellForColumnAndRow(2, 2))"); |
| shouldBe("table6.columnHeadersCount", "5"); |
| |
| //Aria tables |
| var table7 = accessibilityController.accessibleElementById("table7"); |
| // Row headers |
| shouldBeTrue("table7.rowHeaderAtIndex(0).isEqual(table7.cellForColumnAndRow(0, 1))"); |
| shouldBeTrue("table7.rowHeaderAtIndex(1).isEqual(table7.cellForColumnAndRow(2, 1))"); |
| shouldBeTrue("table7.rowHeaderAtIndex(2).isEqual(table7.cellForColumnAndRow(0, 2))"); |
| shouldBeTrue("table7.rowHeaderAtIndex(3).isEqual(table7.cellForColumnAndRow(1, 2))"); |
| shouldBe("table7.rowHeadersCount", "4"); |
| // Column headers |
| shouldBeTrue("table7.columnHeaderAtIndex(0).isEqual(table7.cellForColumnAndRow(0, 0))"); |
| shouldBeTrue("table7.columnHeaderAtIndex(1).isEqual(table7.cellForColumnAndRow(1, 0))"); |
| shouldBeTrue("table7.columnHeaderAtIndex(2).isEqual(table7.cellForColumnAndRow(2, 0))"); |
| shouldBeTrue("table7.columnHeaderAtIndex(3).isEqual(table7.cellForColumnAndRow(2, 2))"); |
| shouldBe("table7.columnHeadersCount", "4"); |
| } |
| |
| </script> |
| |
| </body> |
| </html> |