test_sels_ariagrid.html (4829B)
1 <!DOCTYPE html> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=410052 5 --> 6 <head> 7 <title>nsIAccesible selection methods testing for ARIA grid</title> 8 <link rel="stylesheet" type="text/css" 9 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 10 11 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 12 13 <script type="application/javascript" 14 src="../common.js"></script> 15 <script type="application/javascript" 16 src="../role.js"></script> 17 <script type="application/javascript" 18 src="../states.js"></script> 19 <script type="application/javascript" 20 src="../table.js"></script> 21 22 <script type="application/javascript"> 23 function doTest() { 24 // //////////////////////////////////////////////////////////////////////// 25 // ARIA grid 26 var cellsArray = 27 [ 28 [ true, true, false, true], 29 [ true, false, true, true], 30 [ true, false, false, true], 31 [ true, true, true, true], 32 [ true, true, true, true], 33 ]; 34 35 testTableSelection("table", cellsArray); 36 37 // //////////////////////////////////////////////////////////////////////// 38 // a bit strange ARIA grid 39 cellsArray = 40 [ 41 [ false, false], 42 [ false, false], 43 ]; 44 45 testTableSelection("grid2", cellsArray); 46 47 // //////////////////////////////////////////////////////////////////////// 48 // ARIA grid (column and row headers) 49 50 cellsArray = 51 [ 52 [ undefined, true, false], 53 [ undefined, true, false], 54 ]; 55 56 testTableSelection("grid3", cellsArray); 57 58 SimpleTest.finish(); 59 } 60 61 SimpleTest.waitForExplicitFinish(); 62 addA11yLoadEvent(doTest); 63 </script> 64 </head> 65 <body> 66 67 <a target="_blank" 68 title="implement nsIAccessibleTable selection methods for ARIA grids" 69 href="https://bugzilla.mozilla.org/show_bug.cgi?id=410052">Bug 410052</a> 70 <a target="_blank" 71 title="nsHTMLTableCellAccessible is used in dojo's ARIA grid" 72 href="https://bugzilla.mozilla.org/show_bug.cgi?id=513848">Bug 513848</a> 73 <a target="_blank" 74 title="ARIA columnheader/rowheader shouldn't be selectable by default" 75 href="https://bugzilla.mozilla.org/show_bug.cgi?id=888247">Bug 888247</a> 76 77 <p id="display"></p> 78 <div id="content" style="display: none"></div> 79 <pre id="test"> 80 </pre> 81 82 <div role="grid" id="table"> 83 <div role="row"> 84 <span role="gridcell" aria-selected="true">cell1</span> 85 <span role="gridcell" aria-selected="true">cell2</span> 86 <span role="gridcell">cell3</span> 87 <span role="gridcell" aria-selected="true">cell4</span> 88 </div> 89 <div role="row"> 90 <span role="gridcell" aria-selected="true">cell5</span> 91 <span role="gridcell">cell6</span> 92 <span role="gridcell" aria-selected="true">cell7</span> 93 <span role="gridcell" aria-selected="true">cell8</span> 94 </div> 95 <div role="row"> 96 <span role="gridcell" aria-selected="true">cell9</span> 97 <span role="gridcell">cell10</span> 98 <span role="gridcell">cell11</span> 99 <span role="gridcell" aria-selected="true">cell12</span> 100 </div> 101 <div role="row" aria-selected="true"> 102 <span role="gridcell">cell13</span> 103 <span role="gridcell">cell14</span> 104 <span role="gridcell">cell15</span> 105 <span role="gridcell">cell16</span> 106 </div> 107 <div role="row"> 108 <span role="gridcell" aria-selected="true">cell17</span> 109 <span role="gridcell" aria-selected="true">cell18</span> 110 <span role="gridcell" aria-selected="true">cell19</span> 111 <span role="gridcell" aria-selected="true">cell20</span> 112 </div> 113 </div> 114 115 <div role="grid" id="grid2"> 116 <div role="row"> 117 <table role="presentation"> 118 <tr> 119 <td role="columnheader" aria-selected="false">header1</td> 120 <td role="columnheader" aria-selected="false">header2</td> 121 </tr> 122 </table> 123 </div> 124 <div role="row"> 125 <table role="presentation"> 126 <tr> 127 <td role="gridcell">cell1</td> 128 <td role="gridcell" tabindex="-1">cell2</td> 129 </tr> 130 </table> 131 </div> 132 </div> 133 134 <div role="grid" id="grid3"> 135 <div role="row"> 136 <div role="columnheader" id="colheader_default">col header1</div> 137 <div role="columnheader" id="colheader_selected" aria-selected="true">col header2</div> 138 <div role="columnheader" id="colheader_notselected" aria-selected="false">col header3</div> 139 </div> 140 <div role="row"> 141 <div role="rowheader" id="rowheader_default">row header1</div> 142 <div role="rowheader" id="rowheader_selected" aria-selected="true">row header2</div> 143 <div role="rowheader" id="rowheader_notselected" aria-selected="false">row header3</div> 144 </div> 145 </div> 146 </body> 147 </html>