accessible/tests/mochitest/jsat/test_tables.html

Thu, 22 Jan 2015 13:21:57 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Thu, 22 Jan 2015 13:21:57 +0100
branch
TOR_BUG_9701
changeset 15
b8a032363ba2
permissions
-rw-r--r--

Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6

michael@0 1 <html>
michael@0 2 <head>
michael@0 3 <title>[AccessFu] Improve reading of table semantics</title>
michael@0 4
michael@0 5 <link rel="stylesheet" type="text/css"
michael@0 6 href="chrome://mochikit/content/tests/SimpleTest/test.css" />
michael@0 7 <script type="application/javascript"
michael@0 8 src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
michael@0 9 <script type="application/javascript"
michael@0 10 src="../common.js"></script>
michael@0 11 <script type="application/javascript"
michael@0 12 src="output.js"></script>
michael@0 13 <script type="application/javascript">
michael@0 14
michael@0 15 function doTest() {
michael@0 16 // Test the following accOrElmOrID.
michael@0 17 var tests = [{
michael@0 18 accOrElmOrID: "table1",
michael@0 19 expectedUtterance: [["table with 2 columns and 2 rows",
michael@0 20 "Column 1 Row 1", "col1", "Column 2 Row 1", "col2",
michael@0 21 "Column 1 Row 2 col1", "cell1", "Column 2 Row 2 col2", "cell2"], [
michael@0 22 "col1", "Column 1 Row 1", "col2", "Column 2 Row 1", "cell1",
michael@0 23 "Column 1 Row 2 col1", "cell2", "Column 2 Row 2 col2",
michael@0 24 "table with 2 columns and 2 rows"]],
michael@0 25 expectedBraille: [["tbl 2c 2r", "c1r1", "col1", "c2r1", "col2",
michael@0 26 "c1r2 col1", "cell1", "c2r2 col2", "cell2"], ["col1", "c1r1", "col2",
michael@0 27 "c2r1", "cell1", "c1r2 col1", "cell2", "c2r2 col2", "tbl 2c 2r"]]
michael@0 28 }, {
michael@0 29 accOrElmOrID: "table2",
michael@0 30 expectedUtterance: [["table with 2 columns and 2 rows",
michael@0 31 "Column 1 Row 1 col1", "cell1", "Column 2 Row 1 col2",
michael@0 32 "table with 1 column and 2 rows", "Column 1 Row 1", "colheader",
michael@0 33 "Column 1 Row 2 colheader", "bla", "Column 1 Row 2", "col1",
michael@0 34 "Column 2 Row 2", "col2"], ["cell1", "Column 1 Row 1 col1",
michael@0 35 "colheader", "Column 1 Row 1", "bla", "Column 1 Row 2 colheader",
michael@0 36 "table with 1 column and 2 rows", "Column 2 Row 1 col2", "col1",
michael@0 37 "Column 1 Row 2", "col2", "Column 2 Row 2",
michael@0 38 "table with 2 columns and 2 rows"]],
michael@0 39 expectedBraille: [["tbl 2c 2r", "c1r1 col1", "cell1", "c2r1 col2",
michael@0 40 "tbl 1c 2r", "c1r1", "colheader", "c1r2 colheader", "bla", "c1r2",
michael@0 41 "col1", "c2r2", "col2"], ["cell1", "c1r1 col1", "colheader", "c1r1",
michael@0 42 "bla", "c1r2 colheader", "tbl 1c 2r", "c2r1 col2", "col1", "c1r2",
michael@0 43 "col2", "c2r2", "tbl 2c 2r"]]
michael@0 44 }, {
michael@0 45 accOrElmOrID: "table3",
michael@0 46 expectedUtterance: [["table with 2 columns and 2 rows",
michael@0 47 "Column 2 Row 1 col2", "table with 1 column and 2 rows",
michael@0 48 "Column 1 Row 1", "colheader", "Column 1 Row 2 colheader", "bla"], [
michael@0 49 "colheader", "Column 1 Row 1", "bla", "Column 1 Row 2 colheader",
michael@0 50 "table with 1 column and 2 rows", "Column 2 Row 1 col2",
michael@0 51 "table with 2 columns and 2 rows"]],
michael@0 52 expectedBraille: [["tbl 1c 2r", "c1r1", "colheader", "c1r2 colheader",
michael@0 53 "bla"], ["colheader", "c1r1", "bla", "c1r2 colheader", "tbl 1c 2r"]]
michael@0 54 }, {
michael@0 55 accOrElmOrID: "table4",
michael@0 56 expectedUtterance: [["table with 4 columns and 3 rows",
michael@0 57 "Column 1 Row 1", "col1", "Column 2 Row 1", "col2", "Column 3 Row 1",
michael@0 58 "col3", "Column 1 Row 2 spans 2 columns col1", "row1",
michael@0 59 "Column 3 Row 2 col3 row1", "cell1",
michael@0 60 "Column 4 Row 2 spans 2 rows row1", "cell2", "Column 1 Row 3 col1",
michael@0 61 "row2", "Column 2 Row 3 col2 row2", "cell3",
michael@0 62 "Column 3 Row 3 col3 row2", "cell4"], ["col1", "Column 1 Row 1",
michael@0 63 "col2", "Column 2 Row 1", "col3", "Column 3 Row 1", "row1",
michael@0 64 "Column 1 Row 2 spans 2 columns col1", "cell1",
michael@0 65 "Column 3 Row 2 col3 row1", "cell2",
michael@0 66 "Column 4 Row 2 spans 2 rows row1", "row2", "Column 1 Row 3 col1",
michael@0 67 "cell3", "Column 2 Row 3 col2 row2", "cell4",
michael@0 68 "Column 3 Row 3 col3 row2", "table with 4 columns and 3 rows"]],
michael@0 69 expectedBraille: [["tbl 4c 3r", "c1r1", "col1", "c2r1", "col2", "c3r1",
michael@0 70 "col3", "c1r2 col1", "row1", "c3r2 col3 row1", "cell1", "c4r2 row1",
michael@0 71 "cell2", "c1r3 col1", "row2", "c2r3 col2 row2", "cell3",
michael@0 72 "c3r3 col3 row2", "cell4"], ["col1", "c1r1", "col2", "c2r1", "col3",
michael@0 73 "c3r1", "row1", "c1r2 col1", "cell1", "c3r2 col3 row1", "cell2",
michael@0 74 "c4r2 row1", "row2", "c1r3 col1", "cell3", "c2r3 col2 row2", "cell4",
michael@0 75 "c3r3 col3 row2", "tbl 4c 3r"]]
michael@0 76 }, {
michael@0 77 accOrElmOrID: "table5",
michael@0 78 expectedUtterance: [["Row1", "Row2"], ["Row1", "Row2"]],
michael@0 79 expectedBraille: [["Row1", "Row2"], ["Row1", "Row2"]]
michael@0 80 }, {
michael@0 81 // Test pivot to table1_th1 from table1.
michael@0 82 accOrElmOrID: "table1_th1",
michael@0 83 oldAccOrElmOrID: "table1",
michael@0 84 expectedUtterance: [["Column 1 Row 1", "col1"], ["col1",
michael@0 85 "Column 1 Row 1"]],
michael@0 86 expectedBraille: [["c1r1", "col1"], ["col1", "c1r1"]]
michael@0 87 }, {
michael@0 88 // Test pivot to table1_td2 from table1.
michael@0 89 accOrElmOrID: "table1_td2",
michael@0 90 oldAccOrElmOrID: "table1",
michael@0 91 expectedUtterance: [["Column 2 Row 2 col2", "cell2"], ["cell2",
michael@0 92 "Column 2 Row 2 col2"]],
michael@0 93 expectedBraille: [["c2r2 col2", "cell2"], ["cell2", "c2r2 col2"]]
michael@0 94 }, {
michael@0 95 // Test pivot to table1_td2 from table1_th1.
michael@0 96 accOrElmOrID: "table1_td2",
michael@0 97 oldAccOrElmOrID: "table1_th1",
michael@0 98 expectedUtterance: [["Column 2 Row 2 col2", "cell2"], ["cell2",
michael@0 99 "Column 2 Row 2 col2"]],
michael@0 100 expectedBraille: [["c2r2 col2", "cell2"], ["cell2", "c2r2 col2"]]
michael@0 101 }, {
michael@0 102 // Test pivot to table1_td2 from table1_td1.
michael@0 103 accOrElmOrID: "table1_td2",
michael@0 104 oldAccOrElmOrID: "table1_td1",
michael@0 105 expectedUtterance: [["Column 2 col2", "cell2"], ["cell2",
michael@0 106 "Column 2 col2"]],
michael@0 107 expectedBraille: [["c2r2 col2", "cell2"], ["cell2", "c2r2 col2"]]
michael@0 108 }, {
michael@0 109 // Test pivot to table2_cell_1 from table2.
michael@0 110 accOrElmOrID: "table2_cell_1",
michael@0 111 oldAccOrElmOrID: "table2",
michael@0 112 expectedUtterance: [["Column 1 Row 1 col1", "cell1"], ["cell1",
michael@0 113 "Column 1 Row 1 col1"]],
michael@0 114 expectedBraille: [["c1r1 col1", "cell1"], ["cell1", "c1r1 col1"]]
michael@0 115 }, {
michael@0 116 // Test pivot to table2_cell_2 from table2.
michael@0 117 accOrElmOrID: "table2_cell_2",
michael@0 118 oldAccOrElmOrID: "table2",
michael@0 119 expectedUtterance: [["Column 2 Row 1 col2",
michael@0 120 "table with 1 column and 2 rows", "Column 1 Row 1", "colheader",
michael@0 121 "Column 1 Row 2 colheader", "bla"], ["colheader", "Column 1 Row 1",
michael@0 122 "bla", "Column 1 Row 2 colheader", "table with 1 column and 2 rows",
michael@0 123 "Column 2 Row 1 col2"]],
michael@0 124 expectedBraille: [["c2r1 col2", "tbl 1c 2r", "c1r1", "colheader",
michael@0 125 "c1r2 colheader", "bla"], ["colheader", "c1r1", "bla",
michael@0 126 "c1r2 colheader", "tbl 1c 2r", "c2r1 col2"]]
michael@0 127 }, {
michael@0 128 // Test pivot to table2_cell_1 from table2_cell_2.
michael@0 129 accOrElmOrID: "table2_cell_1",
michael@0 130 oldAccOrElmOrID: "table2_cell_2",
michael@0 131 expectedUtterance: [["Column 1 col1", "cell1"], ["cell1",
michael@0 132 "Column 1 col1"]],
michael@0 133 expectedBraille: [["c1r1 col1", "cell1"], ["cell1", "c1r1 col1"]]
michael@0 134 }, {
michael@0 135 // Test pivot to table3_cell from table2.
michael@0 136 accOrElmOrID: "table3_cell",
michael@0 137 oldAccOrElmOrID: "table2",
michael@0 138 expectedUtterance: [["Column 2 Row 1 col2",
michael@0 139 "table with 1 column and 2 rows", "Column 1 Row 2 colheader",
michael@0 140 "bla"], ["bla", "Column 1 Row 2 colheader",
michael@0 141 "table with 1 column and 2 rows", "Column 2 Row 1 col2"]],
michael@0 142 expectedBraille: [["c1r2 colheader", "bla"], ["bla", "c1r2 colheader"]]
michael@0 143 }, {
michael@0 144 // Test pivot to table3_cell from table2_cell_1.
michael@0 145 accOrElmOrID: "table3_cell",
michael@0 146 oldAccOrElmOrID: "table2_cell_1",
michael@0 147 expectedUtterance: [["Column 2 col2", "table with 1 column and 2 rows",
michael@0 148 "Column 1 Row 2 colheader", "bla"], ["bla",
michael@0 149 "Column 1 Row 2 colheader", "table with 1 column and 2 rows",
michael@0 150 "Column 2 Row 1 col2"]],
michael@0 151 expectedBraille: [["c1r2 colheader", "bla"], ["bla", "c1r2 colheader"]]
michael@0 152 }, {
michael@0 153 // Test pivot to table3_cell from table3_ch.
michael@0 154 accOrElmOrID: "table3_cell",
michael@0 155 oldAccOrElmOrID: "table3_ch",
michael@0 156 expectedUtterance: [["Row 2", "bla"], ["bla", "Row 2"]],
michael@0 157 expectedBraille: [["c1r2", "bla"], ["bla", "c1r2"]]
michael@0 158 }, {
michael@0 159 // Test pivot to table3_cell from table1_td1.
michael@0 160 accOrElmOrID: "table3_cell",
michael@0 161 oldAccOrElmOrID: "table1_td1",
michael@0 162 expectedUtterance: [["table with 2 columns and 2 rows",
michael@0 163 "Column 2 Row 1 col2", "table with 1 column and 2 rows",
michael@0 164 "Column 1 Row 2 colheader", "bla"], ["bla",
michael@0 165 "Column 1 Row 2 colheader", "table with 1 column and 2 rows",
michael@0 166 "Column 2 Row 1 col2", "table with 2 columns and 2 rows"]],
michael@0 167 expectedBraille: [["c1r2 colheader", "bla"], ["bla", "c1r2 colheader"]]
michael@0 168 }, {
michael@0 169 // Test pivot to table4_ch_3 from table4.
michael@0 170 accOrElmOrID: "table4_ch_3",
michael@0 171 oldAccOrElmOrID: "table4",
michael@0 172 expectedUtterance: [["Column 3 Row 1", "col3"], ["col3",
michael@0 173 "Column 3 Row 1"]],
michael@0 174 expectedBraille: [["c3r1", "col3"], ["col3", "c3r1"]]
michael@0 175 }, {
michael@0 176 // Test pivot to table4_rh_1 from table4_ch_3.
michael@0 177 accOrElmOrID: "table4_rh_1",
michael@0 178 oldAccOrElmOrID: "table4_ch_3",
michael@0 179 expectedUtterance: [["Column 1 Row 2 spans 2 columns col1", "row1"], [
michael@0 180 "row1", "Column 1 Row 2 spans 2 columns col1"]],
michael@0 181 expectedBraille: [["c1r2 col1", "row1"], ["row1", "c1r2 col1"]]
michael@0 182 }, {
michael@0 183 // Test pivot to table4_cell_3 from table4_rh_1.
michael@0 184 accOrElmOrID: "table4_cell_3",
michael@0 185 oldAccOrElmOrID: "table4_rh_1",
michael@0 186 expectedUtterance: [["Column 4 spans 2 rows", "cell2"], ["cell2",
michael@0 187 "Column 4 spans 2 rows"]],
michael@0 188 expectedBraille: [["c4r2", "cell2"], ["cell2", "c4r2"]]
michael@0 189 }, {
michael@0 190 // Test pivot to table4_cell_5 from table4_cell_3.
michael@0 191 accOrElmOrID: "table4_cell_5",
michael@0 192 oldAccOrElmOrID: "table4_cell_3",
michael@0 193 expectedUtterance: [["Column 2 Row 3 col2 row2", "cell3"], ["cell3",
michael@0 194 "Column 2 Row 3 col2 row2"]],
michael@0 195 expectedBraille: [["c2r3 col2 row2", "cell3"], ["cell3",
michael@0 196 "c2r3 col2 row2"]]
michael@0 197 }];
michael@0 198
michael@0 199 SpecialPowers.setIntPref(PREF_UTTERANCE_ORDER, 0);
michael@0 200
michael@0 201 // Test outputs (utterance and braille) for tables including their
michael@0 202 // headers and cells.
michael@0 203 tests.forEach(function run(test) {
michael@0 204 var outputOrderValues = [0, 1];
michael@0 205 outputOrderValues.forEach(function testOutputOrder(outputOrder) {
michael@0 206 SpecialPowers.setIntPref(PREF_UTTERANCE_ORDER, outputOrder);
michael@0 207 testOutput(test.expectedUtterance[outputOrder], test.accOrElmOrID,
michael@0 208 test.oldAccOrElmOrID, 1);
michael@0 209 testOutput(test.expectedBraille[outputOrder], test.accOrElmOrID,
michael@0 210 test.oldAccOrElmOrID, 0);
michael@0 211 });
michael@0 212 });
michael@0 213
michael@0 214 // If there was an original utterance order preference, revert to it.
michael@0 215 SpecialPowers.clearUserPref(PREF_UTTERANCE_ORDER);
michael@0 216 SimpleTest.finish();
michael@0 217 }
michael@0 218
michael@0 219 SimpleTest.waitForExplicitFinish();
michael@0 220 addA11yLoadEvent(doTest);
michael@0 221 </script>
michael@0 222 </head>
michael@0 223 <body>
michael@0 224 <div id="root">
michael@0 225 <a target="_blank"
michael@0 226 href="https://bugzilla.mozilla.org/show_bug.cgi?id=830748"
michael@0 227 title="[AccessFu] Improve reading of table semantics">
michael@0 228 Mozilla Bug 830748
michael@0 229 </a>
michael@0 230 <p id="display"></p>
michael@0 231 <div id="content" style="display: none"></div>
michael@0 232 <pre id="test"></pre>
michael@0 233 <table id="table1">
michael@0 234 <thead>
michael@0 235 <tr>
michael@0 236 <th id="table1_th1">col1</th>
michael@0 237 <th>col2</th>
michael@0 238 </tr>
michael@0 239 </thead>
michael@0 240 <tbody>
michael@0 241 <tr>
michael@0 242 <td id="table1_td1">cell1</td>
michael@0 243 <td id="table1_td2">cell2</td>
michael@0 244 </tr>
michael@0 245 </tbody>
michael@0 246 </table>
michael@0 247 <table id="table2" border="1">
michael@0 248 <tr>
michael@0 249 <td id="table2_cell_1" headers="table2_ch_1">cell1</td>
michael@0 250 <td id="table2_cell_2" headers="table2_ch_2">
michael@0 251 <table id="table3">
michael@0 252 <thead>
michael@0 253 <tr>
michael@0 254 <th id="table3_ch">colheader</th>
michael@0 255 </tr>
michael@0 256 </thead>
michael@0 257 <tbody>
michael@0 258 <tr>
michael@0 259 <td id="table3_cell">bla</td>
michael@0 260 </tr>
michael@0 261 </tbody>
michael@0 262 </table>
michael@0 263 </td>
michael@0 264 </tr>
michael@0 265 <tr>
michael@0 266 <td id="table2_ch_1" scope="col">col1</td>
michael@0 267 <td id="table2_ch_2" scope="col">col2</td>
michael@0 268 </tr>
michael@0 269 </table>
michael@0 270 <table id="table4" border="1">
michael@0 271 <thead>
michael@0 272 <tr>
michael@0 273 <th id="table4_ch_1">col1</th>
michael@0 274 <th id="table4_ch_2">col2</th>
michael@0 275 <td id="table4_ch_3" scope="col">col3</td>
michael@0 276 </tr>
michael@0 277 </thead>
michael@0 278 <tbody>
michael@0 279 <tr>
michael@0 280 <th id="table4_rh_1" colspan="2">row1</th>
michael@0 281 <td id="table4_cell_2">cell1</td>
michael@0 282 <td id="table4_cell_3" rowspan="2">cell2</td>
michael@0 283 </tr>
michael@0 284 <tr>
michael@0 285 <td id="table4_rh_2" scope="row">row2</td>
michael@0 286 <td id="table4_cell_5">cell3</td>
michael@0 287 <td id="table4_cell_6">cell4</td>
michael@0 288 </tr>
michael@0 289 </tbody>
michael@0 290 </table>
michael@0 291 <table id="table5">
michael@0 292 <tr><td>Row1</td></tr>
michael@0 293 <tr><td>Row2</td></tr>
michael@0 294 </table>
michael@0 295 </div>
michael@0 296 </body>
michael@0 297 </html>

mercurial