1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/accessible/tests/mochitest/tree/test_aria_grid.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,279 @@
1.4 +<!DOCTYPE html>
1.5 +<html>
1.6 +<head>
1.7 + <title>HTML table tests</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="../role.js"></script>
1.18 +
1.19 + <script type="application/javascript">
1.20 + function doTest()
1.21 + {
1.22 + //////////////////////////////////////////////////////////////////////////
1.23 + // grid having rowgroups
1.24 +
1.25 + var accTree =
1.26 + { TABLE: [
1.27 + { GROUPING: [
1.28 + { ROW: [
1.29 + { GRID_CELL: [
1.30 + { TEXT_LEAF: [ ] }
1.31 + ] }
1.32 + ] }
1.33 + ] },
1.34 + ] };
1.35 +
1.36 + testAccessibleTree("grid", accTree);
1.37 +
1.38 + //////////////////////////////////////////////////////////////////////////
1.39 + // crazy grids (mad mix of ARIA and HTML tables)
1.40 +
1.41 + accTree = {
1.42 + role: ROLE_TABLE,
1.43 + children: [
1.44 + { // div@role="row"
1.45 + role: ROLE_ROW,
1.46 + tagName: "DIV",
1.47 + children: [
1.48 + { // caption text leaf
1.49 + role: ROLE_TEXT_LEAF,
1.50 + name: "caption",
1.51 + children: [ ]
1.52 + },
1.53 + { // th generic accessible
1.54 + role: ROLE_TEXT_CONTAINER,
1.55 + children: [
1.56 + { // th text leaf
1.57 + role: ROLE_TEXT_LEAF,
1.58 + name: "header1",
1.59 + children: [ ]
1.60 + }
1.61 + ]
1.62 + },
1.63 + { // td@role="columnheader"
1.64 + role: ROLE_COLUMNHEADER,
1.65 + name: "header2",
1.66 + children: [ { TEXT_LEAF: [ ] } ]
1.67 + }
1.68 + ]
1.69 + }
1.70 + ]
1.71 + };
1.72 + testAccessibleTree("crazy_grid1", accTree);
1.73 +
1.74 + accTree = {
1.75 + role: ROLE_TABLE,
1.76 + children: [
1.77 + { // tr@role="row"
1.78 + role: ROLE_ROW,
1.79 + tagName: "TR",
1.80 + children: [
1.81 + { // td generic accessible
1.82 + role: ROLE_TEXT_CONTAINER,
1.83 + children: [
1.84 + { // td text leaf
1.85 + role: ROLE_TEXT_LEAF,
1.86 + name: "cell1",
1.87 + children: [ ]
1.88 + }
1.89 + ]
1.90 + },
1.91 + { // td@role="gridcell"
1.92 + role: ROLE_GRID_CELL,
1.93 + name: "cell2",
1.94 + children: [ { TEXT_LEAF: [ ] } ]
1.95 + }
1.96 + ]
1.97 + }
1.98 + ]
1.99 + };
1.100 + testAccessibleTree("crazy_grid2", accTree);
1.101 +
1.102 + accTree = {
1.103 + role: ROLE_TABLE,
1.104 + children: [
1.105 + { // div@role="row"
1.106 + role: ROLE_ROW,
1.107 + children: [
1.108 + { // div@role="gridcell"
1.109 + role: ROLE_GRID_CELL,
1.110 + children: [
1.111 + { // td generic accessible
1.112 + role: ROLE_TEXT_CONTAINER,
1.113 + children: [
1.114 + { // text leaf from presentational table
1.115 + role: ROLE_TEXT_LEAF,
1.116 + name: "cell3",
1.117 + children: [ ]
1.118 + }
1.119 + ]
1.120 + },
1.121 + ]
1.122 + }
1.123 + ]
1.124 + }
1.125 + ]
1.126 + };
1.127 + testAccessibleTree("crazy_grid3", accTree);
1.128 +
1.129 + accTree = {
1.130 + role: ROLE_TABLE,
1.131 + children: [
1.132 + { // div@role="row"
1.133 + role: ROLE_ROW,
1.134 + children: [
1.135 + { // div@role="gridcell"
1.136 + role: ROLE_GRID_CELL,
1.137 + children: [
1.138 + { // table
1.139 + role: ROLE_TABLE,
1.140 + children: [
1.141 + { // tr
1.142 + role: ROLE_ROW,
1.143 + children: [
1.144 + { // td
1.145 + role: ROLE_CELL,
1.146 + children: [
1.147 + { // caption text leaf of presentational table
1.148 + role: ROLE_TEXT_LEAF,
1.149 + name: "caption",
1.150 + children: [ ]
1.151 + },
1.152 + { // td generic accessible
1.153 + role: ROLE_TEXT_CONTAINER,
1.154 + children: [
1.155 + { // td text leaf of presentational table
1.156 + role: ROLE_TEXT_LEAF,
1.157 + name: "cell4",
1.158 + children: [ ]
1.159 + }
1.160 + ]
1.161 + }
1.162 + ]
1.163 + }
1.164 + ]
1.165 + }
1.166 + ]
1.167 + }
1.168 + ]
1.169 + }
1.170 + ]
1.171 + }
1.172 + ]
1.173 + };
1.174 +
1.175 + testAccessibleTree("crazy_grid4", accTree);
1.176 +
1.177 + //////////////////////////////////////////////////////////////////////////
1.178 + // grids that could contain whitespace accessibles but shouldn't.
1.179 +
1.180 + var accTree =
1.181 + { TREE_TABLE: [
1.182 + { ROW: [
1.183 + { GRID_CELL: [
1.184 + { TEXT_LEAF: [ ] }
1.185 + ] },
1.186 + { GRID_CELL: [
1.187 + { TEXT_LEAF: [ ] }
1.188 + ] },
1.189 + { GRID_CELL: [
1.190 + { TEXT_LEAF: [ ] }
1.191 + ] }
1.192 + ] },
1.193 + ] };
1.194 +
1.195 + testAccessibleTree("whitespaces-grid", accTree);
1.196 +
1.197 + SimpleTest.finish();
1.198 + }
1.199 +
1.200 + SimpleTest.waitForExplicitFinish();
1.201 + addA11yLoadEvent(doTest);
1.202 + </script>
1.203 +</head>
1.204 +<body>
1.205 +
1.206 + <a target="_blank"
1.207 + title="Support ARIA role rowgroup"
1.208 + href="https://bugzilla.mozilla.org/show_bug.cgi?id=525909">
1.209 + Mozilla Bug 525909
1.210 + </a>
1.211 + <p id="display"></p>
1.212 + <div id="content" style="display: none"></div>
1.213 + <pre id="test">
1.214 + </pre>
1.215 +
1.216 + <div id="grid" role="grid">
1.217 + <div role="rowgroup">
1.218 + <div role="row">
1.219 + <div role="gridcell">cell</div>
1.220 + </div>
1.221 + </div>
1.222 + </div>
1.223 +
1.224 + <div id="crazy_grid1" role="grid">
1.225 + <div role="row">
1.226 + <table role="presentation">
1.227 + <caption>caption</caption>
1.228 + <tr>
1.229 + <th>header1</th>
1.230 + <td role="columnheader">header2</td>
1.231 + </tr>
1.232 + </table>
1.233 + </div>
1.234 + </div>
1.235 +
1.236 + <div id="crazy_grid2" role="grid">
1.237 + <table role="presentation">
1.238 + <tr role="row">
1.239 + <td id="ct_cell1">cell1</td>
1.240 + <td role="gridcell">cell2</td>
1.241 + </tr>
1.242 + </table>
1.243 + </div>
1.244 +
1.245 + <div id="crazy_grid3" role="grid">
1.246 + <div role="row">
1.247 + <div role="gridcell">
1.248 + <table role="presentation">
1.249 + <tr>
1.250 + <td>cell3</td>
1.251 + </tr>
1.252 + </table>
1.253 + </div>
1.254 + </div>
1.255 + </div>
1.256 +
1.257 + <div id="crazy_grid4" role="grid">
1.258 + <div role="row">
1.259 + <div role="gridcell">
1.260 + <table>
1.261 + <tr>
1.262 + <td>
1.263 + <table role="presentation">
1.264 + <caption>caption</caption>
1.265 + <tr><td>cell4</td></tr>
1.266 + </table>
1.267 + </td>
1.268 + </tr>
1.269 + </table>
1.270 + </div>
1.271 + </div>
1.272 + </div>
1.273 +
1.274 + <div role="treegrid" id="whitespaces-grid">
1.275 + <div role="row" aria-selected="false" tabindex="-1">
1.276 + <span role="gridcell">03:30PM-04:30PM</span>
1.277 + <span role="gridcell" style="font-weight:bold;">test</span>
1.278 + <span role="gridcell">a user1</span>
1.279 + </div>
1.280 + </div>
1.281 +</body>
1.282 +</html>
