test_aria_grid.html (8580B)
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 // grid having rowgroups 19 20 var accTree = 21 { GRID: [ 22 { ROWGROUP: [ 23 { ROW: [ 24 { GRID_CELL: [ 25 { TEXT_LEAF: [ ] }, 26 ] }, 27 ] }, 28 ] }, 29 ] }; 30 31 testAccessibleTree("grid", accTree); 32 33 // //////////////////////////////////////////////////////////////////////// 34 // strange grids (mix of ARIA and HTML tables) 35 36 accTree = { 37 role: ROLE_GRID, 38 children: [ 39 { // div@role="row" 40 role: ROLE_ROW, 41 tagName: "DIV", 42 children: [ 43 { // caption text leaf 44 role: ROLE_TEXT_LEAF, 45 name: "caption", 46 children: [ ], 47 }, 48 { // th generic accessible 49 role: ROLE_TEXT_CONTAINER, 50 children: [ 51 { // th text leaf 52 role: ROLE_TEXT_LEAF, 53 name: "header1", 54 children: [ ], 55 }, 56 ], 57 }, 58 { // td@role="columnheader" 59 role: ROLE_COLUMNHEADER, 60 name: "header2", 61 children: [ { TEXT_LEAF: [ ] } ], 62 }, 63 ], 64 }, 65 ], 66 }; 67 testAccessibleTree("strange_grid1", accTree); 68 69 accTree = { 70 role: ROLE_GRID, 71 children: [ 72 { // tr@role="row" 73 role: ROLE_ROW, 74 tagName: "TR", 75 children: [ 76 { // td implicit role="gridcell" 77 role: ROLE_GRID_CELL, 78 children: [ 79 { // td text leaf 80 role: ROLE_TEXT_LEAF, 81 name: "cell1", 82 children: [ ], 83 }, 84 ], 85 }, 86 { // td@role="gridcell" 87 role: ROLE_GRID_CELL, 88 name: "cell2", 89 children: [ { TEXT_LEAF: [ ] } ], 90 }, 91 ], 92 }, 93 ], 94 }; 95 testAccessibleTree("strange_grid2", accTree); 96 97 accTree = { 98 role: ROLE_GRID, 99 children: [ 100 { // div@role="row" 101 role: ROLE_ROW, 102 children: [ 103 { // div@role="gridcell" 104 role: ROLE_GRID_CELL, 105 children: [ 106 { // td generic accessible 107 role: ROLE_TEXT_CONTAINER, 108 children: [ 109 { // text leaf from presentational table 110 role: ROLE_TEXT_LEAF, 111 name: "cell3", 112 children: [ ], 113 }, 114 ], 115 }, 116 ], 117 }, 118 ], 119 }, 120 ], 121 }; 122 testAccessibleTree("strange_grid3", accTree); 123 124 accTree = { 125 role: ROLE_GRID, 126 children: [ 127 { // div@role="row" 128 role: ROLE_ROW, 129 children: [ 130 { // div@role="gridcell" 131 role: ROLE_GRID_CELL, 132 children: [ 133 { // table 134 role: ROLE_TABLE, 135 children: [ 136 { // tr 137 role: ROLE_ROW, 138 children: [ 139 { // td 140 role: ROLE_CELL, 141 children: [ 142 { // caption text leaf of presentational table 143 role: ROLE_TEXT_LEAF, 144 name: "caption", 145 children: [ ], 146 }, 147 { // td generic accessible 148 role: ROLE_TEXT_CONTAINER, 149 children: [ 150 { // td text leaf of presentational table 151 role: ROLE_TEXT_LEAF, 152 name: "cell4", 153 children: [ ], 154 }, 155 ], 156 }, 157 ], 158 }, 159 ], 160 }, 161 ], 162 }, 163 ], 164 }, 165 ], 166 }, 167 ], 168 }; 169 170 testAccessibleTree("strange_grid4", accTree); 171 172 // //////////////////////////////////////////////////////////////////////// 173 // grids that could contain whitespace accessibles but shouldn't. 174 175 accTree = 176 { TREE_TABLE: [ 177 { ROW: [ 178 { GRID_CELL: [ 179 { TEXT_LEAF: [ ] }, 180 ] }, 181 { GRID_CELL: [ 182 { TEXT_LEAF: [ ] }, 183 ] }, 184 { GRID_CELL: [ 185 { TEXT_LEAF: [ ] }, 186 ] }, 187 ] }, 188 ] }; 189 190 testAccessibleTree("whitespaces-grid", accTree); 191 192 // grids that could contain text container accessibles but shouldn't. 193 194 accTree = 195 { GRID: [ 196 { ROW: [ 197 { GRID_CELL: [ 198 { TEXT_LEAF: [ ] }, 199 ] }, 200 { GRID_CELL: [ 201 { TEXT_LEAF: [ ] }, 202 ] }, 203 ] }, 204 { ROW: [ 205 { GRID_CELL: [ 206 { TEXT_LEAF: [ ] }, 207 ] }, 208 { GRID_CELL: [ 209 { TEXT_LEAF: [ ] }, 210 ] }, 211 ] }, 212 ] }; 213 214 testAccessibleTree("gridWithPresentationalBlockElement", accTree); 215 216 SimpleTest.finish(); 217 } 218 219 SimpleTest.waitForExplicitFinish(); 220 addA11yLoadEvent(doTest); 221 </script> 222 </head> 223 <body> 224 225 <a target="_blank" 226 title="Support ARIA role rowgroup" 227 href="https://bugzilla.mozilla.org/show_bug.cgi?id=525909"> 228 Mozilla Bug 525909 229 </a> 230 <p id="display"></p> 231 <div id="content" style="display: none"></div> 232 <pre id="test"> 233 </pre> 234 235 <div id="grid" role="grid"> 236 <div role="rowgroup"> 237 <div role="row"> 238 <div role="gridcell">cell</div> 239 </div> 240 </div> 241 </div> 242 243 <div id="strange_grid1" role="grid"> 244 <div role="row"> 245 <table role="presentation"> 246 <caption>caption</caption> 247 <tr> 248 <th>header1</th> 249 <td role="columnheader">header2</td> 250 </tr> 251 </table> 252 </div> 253 </div> 254 255 <div id="strange_grid2" role="grid"> 256 <table role="presentation"> 257 <tr role="row"> 258 <td id="implicit_gridcell">cell1</td> 259 <td role="gridcell">cell2</td> 260 </tr> 261 </table> 262 </div> 263 264 <div id="strange_grid3" role="grid"> 265 <div role="row"> 266 <div role="gridcell"> 267 <table role="presentation"> 268 <tr> 269 <td>cell3</td> 270 </tr> 271 </table> 272 </div> 273 </div> 274 </div> 275 276 <div id="strange_grid4" role="grid"> 277 <div role="row"> 278 <div role="gridcell"> 279 <table> 280 <tr> 281 <td> 282 <table role="presentation"> 283 <caption>caption</caption> 284 <tr><td>cell4</td></tr> 285 </table> 286 </td> 287 </tr> 288 </table> 289 </div> 290 </div> 291 </div> 292 293 <div role="treegrid" id="whitespaces-grid"> 294 <div role="row" aria-selected="false" tabindex="-1"> 295 <span role="gridcell">03:30PM-04:30PM</span> 296 <span role="gridcell" style="font-weight:bold;">test</span> 297 <span role="gridcell">a user1</span> 298 </div> 299 </div> 300 301 <div id="gridWithPresentationalBlockElement" role="grid"> 302 <span style="display: block;"> 303 <div role="row"> 304 <div role="gridcell">Cell 1</div> 305 <div role="gridcell">Cell 2</div> 306 </div> 307 </span> 308 <span style="display: block;"> 309 <div role="row"> 310 <span style="display: block;"> 311 <div role="gridcell">Cell 3</div> 312 <div role="gridcell">Cell 4</div> 313 </span> 314 </div> 315 </span> 316 </div> 317 </body> 318 </html>