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