test_table.html (13248B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML table tests</title> 5 <link rel="stylesheet" type="text/css" 6 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 7 8 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 9 10 <script type="application/javascript" 11 src="../common.js"></script> 12 <script type="application/javascript" 13 src="../role.js"></script> 14 15 <script type="application/javascript"> 16 function doTest() { 17 // //////////////////////////////////////////////////////////////////////// 18 // tables having captions 19 20 // Two captions, first is used, second is ignored. 21 var accTree = 22 { TABLE: [ 23 { CAPTION: [ 24 { 25 role: ROLE_TEXT_LEAF, 26 name: "caption", 27 }, 28 ] }, 29 { ROW: [ 30 { COLUMNHEADER: [ { TEXT_LEAF: [ ] } ] }, 31 { COLUMNHEADER: [ { TEXT_LEAF: [ ] } ] }, 32 ] }, 33 { ROW: [ 34 { CELL: [ { TEXT_LEAF: [ ] } ] }, 35 { CELL: [ { TEXT_LEAF: [ ] } ] }, 36 ] }, 37 { ROW: [ 38 { CELL: [ { TEXT_LEAF: [ ] } ] }, 39 { CELL: [ { TEXT_LEAF: [ ] } ] }, 40 ] }, 41 { ROW: [ 42 { CELL: [ { TEXT_LEAF: [ ] } ] }, 43 { CELL: [ { TEXT_LEAF: [ ] } ] }, 44 ] }, 45 ] }; 46 47 testAccessibleTree("table", accTree); 48 49 // One caption, empty text, caption is included. 50 accTree = 51 { TABLE: [ 52 { CAPTION: [ ] }, 53 { ROW: [ 54 { CELL: [ { TEXT_LEAF: [ ] } ] }, 55 { CELL: [ { TEXT_LEAF: [ ] } ] }, 56 ] }, 57 ] }; 58 59 testAccessibleTree("table_caption_empty", accTree); 60 61 // Two captions, first has empty text, second is ignored. 62 accTree = 63 { TABLE: [ 64 { CAPTION: [ ] }, 65 { ROW: [ 66 { CELL: [ { TEXT_LEAF: [ ] } ] }, 67 { CELL: [ { TEXT_LEAF: [ ] } ] }, 68 ] }, 69 ] }; 70 71 testAccessibleTree("table_caption_firstempty", accTree); 72 73 // One caption, placed in the end of table. In use. 74 accTree = 75 { TABLE: [ 76 { CAPTION: [ 77 { 78 role: ROLE_TEXT_LEAF, 79 name: "caption", 80 }, 81 ] }, 82 { ROW: [ 83 { CELL: [ { TEXT_LEAF: [ ] } ] }, 84 { CELL: [ { TEXT_LEAF: [ ] } ] }, 85 ] }, 86 ] }; 87 88 testAccessibleTree("table_caption_intheend", accTree); 89 90 // One caption, collapsed to zero width and height. In use. 91 accTree = 92 { TABLE: [ 93 { CAPTION: [ 94 { 95 role: ROLE_TEXT_LEAF, 96 name: "caption", 97 }, 98 ] }, 99 { ROW: [ 100 { CELL: [ { TEXT_LEAF: [ ] } ] }, 101 { CELL: [ { TEXT_LEAF: [ ] } ] }, 102 ] }, 103 ] }; 104 105 testAccessibleTree("table_caption_collapsed", accTree); 106 107 // //////////////////////////////////////////////////////////////////////// 108 // table2 (consist of one column) 109 110 accTree = { 111 role: ROLE_TABLE, 112 children: [ 113 { 114 role: ROLE_ROW, 115 children: [ 116 { 117 role: ROLE_COLUMNHEADER, 118 }, 119 ], 120 }, 121 { 122 role: ROLE_ROW, 123 children: [ 124 { 125 role: ROLE_CELL, 126 }, 127 ], 128 }, 129 ], 130 }; 131 132 testAccessibleTree("table2", accTree); 133 134 // //////////////////////////////////////////////////////////////////////// 135 // table3 (consist of one row) 136 137 accTree = { 138 role: ROLE_TABLE, 139 children: [ 140 { 141 role: ROLE_ROW, 142 children: [ 143 { 144 role: ROLE_ROWHEADER, 145 }, 146 { 147 role: ROLE_CELL, 148 }, 149 ], 150 }, 151 ], 152 }; 153 154 testAccessibleTree("table3", accTree); 155 156 // /////////////////////////////////////////////////////////////////////// 157 // table4 (display: table-row) 158 accTree = 159 { TABLE: [ 160 { ROW: [ 161 { CELL: [ 162 { TEXT_LEAF: [ ] }, 163 ] }, 164 ] } ], 165 }; 166 testAccessibleTree("table4", accTree); 167 168 // /////////////////////////////////////////////////////////////////////// 169 // table5 (tbody with display: block should not get accessible) 170 accTree = 171 { TABLE: [ 172 { ROW: [ 173 { CELL: [ 174 { TEXT_LEAF: [ ] }, 175 ] }, 176 ] }, 177 ] }; 178 testAccessibleTree("table5", accTree); 179 180 // /////////////////////////////////////////////////////////////////////// 181 // log table 182 accTree = 183 { TABLE: [ 184 { ROW: [ 185 { CELL: [ 186 { TEXT_LEAF: [ ] }, 187 ] }, 188 ] }, 189 ] }; 190 testAccessibleTree("logtable", accTree); 191 192 // /////////////////////////////////////////////////////////////////////// 193 // display:block table 194 accTree = 195 { TABLE: [ 196 { ROW: [ 197 { CELL: [ 198 { TEXT_LEAF: [ ] }, 199 ] }, 200 ] }, 201 ] }; 202 testAccessibleTree("block_table", accTree); 203 204 // /////////////////////////////////////////////////////////////////////// 205 // display:inline table 206 accTree = 207 { TABLE: [ 208 { ROW: [ 209 { CELL: [ 210 { TEXT_LEAF: [ ] }, 211 ] }, 212 { CELL: [ 213 { TEXT_LEAF: [ ] }, 214 ] }, 215 ] }, 216 ] }; 217 testAccessibleTree("inline_table1", accTree); 218 219 // /////////////////////////////////////////////////////////////////////// 220 // display:inline table 221 accTree = 222 { TABLE: [ 223 { ROW: [ 224 { CELL: [ 225 { TABLE: [ 226 { ROW: [ 227 { CELL: [ 228 { TEXT_LEAF: [ ] }, 229 ] }, 230 ] }, 231 ] }, 232 ] }, 233 ] }, 234 ] }; 235 testAccessibleTree("table_containing_inlinetable", accTree); 236 237 // /////////////////////////////////////////////////////////////////////// 238 // table with a cell that has display:block 239 accTree = 240 { TABLE: [ 241 { ROW: [ 242 { CELL: [ 243 { TEXT_LEAF: [ ] }, 244 ] }, 245 { CELL: [ 246 { TEXT_LEAF: [ ] }, 247 ] }, 248 ] }, 249 ] }; 250 testAccessibleTree("table_containing_block_cell", accTree); 251 252 // /////////////////////////////////////////////////////////////////////// 253 // A table with all elements being display:block, including a row group. 254 // This makes us fall back to the ARIAGridRowAccessible. 255 // Strange example from Gmail. 256 accTree = 257 { TABLE: [ 258 { ROW: [ 259 { CELL: [ 260 { TEXT_LEAF: [ ] }, 261 ] }, 262 ] }, 263 ] }; 264 testAccessibleTree("table_all_display_block", accTree); 265 266 // /////////////////////////////////////////////////////////////////////// 267 // A table with a display:block tbody that has an aria role 268 // The tbody should get an accessible with the desired role. 269 accTree = 270 { TABLE: [ 271 { DIALOG: [ 272 { TEXT_CONTAINER: [ 273 { TEXT_CONTAINER: [ 274 { TEXT_LEAF: [ ] }, 275 ] }, 276 ] }, 277 ] }, 278 ] }; 279 testAccessibleTree("table_with_block_tbody_and_role", accTree); 280 281 // /////////////////////////////////////////////////////////////////////// 282 // A table with a display:block tbody that is focusable 283 // The tbody should get a grouping accessible. 284 accTree = 285 { TABLE: [ 286 { ROWGROUP: [ 287 { ROW: [ 288 { CELL: [ 289 { TEXT_LEAF: [ ] }, 290 ] }, 291 ] }, 292 ] }, 293 ] }; 294 testAccessibleTree("table_with_focusable_block_tbody", accTree); 295 296 // /////////////////////////////////////////////////////////////////////// 297 // Test that the CSS position property doesn't stop th elements from 298 // reporting the proper columnheader, rowheader roles. 299 accTree = 300 { TABLE: [ 301 { ROW: [ 302 { COLUMNHEADER: [ { TEXT_LEAF: [ ] } ] }, 303 { COLUMNHEADER: [ { TEXT_LEAF: [ ] } ] }, 304 { COLUMNHEADER: [ { TEXT_LEAF: [ ] } ] }, 305 { COLUMNHEADER: [ { TEXT_LEAF: [ ] } ] }, 306 { COLUMNHEADER: [ { TEXT_LEAF: [ ] } ] }, 307 ] }, 308 { ROW: [ 309 { ROWHEADER: [ { TEXT_LEAF: [ ] } ] }, 310 { CELL: [ ] }, 311 { ROWHEADER: [ { TEXT_LEAF: [ ] } ] }, 312 { CELL: [ ] }, 313 { ROWHEADER: [ { TEXT_LEAF: [ ] } ] }, 314 { CELL: [ ] }, 315 { ROWHEADER: [ { TEXT_LEAF: [ ] } ] }, 316 { CELL: [ ] }, 317 { ROWHEADER: [ { TEXT_LEAF: [ ] } ] }, 318 { CELL: [ ] }, 319 ] }, 320 ] }; 321 testAccessibleTree("table_containing_pos_styled_th", accTree); 322 323 SimpleTest.finish(); 324 } 325 326 SimpleTest.waitForExplicitFinish(); 327 addA11yLoadEvent(doTest); 328 </script> 329 </head> 330 <body> 331 332 <a target="_blank" 333 title="When a table has only one column per row and that column happens to be a column header its role is exposed wrong" 334 href="https://bugzilla.mozilla.org/show_bug.cgi?id=529621"> 335 Mozilla Bug 529621 336 </a> 337 <a target="_blank" 338 title="when div has display style table-row" 339 href="https://bugzilla.mozilla.org/show_bug.cgi?id=727722"> 340 Mozilla Bug 727722 341 </a> 342 <p id="display"></p> 343 <div id="content" style="display: none"></div> 344 <pre id="test"> 345 </pre> 346 347 <table id="table"> 348 <thead> 349 <tr> 350 <th>col1</th><th>col2</th> 351 </tr> 352 </thead> 353 <caption>caption</caption> 354 <tbody> 355 <tr> 356 <td>cell1</td><td>cell2</td> 357 </tr> 358 </tbody> 359 <tr> 360 <td>cell3</td><td>cell4</td> 361 </tr> 362 <caption>caption2</caption> 363 <tfoot> 364 <tr> 365 <td>cell5</td><td>cell6</td> 366 </tr> 367 </tfoot> 368 </table> 369 370 <table id="table_caption_empty"> 371 <caption></caption> 372 <tr> 373 <td>cell1</td><td>cell2</td> 374 </tr> 375 </table> 376 377 <table id="table_caption_firstempty"> 378 <caption></caption> 379 <tr> 380 <td>cell1</td><td>cell2</td> 381 </tr> 382 <caption>caption</caption> 383 </table> 384 385 <table id="table_caption_intheend"> 386 <tr> 387 <td>cell1</td><td>cell2</td> 388 </tr> 389 <caption>caption</caption> 390 </table> 391 392 <table id="table_caption_collapsed"> 393 <caption style="width: 0; height: 0">caption</caption> 394 <tr> 395 <td>cell1</td><td>cell2</td> 396 </tr> 397 </table> 398 <table id="table2"> 399 <thead> 400 <tr> 401 <th>colheader</th> 402 </tr> 403 </thead> 404 <tbody> 405 <tr> 406 <td>bla</td> 407 </tr> 408 </tbody> 409 </table> 410 411 <table id="table3"> 412 <tr> 413 <th>rowheader</th> 414 <td>cell</td> 415 </tr> 416 </table> 417 418 <table id="table4"> 419 <div style="display: table-row"> 420 <td>cell1</td> 421 </div> 422 </table> 423 424 <table id="table5"> 425 <tbody style="display:block;"> 426 <tr> 427 <td>bla</td> 428 </tr> 429 </tbody> 430 </table> 431 432 <table id="logtable" role="log"><tr><td>blah</td></tr></table> 433 434 <table id="block_table" style="display: block;"> 435 <tr> 436 <td>bla</td> 437 </tr> 438 </table> 439 440 <table id="inline_table1" border="1" style="display:inline"> 441 <tr> 442 <td>table1 cell1</td> 443 <td>table1 cell2</td> 444 </tr> 445 </table> 446 447 <table id="table_containing_inlinetable"><tr><td> 448 <table id="inline_table2" border="1" style="display:inline"> 449 <tr id="tr_in_inline_table2"> 450 <td id="td_in_inline_table2">cell</td> 451 </tr> 452 </table> 453 </td></tr></table> 454 455 <table id="table_containing_block_cell"> 456 <tr> 457 <td>Normal cell</td> 458 <td style="display: block;">Block cell</td> 459 </tr> 460 </table> 461 <table id="table_all_display_block" style="display:block;"> 462 <tbody style="display:block;"> 463 <tr style="display:block;"> 464 <td style="display:block;">text</td> 465 </tr> 466 </tbody> 467 </table> 468 469 <table id="table_with_block_tbody_and_role"> 470 <tbody style="display:block;" role="dialog"> 471 <tr> 472 <td>text</td> 473 </tr> 474 </tbody> 475 </table> 476 477 <table id="table_with_focusable_block_tbody"> 478 <tbody style="display:block;" tabindex="0"> 479 <tr> 480 <td>text</td> 481 </tr> 482 </tbody> 483 </table> 484 485 <table id="table_containing_pos_styled_th"> 486 <tr> 487 <th style="position: static">static colheader</th> 488 <th style="position: relative">relative colheader</th> 489 <th style="position: absolute">absolute colheader</th> 490 <th style="position: fixed">fixed colheader</th> 491 <th style="position: sticky">sticky colheader</th> 492 </tr> 493 <tr> 494 <th style="position: static">static rowheader</th> 495 <td/> 496 <th style="position: relative">relative rowheader</th> 497 <td/> 498 <th style="position: absolute">absolute rowheader</th> 499 <td/> 500 <th style="position: fixed">fixed rowheader</th> 501 <td/> 502 <th style="position: sticky">sticky rowheader</th> 503 <td/> 504 </tr> 505 </table> 506 </body> 507 </html>