third_party/WebKit/LayoutTests/accessibility/table-headers.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <script src="../resources/js-test.js"></script>
   5 </head>
   6 <body id="body">
   7
   8 <table id="table1" border="1">
   9   <thead>
  10   <tr>
  11     <th>No</th>
  12     <th>Month</th>
  13     <th>Expenses</th>
  14   </tr>
  15   </thead>
  16   <tbody>
  17   <tr>
  18     <th>1</th>
  19     <td>Jan</td>
  20     <td>100</td>
  21   </tr>
  22   <tr>
  23     <th>2</th>
  24     <td>Feb</td>
  25     <td>150</td>
  26   </tr>
  27    <tr>
  28     <th>3</th>
  29     <td>Mar</td>
  30     <td>200</td>
  31   </tr>
  32   </tbody>
  33 </table>
  34
  35 <table id="table2" border="1">
  36   <caption>
  37     scope test
  38   </caption>
  39   <tr>
  40     <th scope="col">col head</th>
  41     <th scope="row">row head</th>
  42     <th>col head</th>
  43   </tr>
  44   <tr>
  45     <th scope="col">col head</th>
  46     <td scope="row">data</td>
  47     <th>row head</th>
  48   </tr>
  49   <tr>
  50     <th>row head</th>
  51     <td>data</td>
  52     <th scope="col">col head</th>
  53   </tr>
  54 </table>
  55
  56 <table id="table3" border="1">
  57   <caption>
  58     row header and column header (1)
  59   </caption>
  60   <tr>
  61     <td>data</td>
  62     <th>row head</th>
  63     <th>column head</th>
  64   </tr>
  65   <tr>
  66     <th>column head</th>
  67     <th>column head</th>
  68     <td>data</td>
  69   </tr>
  70   <tr>
  71     <th>row head</th>
  72     <td>data</td>
  73     <th>row head</th>
  74   </tr>
  75 </table>
  76
  77 <table id="table4" border="1">
  78   <caption>
  79     row header and column header (2)
  80   </caption>
  81   <tr>
  82     <th>row head</th>
  83     <td>data</td>
  84     <td>data</td>
  85   </tr>
  86   <tr>
  87     <th>column head</th>
  88     <th>column head</th>
  89     <th>column head</th>
  90   </tr>
  91   <tr>
  92     <td>data</td>
  93     <td>data</td>
  94     <td>data</td>
  95   </tr>
  96 </table>
  97
  98 <table id="table5" border="1">
  99   <caption>
 100     scope and rowspan
 101   </caption>
 102   <tr>
 103     <th rowspan="2" scope="rowgroup">row head</th>
 104     <th scope="col">col head</th>
 105   </tr>
 106   <tr>
 107     <th scope="row">row head</th>
 108   </tr>
 109 </table>
 110
 111 <table id="table6" border="1">
 112   <caption>
 113     scope and colspan
 114   </caption>
 115   <tr>
 116     <th scope="col">col head</th>
 117     <th scope="col">col head</th>
 118     <th scope="col">col head</th>
 119   </tr>
 120   <tr>
 121     <td>data</td>
 122     <td>data</td>
 123     <td>data</td>
 124   </tr>
 125   <tr>
 126     <th colspan="2" scope="colgroup">col head</th>
 127     <th>col head</th>
 128   </tr>
 129   <tr>
 130     <td>data</td>
 131     <td>data</td>
 132     <th>row head</td>
 133   </tr>
 134 </table>
 135 <div id="table7" role="grid">
 136   <div role="row">
 137     <div role="columnheader">col head</div>
 138     <div role="columnheader">col head</div>
 139     <div role="columnheader">col head</div>
 140   </div>
 141   <div role="row">
 142     <div role="rowheader">row head</div>
 143     <div role="gridcell">data</div>
 144     <div role="rowheader">row head</div>
 145   </div>
 146   <div role="row">
 147     <div role="rowheader">row head</div>
 148     <div role="rowheader">row head</div>
 149     <div role="columnheader">col head</div>
 150   </div>
 151 </div>
 152 <p id="description"></p>
 153 <div id="console"></div>
 154
 155 <script>
 156
 157     description("Check whether column and row headers are reported correctly");
 158
 159     if (window.accessibilityController) {
 160         var table = accessibilityController.accessibleElementById("table1");
 161         // Row headers
 162         shouldBeTrue("table.rowHeaderAtIndex(0).isEqual(table.cellForColumnAndRow(0, 1))");
 163         shouldBeTrue("table.rowHeaderAtIndex(1).isEqual(table.cellForColumnAndRow(0, 2))");
 164         shouldBeTrue("table.rowHeaderAtIndex(2).isEqual(table.cellForColumnAndRow(0, 3))");
 165         shouldBe("table.rowHeadersCount", "3");
 166         // Column headers
 167         shouldBeTrue("table.columnHeaderAtIndex(0).isEqual(table.cellForColumnAndRow(0, 0))");
 168         shouldBeTrue("table.columnHeaderAtIndex(1).isEqual(table.cellForColumnAndRow(1, 0))");
 169         shouldBeTrue("table.columnHeaderAtIndex(2).isEqual(table.cellForColumnAndRow(2, 0))");
 170         shouldBe("table.columnHeadersCount", "3");
 171
 172         var table2 = accessibilityController.accessibleElementById("table2");
 173         // Row headers
 174         shouldBeTrue("table2.rowHeaderAtIndex(0).isEqual(table2.cellForColumnAndRow(1, 0))");
 175         shouldBeTrue("table2.rowHeaderAtIndex(1).isEqual(table2.cellForColumnAndRow(2, 1))");
 176         shouldBeTrue("table2.rowHeaderAtIndex(2).isEqual(table2.cellForColumnAndRow(0, 2))");
 177         shouldBe("table2.rowHeadersCount", "3");
 178         // Column headers
 179         shouldBeTrue("table2.columnHeaderAtIndex(0).isEqual(table2.cellForColumnAndRow(0, 0))");
 180         shouldBeTrue("table2.columnHeaderAtIndex(1).isEqual(table2.cellForColumnAndRow(0, 1))");
 181         shouldBeTrue("table2.columnHeaderAtIndex(2).isEqual(table2.cellForColumnAndRow(2, 0))");
 182         shouldBeTrue("table2.columnHeaderAtIndex(3).isEqual(table2.cellForColumnAndRow(2, 2))");
 183         shouldBe("table2.columnHeadersCount", "4");
 184
 185         var table3 = accessibilityController.accessibleElementById("table3");
 186         // Row headers
 187         shouldBeTrue("table3.rowHeaderAtIndex(0).isEqual(table3.cellForColumnAndRow(1, 0))");
 188         shouldBeTrue("table3.rowHeaderAtIndex(1).isEqual(table3.cellForColumnAndRow(0, 2))");
 189         shouldBeTrue("table3.rowHeaderAtIndex(2).isEqual(table3.cellForColumnAndRow(2, 2))");
 190         shouldBe("table3.rowHeadersCount", "3");
 191         // Column headers
 192         shouldBeTrue("table3.columnHeaderAtIndex(0).isEqual(table3.cellForColumnAndRow(0, 1))");
 193         shouldBeTrue("table3.columnHeaderAtIndex(1).isEqual(table3.cellForColumnAndRow(1, 1))");
 194         shouldBeTrue("table3.columnHeaderAtIndex(2).isEqual(table3.cellForColumnAndRow(2, 0))");
 195         shouldBe("table3.columnHeadersCount", "3");
 196
 197         var table4 = accessibilityController.accessibleElementById("table4");
 198         // Row headers
 199         shouldBeTrue("table4.rowHeaderAtIndex(0).isEqual(table4.cellForColumnAndRow(0, 0))");
 200         shouldBe("table4.rowHeadersCount", "1");
 201         // Column headers
 202         shouldBeTrue("table4.columnHeaderAtIndex(0).isEqual(table4.cellForColumnAndRow(0, 1))");
 203         shouldBeTrue("table4.columnHeaderAtIndex(1).isEqual(table4.cellForColumnAndRow(1, 1))");
 204         shouldBeTrue("table4.columnHeaderAtIndex(2).isEqual(table4.cellForColumnAndRow(2, 1))");
 205         shouldBe("table4.columnHeadersCount", "3");
 206
 207         var table5 = accessibilityController.accessibleElementById("table5");
 208         // Row headers
 209         shouldBeTrue("table5.rowHeaderAtIndex(0).isEqual(table5.cellForColumnAndRow(0, 0))"); // rowspan=2
 210         shouldBeTrue("table5.rowHeaderAtIndex(0).isEqual(table5.cellForColumnAndRow(0, 1))"); // rowspan=2
 211         shouldBeTrue("table5.rowHeaderAtIndex(1).isEqual(table5.cellForColumnAndRow(1, 1))");
 212         shouldBe("table5.rowHeadersCount", "2");
 213         // Column headers
 214         shouldBeTrue("table5.columnHeaderAtIndex(0).isEqual(table5.cellForColumnAndRow(1, 0))");
 215         shouldBe("table5.columnHeadersCount", "1");
 216
 217         var table6 = accessibilityController.accessibleElementById("table6");
 218         // Row headers
 219         shouldBeTrue("table6.rowHeaderAtIndex(0).isEqual(table6.cellForColumnAndRow(2, 3))");
 220         shouldBe("table6.rowHeadersCount", "1");
 221         // Column headers
 222         shouldBeTrue("table6.columnHeaderAtIndex(0).isEqual(table6.cellForColumnAndRow(0, 0))");
 223         shouldBeTrue("table6.columnHeaderAtIndex(1).isEqual(table6.cellForColumnAndRow(0, 2))"); // colspan=2
 224         shouldBeTrue("table6.columnHeaderAtIndex(1).isEqual(table6.cellForColumnAndRow(1, 2))"); // colspan=2
 225         shouldBeTrue("table6.columnHeaderAtIndex(2).isEqual(table6.cellForColumnAndRow(1, 0))");
 226         shouldBeTrue("table6.columnHeaderAtIndex(3).isEqual(table6.cellForColumnAndRow(2, 0))");
 227         shouldBeTrue("table6.columnHeaderAtIndex(4).isEqual(table6.cellForColumnAndRow(2, 2))");
 228         shouldBe("table6.columnHeadersCount", "5");
 229
 230         //Aria tables
 231         var table7 = accessibilityController.accessibleElementById("table7");
 232         // Row headers
 233         shouldBeTrue("table7.rowHeaderAtIndex(0).isEqual(table7.cellForColumnAndRow(0, 1))");
 234         shouldBeTrue("table7.rowHeaderAtIndex(1).isEqual(table7.cellForColumnAndRow(2, 1))");
 235         shouldBeTrue("table7.rowHeaderAtIndex(2).isEqual(table7.cellForColumnAndRow(0, 2))");
 236         shouldBeTrue("table7.rowHeaderAtIndex(3).isEqual(table7.cellForColumnAndRow(1, 2))");
 237         shouldBe("table7.rowHeadersCount", "4");
 238         // Column headers
 239         shouldBeTrue("table7.columnHeaderAtIndex(0).isEqual(table7.cellForColumnAndRow(0, 0))");
 240         shouldBeTrue("table7.columnHeaderAtIndex(1).isEqual(table7.cellForColumnAndRow(1, 0))");
 241         shouldBeTrue("table7.columnHeaderAtIndex(2).isEqual(table7.cellForColumnAndRow(2, 0))");
 242         shouldBeTrue("table7.columnHeaderAtIndex(3).isEqual(table7.cellForColumnAndRow(2, 2))");
 243         shouldBe("table7.columnHeadersCount", "4");
 244     }
 245
 246 </script>
 247
 248 </body>
 249 </html>