test_indexes_table.html (11323B)
1 <!DOCTYPE html> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=410052 5 --> 6 <head> 7 <title>Table indexes chrome tests</title> 8 <link rel="stylesheet" type="text/css" 9 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 10 11 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 12 13 <script type="application/javascript" 14 src="../common.js"></script> 15 <script type="application/javascript" 16 src="../table.js"></script> 17 18 <script type="application/javascript"> 19 function doTest() { 20 // //////////////////////////////////////////////////////////////////////// 21 // table 22 var idxes = [ 23 [0, 1, 2], 24 [3, 4, 5], 25 [6, 7, 7], 26 [6, 8, 9], 27 ]; 28 29 testTableIndexes("table", idxes); 30 31 // //////////////////////////////////////////////////////////////////////// 32 // tableborder 33 idxes = [ 34 [0, 1, 2], 35 [3, 4, 5], 36 [6, 7, 7], 37 [6, 8, 9], 38 ]; 39 40 testTableIndexes("tableborder", idxes); 41 42 // //////////////////////////////////////////////////////////////////////// 43 // table 44 idxes = [ 45 [ 0, 1, 2, 2, 3, 4, 5, 6], 46 [ 7, 8, 9, 10, 11, 12, 13, 6], 47 [14, 15, 15, 16, 17, 18, 19, 6], 48 [20, 15, 15, 21, 22, 18, 23, 6], 49 ]; 50 51 testTableIndexes("table2", idxes); 52 53 // //////////////////////////////////////////////////////////////////////// 54 // tableinsane1 (empty row groups) 55 idxes = [ 56 [0, 1, 2], 57 [3, 4, 5], 58 [6, 7, 7], 59 [6, 8, 9], 60 ]; 61 62 testTableIndexes("tableinsane1", idxes); 63 64 // //////////////////////////////////////////////////////////////////////// 65 // tableinsane2 (empry rows) 66 idxes = [ 67 [-1, -1, -1], 68 [-1, -1, -1], 69 [ 0, 1, 2], 70 ]; 71 72 testTableIndexes("tableinsane2", idxes); 73 74 // //////////////////////////////////////////////////////////////////////// 75 // tableinsane3 (cell holes) 76 idxes = [ 77 [0, 1, -1], 78 [2, 3, 4], 79 ]; 80 81 testTableIndexes("tableinsane3", idxes); 82 83 // //////////////////////////////////////////////////////////////////////// 84 // tableinsane3.2 (cell holes, row spans, fixed in bug 417912) 85 idxes = [ 86 [0, 1, 2], 87 [3, -1, 2], 88 [4, 5, 2], 89 ]; 90 91 testTableIndexes("tableinsane3.2", idxes); 92 93 // //////////////////////////////////////////////////////////////////////// 94 // tableinsane4 (empty row groups/rows and cell holes) 95 idxes = [ 96 [ 0, 1, 2], 97 [-1, -1, -1], 98 [ 3, 4, 5], 99 [ 6, 6, 7], 100 [ 8, -1, 7], 101 [ 9, 9, 9], 102 ]; 103 testTableIndexes("tableinsane4", idxes); 104 105 // //////////////////////////////////////////////////////////////////////// 106 // tableinsane5 (just a strange table) 107 idxes = [ 108 [ 0, 1, 2, -1, -1], 109 [-1, -1, -1, -1, -1], 110 [ 3, 4, 5, -1, -1], 111 [ 6, 7, -1, -1, -1], 112 [ 6, 8, 9, -1, -1], 113 [ 6, 10, 9, 11, 12], 114 ]; 115 testTableIndexes("tableinsane5", idxes); 116 117 // //////////////////////////////////////////////////////////////////////// 118 // tableinsane6 (overlapping cells, mad table) 119 idxes = [ 120 [ 0, 1, 2, -1, -1], 121 [-1, -1, -1, -1, -1], 122 [ 3, 4, 5, -1, -1], 123 [ 6, 6, 7, -1, -1], 124 [ 8, 9, 7, -1, -1], 125 [ 10, 9, 7, 11, 12], 126 ]; 127 testTableIndexes("tableinsane6", idxes); 128 129 // //////////////////////////////////////////////////////////////////////// 130 // Table with a cell that has display: block; style 131 idxes = [ 132 [0, 1], 133 ]; 134 testTableIndexes("tablewithcelldisplayblock", idxes); 135 136 // //////////////////////////////////////////////////////////////////////// 137 // A table with a cell that has display: block; and a cell with colspan. 138 // This makes us fall back to the ARIAGridCellAccessible implementation. 139 idxes = [ 140 [0, 0, 1], 141 ]; 142 testTableIndexes("tablewithcolspanandcelldisplayblock", idxes); 143 144 // //////////////////////////////////////////////////////////////////////// 145 // A table with all elements being display:block, including a row group. 146 // This makes us fall back to the ARIAGridRowAccessible, and we must 147 // make sure the index is 0. Strange example from Gmail. 148 idxes = [ 149 [0], 150 ]; 151 testTableIndexes("tablealldisplayblock", idxes); 152 153 // //////////////////////////////////////////////////////////////////////// 154 // Table that has display: block; style 155 idxes = [ 156 [0, 1], 157 ]; 158 testTableIndexes("tablewithdisplayblock", idxes); 159 160 // //////////////////////////////////////////////////////////////////////// 161 // tbody that has display: block; style 162 idxes = [ 163 [0, 1], 164 ]; 165 testTableIndexes("tbodywithdisplayblock", idxes); 166 167 SimpleTest.finish(); 168 } 169 170 SimpleTest.waitForExplicitFinish(); 171 addA11yLoadEvent(doTest); 172 </script> 173 </head> 174 <body> 175 176 <a target="_blank" 177 title="GetIndexAt and GetRowAtIndex and GetColumnAtIndex on HTML tables are inconsistent" 178 href="https://bugzilla.mozilla.org/show_bug.cgi?id=410052"> 179 Bug 410052 180 </a> 181 <p id="display"></p> 182 <div id="content" style="display: none"></div> 183 <pre id="test"> 184 </pre> 185 186 <!-- 187 If you change the structure of the table please make sure to change 188 the indexes count in 'for' statement in the script above. 189 --> 190 <table border="1" id="table"> 191 <caption><strong><b><font size="29">this is a caption for this table</font></b></strong></caption> 192 <thead> 193 <tr> 194 <th>col1</th> 195 <th>col2</th> 196 <th>col3</th> 197 </tr> 198 </thead> 199 <tbody> 200 <tr> 201 <td>1</td> 202 <td>2</td> 203 <td>3</td> 204 </tr> 205 <tr> 206 <td rowspan="0">4</td> 207 <td colspan="2">5</td> 208 </tr> 209 <tr> 210 <td>6</td> 211 <td>7</td> 212 </tr> 213 </tbody> 214 </table> 215 216 <table border="1" id="tableborder" style="border-collapse:collapse"> 217 <caption><strong><b><font size="29">this is a caption for this bc table</font></b></strong></caption> 218 <thead> 219 <tr> 220 <th>col1</th> 221 <th>col2</th> 222 <th>col3</th> 223 </tr> 224 </thead> 225 <tbody> 226 <tr> 227 <td>1</td> 228 <td>2</td> 229 <td>3</td> 230 </tr> 231 <tr> 232 <td rowspan="2">4</td> 233 <td colspan="2">5</td> 234 </tr> 235 <tr> 236 <td>6</td> 237 <td>7</td> 238 </tr> 239 </tbody> 240 </table> 241 242 <table cellpadding="2" cellspacing="2" border="1" width="50%" id="table2"> 243 <caption>column and row spans</caption> 244 <tbody> 245 <tr> 246 <td>0</td> 247 <td>1</td> 248 <td rowspan="1" colspan="2">2</td> 249 <td>3</td> 250 <td>4</td> 251 <td>5</td> 252 <td rowspan="4" colspan="1">6</td> 253 </tr> 254 <tr> 255 <td>7</td> 256 <td>8</td> 257 <td>8</td> 258 <td>10</td> 259 <td>11</td> 260 <td>12</td> 261 <td>13</td> 262 </tr> 263 <tr> 264 <td>14</td> 265 <td rowspan="2" colspan="2">15</td> 266 <td>16</td> 267 <td>17</td> 268 <td rowspan="2" colspan="1">18</td> 269 <td>19</td> 270 </tr> 271 <tr> 272 <td>20</td> 273 <td>21</td> 274 <td>22</td> 275 <td>23</td> 276 </tr> 277 </tbody> 278 </table> 279 280 <table border="1" id="tableinsane1"> 281 <caption>test empty row groups</caption> 282 <thead> 283 <tr> 284 <th>col1</th> 285 <th>col2</th> 286 <th>col3</th> 287 </tr> 288 </thead> 289 <tbody></tbody> 290 <tbody></tbody> 291 <tbody></tbody> 292 <tbody> 293 <tr> 294 <td>1</td> 295 <td>2</td> 296 <td>3</td> 297 </tr> 298 <tr> 299 <td rowspan="2">4</td> 300 <td colspan="2">5</td> 301 </tr> 302 <tr> 303 <td>6</td> 304 <td>7</td> 305 </tr> 306 </tbody> 307 </table> 308 309 <table border="1" id="tableinsane2"> 310 <caption>empty rows</caption> 311 <tbody><tr></tr><tr></tr></tbody> 312 <tbody></tbody> 313 <tbody> 314 <tr> 315 <td>0</td> 316 <td>1</td> 317 <td>2</td> 318 </tr> 319 </tbody> 320 </table> 321 322 <table border="1" id="tableinsane3"> 323 <caption>missed cell</caption> 324 <tbody> 325 <tr> 326 <td>0</td> 327 <td>1</td> 328 </tr> 329 </tbody> 330 <tbody> 331 <tr> 332 <td>2</td> 333 <td>3</td> 334 <td>4</td> 335 </tr> 336 </tbody> 337 </table> 338 339 <table cellpadding="2" cellspacing="2" border="1" id="tableinsane3.2"> 340 <tr><td>1</td><td>2</td><td rowspan=3>3</td> 341 <tr><td>4</td> 342 <tr><td>5</td><td>6</td> 343 </table> 344 345 <table border="1" id="tableinsane4"> 346 <caption>test empty rows + cellmap holes</caption> 347 <thead> 348 <tr> 349 <th>col1</th> 350 <th>col2</th> 351 <th>col3</th> 352 </tr> 353 </thead> 354 <tbody><tr></tr></tbody> 355 <tbody></tbody> 356 <tbody></tbody> 357 <tbody> 358 <tr> 359 <td>1</td> 360 <td>2</td> 361 <td>3</td> 362 </tr> 363 <tr> 364 <td colspan="2">4</td> 365 <td rowspan="2">5</td> 366 </tr> 367 <tr> 368 <td>6</td> 369 </tr> 370 <tr> 371 <td colspan="3">7</td> 372 </tr> 373 374 </tbody> 375 </table> 376 377 <table border="1" id="tableinsane5"> 378 <caption>just a strange table</caption> 379 <thead> 380 <tr> 381 <th>col1</th> 382 <th>col2</th> 383 <th>col3</th> 384 </tr> 385 </thead> 386 <tbody><tr></tr></tbody> 387 <tbody></tbody> 388 <tbody></tbody> 389 <tbody> 390 <tr> 391 <td>1</td> 392 <td>2</td> 393 <td>3</td> 394 </tr> 395 <tr> 396 <td rowspan="0">4</td> 397 <td colspan="0">5</td> 398 </tr> 399 <tr> 400 <td>6</td> 401 <td rowspan="0">7</td> 402 </tr> 403 <tr> 404 <td>8</td> 405 <td>9</td> 406 <td>10</td> 407 </tr> 408 409 </tbody> 410 </table> 411 412 <table border="1" id="tableinsane6" > 413 <caption>overlapping cells</caption> 414 <thead> 415 <tr> 416 <th>header cell 0</th> 417 <th>header cell 1</th> 418 <th>header cell 2</th> 419 </tr> 420 </thead> 421 <tbody><tr></tr></tbody> 422 <tbody></tbody> 423 <tbody></tbody> 424 <tbody> 425 <tr> 426 <td>3</td> 427 <td>4</td> 428 <td>5</td> 429 </tr> 430 <tr> 431 <td colspan="2">6</td> 432 <td rowspan="0">7</td> 433 </tr> 434 <tr> 435 <td>8</td> 436 <td rowspan="0">9</td> 437 </tr> 438 <tr> 439 <td colspan="3">10</td> 440 <td>11</td> 441 <td>12</td> 442 </tr> 443 </tbody> 444 </table> 445 446 <table id="tablewithcelldisplayblock"> 447 <tr> 448 <th>a</th> 449 <td style="display: block;">b</td> 450 </tr> 451 </table> 452 453 <table id="tablewithcolspanandcelldisplayblock"> 454 <tr> 455 <th colspan="2">a</th> 456 <td style="display: block;" >b</td> 457 </tr> 458 </table> 459 460 <table id="tablealldisplayblock" style="display:block;"> 461 <tbody style="display:block;"> 462 <tr style="display:block;"> 463 <td style="display:block;">text</td> 464 </tr> 465 </tbody> 466 </table> 467 468 <table id="tablewithdisplayblock" style="display: block;"> 469 <tr><th>a</th><td>b</td></tr> 470 </table> 471 472 <table id="tbodywithdisplayblock"> 473 <tbody style="display: block;"> 474 <tr> 475 <th>a</th> 476 <td>b</td> 477 </tr> 478 </tbody> 479 </table> 480 </body> 481 </html>