test_layoutguess.html (13689B)
1 <html> 2 <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=495388 --> 3 <head> 4 <title>test HTMLTableAccessible::IsProbablyForLayout implementation</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="../attributes.js"></script> 14 15 <script type="application/javascript"> 16 function isLayoutTable(id) { 17 // This helps us know if the absence of layout-guess is simply because 18 // it is not a table. 19 ok(isAccessible(id, nsIAccessibleTable), `${id} has table interface`); 20 testAttrs(id, { "layout-guess": "true" }, true); 21 } 22 function isDataTable(id) { 23 testAbsentAttrs(id, { "layout-guess": "true" }); 24 } 25 26 function doTest() { 27 // table with role of grid 28 isDataTable("table1"); 29 // table with role of grid and datatable="0" 30 isDataTable("table1.1"); 31 32 // table with landmark role 33 isDataTable("table2"); 34 35 // table with summary 36 isDataTable("table3"); 37 38 // table with caption 39 isDataTable("table4"); 40 41 // layout table with empty caption 42 isLayoutTable("table4.2"); 43 44 // table with thead element 45 isDataTable("table5"); 46 47 // table with tfoot element 48 isDataTable("table5.1"); 49 50 // table with colgroup or col elements 51 isDataTable("table5.2"); 52 isDataTable("table5.3"); 53 54 // table with th element 55 isDataTable("table6"); 56 57 // table with headers attribute 58 isDataTable("table6.2"); 59 60 // table with scope attribute 61 isDataTable("table6.2.2"); 62 63 // table with abbr attribute 64 isDataTable("table6.2.3"); 65 66 // table with abbr element 67 isDataTable("table6.3"); 68 69 // table with abbr element having empty text node 70 isDataTable("table6.4"); 71 72 // table with abbr element and non-empty text node 73 isLayoutTable("table6.5"); 74 75 // layout table with nested table 76 isLayoutTable("table9"); 77 78 // layout table with 1 column 79 isLayoutTable("table10"); 80 81 // layout table with 1 row 82 isLayoutTable("table11"); 83 84 // table with 5 columns 85 isDataTable("table12"); 86 87 // table with a bordered cell 88 isDataTable("table13"); 89 90 // table with alternating row background colors 91 isDataTable("table14"); 92 93 // table with 3 columns and 21 rows 94 isDataTable("table15"); 95 96 // layout table that has a 100% width 97 isLayoutTable("table16"); 98 99 // layout table that has a 95% width in pixels 100 isLayoutTable("table17"); 101 102 // layout table with less than 10 columns 103 isLayoutTable("table18"); 104 105 // layout table with embedded iframe 106 isLayoutTable("table19"); 107 108 // tree grid, no layout table 109 isDataTable("table20"); 110 111 // layout table containing nested data table (having data structures) 112 isLayoutTable("table21"); 113 isLayoutTable("table21.2"); 114 isLayoutTable("table21.3"); 115 isLayoutTable("table21.4"); 116 isLayoutTable("table21.5"); 117 isLayoutTable("table21.6"); 118 119 // layout table having datatable="0" attribute and containing data table structure (tfoot element) 120 isLayoutTable("table22"); 121 122 // repurposed table for tabbed UI 123 isLayoutTable("table23"); 124 125 // data table that has a nested table but has non-zero border width on a cell 126 isDataTable("table24"); 127 128 // layout display:block table with 1 column 129 isLayoutTable("displayblock_table1"); 130 131 // matrix 132 isDataTable("mtable1"); 133 134 SimpleTest.finish(); 135 } 136 137 SimpleTest.waitForExplicitFinish(); 138 addA11yLoadEvent(doTest); 139 </script> 140 </head> 141 <body> 142 143 <a target="_blank" 144 href="https://bugzilla.mozilla.org/show_bug.cgi?id=495388" 145 title="Don't treat tables that have a landmark role as layout table"> 146 Mozilla Bug 495388 147 </a> 148 <a target="_blank" 149 href="https://bugzilla.mozilla.org/show_bug.cgi?id=690222" 150 title="Data table elements used to determine layout-guess attribute shouldn't be picked from nested tables"> 151 Mozilla Bug 690222 152 </a> 153 <a target="_blank" 154 href="https://bugzilla.mozilla.org/show_bug.cgi?id=696975" 155 title="Extend the list of legitimate data table structures"> 156 Mozilla Bug 696975 157 </a> 158 159 <p id="display"></p> 160 <div id="content" style="display: none"></div> 161 <pre id="test"> 162 </pre> 163 164 <!-- Table with role of grid --> 165 <table id="table1" role="grid"> 166 <tr> 167 <th>Sender</th> 168 <th>Subject</th> 169 <th>Date</th> 170 </tr> 171 <tr> 172 <td>Marco</td> 173 <td>Test</td> 174 <td>June 12</td> 175 </tr> 176 <tr> 177 <td>David</td> 178 <td>Another test</td> 179 <td>June 12</td> 180 </tr> 181 <tr> 182 <td>Alex</td> 183 <td>Third test</td> 184 <td>June 12</td> 185 </tr> 186 </table> 187 <!-- table with role of grid and datatable="0"--> 188 <table id="table1.1" role="grid" datatable="0"> 189 <tr> 190 <td>Cell1</td><td>cell2</td> 191 </tr> 192 </table> 193 194 <!-- table with landmark role --> 195 <table id="table2" role="main"> 196 <tr> 197 <th>Sender</th> 198 <th>Subject</th> 199 <th>Date</th> 200 </tr> 201 <tr> 202 <td>Marco</td> 203 <td>Test</td> 204 <td>June 12</td> 205 </tr> 206 <tr> 207 <td>David</td> 208 <td>Another test</td> 209 <td>June 12</td> 210 </tr> 211 <tr> 212 <td>Alex</td> 213 <td>Third test</td> 214 <td>June 12</td> 215 </tr> 216 </table> 217 218 <!-- table with summary --> 219 <table id="table3" summary="This is a table"> 220 <tr> 221 <td>Cell1</td><td>cell2</td> 222 </tr> 223 </table> 224 225 <!-- table with caption --> 226 <table id="table4"> 227 <caption>This is a table</caption> 228 <tr> 229 <td>Cell1</td><td>cell2</td> 230 </tr> 231 </table> 232 233 <!-- layout table with empty caption --> 234 <table id="table4.2"> 235 <caption> </caption> 236 <tr> 237 <td>Cell1</td><td>cell2</td> 238 </tr> 239 </table> 240 241 <!-- table with thead element --> 242 <table id="table5"> 243 <thead> 244 <tr> 245 <td>Cell1</td><td>cell2</td> 246 </tr> 247 </thead> 248 </table> 249 250 <!-- table with tfoot element --> 251 <table id="table5.1"> 252 <tfoot> 253 <tr> 254 <td>Cell1</td><td>cell2</td> 255 </tr> 256 </tfoot> 257 </table> 258 259 <!-- table with colgroup and col elements --> 260 <table id="table5.2"> 261 <colgroup width="20"></colgroup> 262 <tr> 263 <td>Cell1</td><td>cell2</td> 264 </tr> 265 </table> 266 <table id="table5.3"> 267 <col width="20"> 268 <tr> 269 <td>Cell1</td><td>cell2</td> 270 </tr> 271 </table> 272 273 <!-- table with th element --> 274 <table id="table6"> 275 <tr> 276 <th>Cell1</th><th>cell2</th> 277 </tr> 278 </table> 279 280 <!-- table with headers attribute --> 281 <table id="table6.2"> 282 <tr> 283 <td headers="a">table6.2 cell</td> 284 </tr> 285 </table> 286 287 <!-- table with scope attribute --> 288 <table id="table6.2.2"> 289 <tr> 290 <td scope="a">table6.2.2 cell</td> 291 </tr> 292 </table> 293 294 <!-- table with abbr attribute --> 295 <table id="table6.2.3"> 296 <tr> 297 <td abbr="table6.2.3">table6.2.3 cell1</td> 298 </tr> 299 </table> 300 301 <!-- table with abbr element --> 302 <table id="table6.3"> 303 <tr> 304 <td>table6.3 cell1</td> 305 <td><abbr>table6.3 cell2</abbr></td> 306 </tr> 307 </table> 308 309 <!-- table with abbr element having empty text node --> 310 <table id="table6.4"> 311 <tr> 312 <td> 313 <abbr>abbr</abbr> 314 </td> 315 </tr> 316 </table> 317 318 <!-- table with abbr element and non-empty text node --> 319 <table id="table6.5"> 320 <tr> 321 <td> 322 This is a really long text (<abbr>tiarlt</abbr>) inside layout table 323 </td> 324 </tr> 325 </table> 326 327 <!-- layout table with nested table --> 328 <table id="table9"> 329 <tr> 330 <td><table><tr><td>Cell</td></tr></table></td> 331 </tr> 332 </table> 333 334 <!-- layout table with 1 column --> 335 <table id="table10"> 336 <tr><td>Row1</td></tr> 337 <tr><td>Row2</td></tr> 338 </table> 339 340 <!-- layout table with 1 row and purposely many columns --> 341 <table id="table11"> 342 <tr><td>Col1</td><td>Col2</td><td>Col3</td><td>Col4</td><td>Col5</td></tr> 343 </table> 344 345 <!-- table with 5 columns --> 346 <table id="table12"> 347 <tr><td>Col1</td><td>Col2</td><td>Col3</td><td>Col4</td><td>Col5</td></tr> 348 <tr><td>Col1</td><td>Col2</td><td>Col3</td><td>Col4</td><td>Col5</td></tr> 349 </table> 350 351 <!-- table with a bordered cell --> 352 <table id="table13" border="1" width="100%" bordercolor="#0000FF"> 353 <tr> 354 <td bordercolor="#000000"> </td> 355 <td bordercolor="#000000"> </td> 356 <td bordercolor="#000000"> </td> 357 </tr> 358 <tr> 359 <td bordercolor="#000000"> </td> 360 <td bordercolor="#000000"> </td> 361 <td bordercolor="#000000"> </td> 362 </tr> 363 </table> 364 365 <!-- table with alternating row background colors --> 366 <table id="table14" width="100%"> 367 <tr style="background-color: #0000FF;"> 368 <td> </td> 369 <td> </td> 370 <td> </td> 371 </tr> 372 <tr style="background-color: #00FF00;"> 373 <td> </td> 374 <td> </td> 375 <td> </td> 376 </tr> 377 </table> 378 379 <!-- table with 3 columns and 21 rows --> 380 <table id="table15" border="0"> 381 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 382 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 383 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 384 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 385 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 386 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 387 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 388 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 389 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 390 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 391 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 392 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 393 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 394 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 395 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 396 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 397 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 398 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 399 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 400 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 401 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 402 </table> 403 404 <!-- layout table that has a 100% width --> 405 <table id="table16" width="100%"> 406 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 407 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 408 </table> 409 410 <!-- layout table that has a 95% width in pixels --> 411 <table id="table17" width="98%"> 412 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 413 <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr> 414 </table> 415 416 <!-- layout table with less than 10 columns --> 417 <table id="table18"> 418 <tr> 419 <td>Marco</td> 420 <td>Test</td> 421 <td>June 12</td> 422 </tr> 423 <tr> 424 <td>David</td> 425 <td>Another test</td> 426 <td>June 12</td> 427 </tr> 428 <tr> 429 <td>Alex</td> 430 <td>Third test</td> 431 <td>June 12</td> 432 </tr> 433 </table> 434 435 <!-- layout table with embedded iframe --> 436 <table id="table19"> 437 <tr><td><iframe id="frame"></iframe></td><td> </td><td> </td></tr> 438 <tr><td> </td><td> </td><td> </td></tr> 439 <tr><td> </td><td> </td><td> </td></tr> 440 <tr><td> </td><td> </td><td> </td></tr> 441 </table> 442 443 <!-- tree grid, no layout table --> 444 <table id="table20" role="treegrid"> 445 <tr role="treeitem"><td>Cell1</td><td>Cell2</td></tr> 446 </table> 447 448 <!-- layout table with nested data table containing data table elements --> 449 <table id="table21"> 450 <tr> 451 <td> 452 <table> 453 <caption>table</caption> 454 <tr><td>Cell</td></tr> 455 </table> 456 </td> 457 </tr> 458 </table> 459 <table id="table21.2"> 460 <tr> 461 <td> 462 <table> 463 <colgroup width="20"></colgroup> 464 <tr><th>Cell</th></tr> 465 </table> 466 </td> 467 </tr> 468 </table> 469 <table id="table21.3"> 470 <tr> 471 <td> 472 <table> 473 <col width="20"></col> 474 <tr><th>Cell</th></tr> 475 </table> 476 </td> 477 </tr> 478 </table> 479 <table id="table21.4"> 480 <tr> 481 <td> 482 <table> 483 <tr><th>Cell</th></tr> 484 </table> 485 </td> 486 </tr> 487 </table> 488 <table id="table21.5"> 489 <tr> 490 <td> 491 <table> 492 <thead> 493 <tr><td>Cell</td></tr> 494 </thead> 495 </table> 496 </td> 497 </tr> 498 </table> 499 <table id="table21.6"> 500 <tr> 501 <td> 502 <table> 503 <tfoot> 504 <tr><td>Cell</td></tr> 505 </tfoot> 506 </table> 507 </td> 508 </tr> 509 </table> 510 511 <!-- layout table with datatable="0" and tfoot element--> 512 <table id="table22" datatable="0"> 513 <tfoot> 514 <tr> 515 <td>Cell1</td><td>cell2</td> 516 </tr> 517 </tfoot> 518 </table> 519 520 <table id="table23" border="1"> 521 <tr role="tablist"> 522 <td role="tab">Tab 1</td><td role="tab">Tab 2</td> 523 </tr> 524 <tr> 525 <td role="tabpanel" colspan="2">Hello</td> 526 </tr> 527 </table> 528 529 <table id="table24"> 530 <tr></tr> 531 <tr> 532 <td style="width: 1px;"></td> 533 <td> 534 <table></table> 535 </td> 536 </tr> 537 </table> 538 539 <!-- display:block table --> 540 <table id="displayblock_table1" style="display:block"> 541 <tr><td>Row1</td></tr> 542 <tr><td>Row2</td></tr> 543 </table> 544 545 <!-- MathML matrix --> 546 <math> 547 <mtable id="mtable1"> 548 <mtr> 549 <mtd> 550 <mn>1</mn> 551 </mtd> 552 <mtd> 553 <mn>0</mn> 554 </mtd> 555 </mtr> 556 <mtr> 557 <mtd> 558 <mn>0</mn> 559 </mtd> 560 <mtd> 561 <mn>1</mn> 562 </mtd> 563 </mtr> 564 </mtable> 565 </math> 566 </body> 567 </html>