1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/accessible/tests/mochitest/table/test_layoutguess.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,522 @@
1.4 +<html>
1.5 +<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=495388 -->
1.6 +<head>
1.7 + <title>test HTMLTableAccessible::IsProbablyForLayout implementation</title>
1.8 + <link rel="stylesheet" type="text/css"
1.9 + href="chrome://mochikit/content/tests/SimpleTest/test.css" />
1.10 +
1.11 + <script type="application/javascript"
1.12 + src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
1.13 +
1.14 + <script type="application/javascript"
1.15 + src="../common.js"></script>
1.16 + <script type="application/javascript"
1.17 + src="../attributes.js"></script>
1.18 +
1.19 + <script type="application/javascript">
1.20 + function doTest()
1.21 + {
1.22 + // Attribute we're looking for
1.23 + var attr = {
1.24 + "layout-guess": "true"
1.25 + };
1.26 +
1.27 + // table with role of grid
1.28 + testAbsentAttrs("table1", attr);
1.29 + // table with role of grid and datatable="0"
1.30 + testAbsentAttrs("table1.1", attr);
1.31 +
1.32 + // table with landmark role
1.33 + testAbsentAttrs("table2", attr);
1.34 +
1.35 + // table with summary
1.36 + testAbsentAttrs("table3", attr);
1.37 +
1.38 + // table with caption
1.39 + testAbsentAttrs("table4", attr);
1.40 +
1.41 + // layout table with empty caption
1.42 + testAttrs("table4.2", attr, true);
1.43 +
1.44 + // table with thead element
1.45 + testAbsentAttrs("table5", attr);
1.46 +
1.47 + // table with tfoot element
1.48 + testAbsentAttrs("table5.1", attr);
1.49 +
1.50 + // table with colgroup or col elements
1.51 + testAbsentAttrs("table5.2", attr);
1.52 + testAbsentAttrs("table5.3", attr);
1.53 +
1.54 + // table with th element
1.55 + testAbsentAttrs("table6", attr);
1.56 +
1.57 + // table with headers attribute
1.58 + testAbsentAttrs("table6.2", attr);
1.59 +
1.60 + // table with scope attribute
1.61 + testAbsentAttrs("table6.2.2", attr);
1.62 +
1.63 + // table with abbr attribute
1.64 + testAbsentAttrs("table6.2.3", attr);
1.65 +
1.66 + // table with abbr element
1.67 + testAbsentAttrs("table6.3", attr);
1.68 +
1.69 + // table with abbr element having empty text node
1.70 + testAbsentAttrs("table6.4", attr);
1.71 +
1.72 + // table with abbr element and non-empty text node
1.73 + testAttrs("table6.5", attr, true);
1.74 +
1.75 + // layout table with nested table
1.76 + testAttrs("table9", attr, true);
1.77 +
1.78 + // layout table with 1 column
1.79 + testAttrs("table10", attr, true);
1.80 +
1.81 + // layout table with 1 row
1.82 + testAttrs("table11", attr, true);
1.83 +
1.84 + // table with 5 columns
1.85 + testAbsentAttrs("table12", attr);
1.86 +
1.87 + // table with a bordered cell
1.88 + testAbsentAttrs("table13", attr);
1.89 +
1.90 + // table with alternating row background colors
1.91 + testAbsentAttrs("table14", attr);
1.92 +
1.93 + // table with 3 columns and 21 rows
1.94 + testAbsentAttrs("table15", attr);
1.95 +
1.96 + // layout table that has a 100% width
1.97 + testAttrs("table16", attr, true);
1.98 +
1.99 + // layout table that has a 95% width in pixels
1.100 + testAttrs("table17", attr, true);
1.101 +
1.102 + // layout table with less than 10 columns
1.103 + testAttrs("table18", attr, true);
1.104 +
1.105 + // layout table with embedded iframe
1.106 + testAttrs("table19", attr, true);
1.107 +
1.108 + // tree grid, no layout table
1.109 + testAbsentAttrs("table20", attr);
1.110 +
1.111 + // layout table containing nested data table (having data structures)
1.112 + testAttrs("table21", attr, true);
1.113 + testAttrs("table21.2", attr, true);
1.114 + testAttrs("table21.3", attr, true);
1.115 + testAttrs("table21.4", attr, true);
1.116 + testAttrs("table21.5", attr, true);
1.117 + testAttrs("table21.6", attr, true);
1.118 +
1.119 + // layout table having datatable="0" attribute and containing data table structure (tfoot element)
1.120 + testAttrs("table22", attr, true);
1.121 +
1.122 + // css table with non-table tag
1.123 + testAttrs("table23", attr, true);
1.124 +
1.125 + SimpleTest.finish();
1.126 + }
1.127 +
1.128 + SimpleTest.waitForExplicitFinish();
1.129 + addA11yLoadEvent(doTest);
1.130 + </script>
1.131 +</head>
1.132 +<body>
1.133 +
1.134 + <a target="_blank"
1.135 + href="https://bugzilla.mozilla.org/show_bug.cgi?id=495388"
1.136 + title="Don't treat tables that have a landmark role as layout table">
1.137 + Mozilla Bug 495388
1.138 + </a>
1.139 + <a target="_blank"
1.140 + href="https://bugzilla.mozilla.org/show_bug.cgi?id=690222"
1.141 + title="Data table elements used to determine layout-guess attribute shouldn't be picked from nested tables">
1.142 + Mozilla Bug 690222
1.143 + </a>
1.144 + <a target="_blank"
1.145 + href="https://bugzilla.mozilla.org/show_bug.cgi?id=693948"
1.146 + title="Expose layout-guess: true object attribute on CSS table accessible">
1.147 + Mozilla Bug 693948
1.148 + </a>
1.149 + <a target="_blank"
1.150 + href="https://bugzilla.mozilla.org/show_bug.cgi?id=696975"
1.151 + title="Extend the list of legitimate data table structures">
1.152 + Mozilla Bug 696975
1.153 + </a>
1.154 +
1.155 + <p id="display"></p>
1.156 + <div id="content" style="display: none"></div>
1.157 + <pre id="test">
1.158 + </pre>
1.159 +
1.160 + <!-- Table with role of grid -->
1.161 + <table id="table1" role="grid">
1.162 + <tr>
1.163 + <th>Sender</th>
1.164 + <th>Subject</th>
1.165 + <th>Date</th>
1.166 + </tr>
1.167 + <tr>
1.168 + <td>Marco</td>
1.169 + <td>Test</td>
1.170 + <td>June 12</td>
1.171 + </tr>
1.172 + <tr>
1.173 + <td>David</td>
1.174 + <td>Another test</td>
1.175 + <td>June 12</td>
1.176 + </tr>
1.177 + <tr>
1.178 + <td>Alex</td>
1.179 + <td>Third test</td>
1.180 + <td>June 12</td>
1.181 + </tr>
1.182 + </table>
1.183 + <!-- table with role of grid and datatable="0"-->
1.184 + <table id="table1.1" role="grid" datatable="0">
1.185 + <tr>
1.186 + <td>Cell1</td><td>cell2</td>
1.187 + </tr>
1.188 + </table>
1.189 +
1.190 + <!-- table with landmark role -->
1.191 + <table id="table2" role="main">
1.192 + <tr>
1.193 + <th>Sender</th>
1.194 + <th>Subject</th>
1.195 + <th>Date</th>
1.196 + </tr>
1.197 + <tr>
1.198 + <td>Marco</td>
1.199 + <td>Test</td>
1.200 + <td>June 12</td>
1.201 + </tr>
1.202 + <tr>
1.203 + <td>David</td>
1.204 + <td>Another test</td>
1.205 + <td>June 12</td>
1.206 + </tr>
1.207 + <tr>
1.208 + <td>Alex</td>
1.209 + <td>Third test</td>
1.210 + <td>June 12</td>
1.211 + </tr>
1.212 + </table>
1.213 +
1.214 + <!-- table with summary -->
1.215 + <table id="table3" summary="This is a table">
1.216 + <tr>
1.217 + <td>Cell1</td><td>cell2</td>
1.218 + </tr>
1.219 + </table>
1.220 +
1.221 + <!-- table with caption -->
1.222 + <table id="table4">
1.223 + <caption>This is a table</caption>
1.224 + <tr>
1.225 + <td>Cell1</td><td>cell2</td>
1.226 + </tr>
1.227 + </table>
1.228 +
1.229 + <!-- layout table with empty caption -->
1.230 + <table id="table4.2">
1.231 + <caption> </caption>
1.232 + <tr>
1.233 + <td>Cell1</td><td>cell2</td>
1.234 + </tr>
1.235 + </table>
1.236 +
1.237 + <!-- table with thead element -->
1.238 + <table id="table5">
1.239 + <thead>
1.240 + <tr>
1.241 + <td>Cell1</td><td>cell2</td>
1.242 + </tr>
1.243 + </thead>
1.244 + </table>
1.245 +
1.246 + <!-- table with tfoot element -->
1.247 + <table id="table5.1">
1.248 + <tfoot>
1.249 + <tr>
1.250 + <td>Cell1</td><td>cell2</td>
1.251 + </tr>
1.252 + </tfoot>
1.253 + </table>
1.254 +
1.255 + <!-- table with colgroup and col elements -->
1.256 + <table id="table5.2">
1.257 + <colgroup width="20"></colgroup>
1.258 + <tr>
1.259 + <td>Cell1</td><td>cell2</td>
1.260 + </tr>
1.261 + </table>
1.262 + <table id="table5.3">
1.263 + <col width="20">
1.264 + <tr>
1.265 + <td>Cell1</td><td>cell2</td>
1.266 + </tr>
1.267 + </table>
1.268 +
1.269 + <!-- table with th element -->
1.270 + <table id="table6">
1.271 + <tr>
1.272 + <th>Cell1</th><th>cell2</th>
1.273 + </tr>
1.274 + </table>
1.275 +
1.276 + <!-- table with headers attribute -->
1.277 + <table id="table6.2">
1.278 + <tr>
1.279 + <td headers="a">table6.2 cell</td>
1.280 + </tr>
1.281 + </table>
1.282 +
1.283 + <!-- table with scope attribute -->
1.284 + <table id="table6.2.2">
1.285 + <tr>
1.286 + <td scope="a">table6.2.2 cell</td>
1.287 + </tr>
1.288 + </table>
1.289 +
1.290 + <!-- table with abbr attribute -->
1.291 + <table id="table6.2.3">
1.292 + <tr>
1.293 + <td abbr="table6.2.3">table6.2.3 cell1</td>
1.294 + </tr>
1.295 + </table>
1.296 +
1.297 + <!-- table with abbr element -->
1.298 + <table id="table6.3">
1.299 + <tr>
1.300 + <td>table6.3 cell1</td>
1.301 + <td><abbr>table6.3 cell2</abbr></td>
1.302 + </tr>
1.303 + </table>
1.304 +
1.305 + <!-- table with abbr element having empty text node -->
1.306 + <table id="table6.4">
1.307 + <tr>
1.308 + <td>
1.309 + <abbr>abbr</abbr>
1.310 + </td>
1.311 + </tr>
1.312 + </table>
1.313 +
1.314 + <!-- table with abbr element and non-empty text node -->
1.315 + <table id="table6.5">
1.316 + <tr>
1.317 + <td>
1.318 + This is a really long text (<abbr>tiarlt</abbr>) inside layout table
1.319 + </td>
1.320 + </tr>
1.321 + </table>
1.322 +
1.323 + <!-- layout table with nested table -->
1.324 + <table id="table9">
1.325 + <tr>
1.326 + <td><table><tr><td>Cell</td></tr></table></td>
1.327 + </tr>
1.328 + </table>
1.329 +
1.330 + <!-- layout table with 1 column -->
1.331 + <table id="table10">
1.332 + <tr><td>Row1</td></tr>
1.333 + <tr><td>Row2</td></tr>
1.334 + </table>
1.335 +
1.336 + <!-- layout table with 1 row and purposely many columns -->
1.337 + <table id="table11">
1.338 + <tr><td>Col1</td><td>Col2</td><td>Col3</td><td>Col4</td><td>Col5</td></tr>
1.339 + </table>
1.340 +
1.341 + <!-- table with 5 columns -->
1.342 + <table id="table12">
1.343 + <tr><td>Col1</td><td>Col2</td><td>Col3</td><td>Col4</td><td>Col5</td></tr>
1.344 + <tr><td>Col1</td><td>Col2</td><td>Col3</td><td>Col4</td><td>Col5</td></tr>
1.345 + </table>
1.346 +
1.347 + <!-- table with a bordered cell -->
1.348 + <table id="table13" border="1" width="100%" bordercolor="#0000FF">
1.349 + <tr>
1.350 + <td bordercolor="#000000"> </td>
1.351 + <td bordercolor="#000000"> </td>
1.352 + <td bordercolor="#000000"> </td>
1.353 + </tr>
1.354 + <tr>
1.355 + <td bordercolor="#000000"> </td>
1.356 + <td bordercolor="#000000"> </td>
1.357 + <td bordercolor="#000000"> </td>
1.358 + </tr>
1.359 + </table>
1.360 +
1.361 + <!-- table with alternating row background colors -->
1.362 + <table id="table14" width="100%">
1.363 + <tr style="background-color: #0000FF;">
1.364 + <td> </td>
1.365 + <td> </td>
1.366 + <td> </td>
1.367 + </tr>
1.368 + <tr style="background-color: #00FF00;">
1.369 + <td> </td>
1.370 + <td> </td>
1.371 + <td> </td>
1.372 + </tr>
1.373 + </table>
1.374 +
1.375 + <!-- table with 3 columns and 21 rows -->
1.376 + <table id="table15" border="0">
1.377 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.378 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.379 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.380 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.381 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.382 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.383 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.384 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.385 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.386 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.387 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.388 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.389 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.390 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.391 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.392 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.393 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.394 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.395 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.396 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.397 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.398 + </table>
1.399 +
1.400 + <!-- layout table that has a 100% width -->
1.401 + <table id="table16" width="100%">
1.402 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.403 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.404 + </table>
1.405 +
1.406 + <!-- layout table that has a 95% width in pixels -->
1.407 + <table id="table17" width="98%">
1.408 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.409 + <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
1.410 + </table>
1.411 +
1.412 + <!-- layout table with less than 10 columns -->
1.413 + <table id="table18">
1.414 + <tr>
1.415 + <td>Marco</td>
1.416 + <td>Test</td>
1.417 + <td>June 12</td>
1.418 + </tr>
1.419 + <tr>
1.420 + <td>David</td>
1.421 + <td>Another test</td>
1.422 + <td>June 12</td>
1.423 + </tr>
1.424 + <tr>
1.425 + <td>Alex</td>
1.426 + <td>Third test</td>
1.427 + <td>June 12</td>
1.428 + </tr>
1.429 + </table>
1.430 +
1.431 + <!-- layout table with embedded iframe -->
1.432 + <table id="table19">
1.433 + <tr><td><iframe id="frame"></iframe></td><td> </td><td> </td></tr>
1.434 + <tr><td> </td><td> </td><td> </td></tr>
1.435 + <tr><td> </td><td> </td><td> </td></tr>
1.436 + <tr><td> </td><td> </td><td> </td></tr>
1.437 + </table>
1.438 +
1.439 + <!-- tree grid, no layout table -->
1.440 + <table id="table20" role="treegrid">
1.441 + <tr role="treeitem"><td>Cell1</td><td>Cell2</td></tr>
1.442 + </table>
1.443 +
1.444 + <!-- layout table with nested data table containing data table elements -->
1.445 + <table id="table21">
1.446 + <tr>
1.447 + <td>
1.448 + <table>
1.449 + <caption>table</caption>
1.450 + <tr><td>Cell</td></tr>
1.451 + </table>
1.452 + </td>
1.453 + </tr>
1.454 + </table>
1.455 + <table id="table21.2">
1.456 + <tr>
1.457 + <td>
1.458 + <table>
1.459 + <colgroup width="20"></colgroup>
1.460 + <tr><th>Cell</th></tr>
1.461 + </table>
1.462 + </td>
1.463 + </tr>
1.464 + </table>
1.465 + <table id="table21.3">
1.466 + <tr>
1.467 + <td>
1.468 + <table>
1.469 + <col width="20"></col>
1.470 + <tr><th>Cell</th></tr>
1.471 + </table>
1.472 + </td>
1.473 + </tr>
1.474 + </table>
1.475 + <table id="table21.4">
1.476 + <tr>
1.477 + <td>
1.478 + <table>
1.479 + <tr><th>Cell</th></tr>
1.480 + </table>
1.481 + </td>
1.482 + </tr>
1.483 + </table>
1.484 + <table id="table21.5">
1.485 + <tr>
1.486 + <td>
1.487 + <table>
1.488 + <thead>
1.489 + <tr><td>Cell</td></tr>
1.490 + </thead>
1.491 + </table>
1.492 + </td>
1.493 + </tr>
1.494 + </table>
1.495 + <table id="table21.6">
1.496 + <tr>
1.497 + <td>
1.498 + <table>
1.499 + <tfoot>
1.500 + <tr><td>Cell</td></tr>
1.501 + </tfoot>
1.502 + </table>
1.503 + </td>
1.504 + </tr>
1.505 + </table>
1.506 +
1.507 + <!-- layout table with datatable="0" and tfoot element-->
1.508 + <table id="table22" datatable="0">
1.509 + <tfoot>
1.510 + <tr>
1.511 + <td>Cell1</td><td>cell2</td>
1.512 + </tr>
1.513 + </tfoot>
1.514 + </table>
1.515 +
1.516 + <!-- css table with noon-table tag -->
1.517 + <div id="table23" style="display:table;">
1.518 + <div style="display:table-row;">
1.519 + <div style="display:table-cell;">Row 1, column 1</div>
1.520 + <div style="display:table-cell;">Row 1, column 2</div>
1.521 + <div style="display:table-cell;">Row 1, column 3</div>
1.522 + </div>
1.523 + </div>
1.524 +</body>
1.525 +</html>
