test_indexes_ariagrid.html (4610B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Table indexes for ARIA grid 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="../attributes.js"></script> 14 <script type="application/javascript" 15 src="../table.js"></script> 16 17 <script type="application/javascript"> 18 function doTest() { 19 // //////////////////////////////////////////////////////////////////////// 20 // ARIA grid 21 var idxes = [ 22 [0, 1, 2], 23 [3, 4, 5], 24 [6, 7, 8], 25 [9, 10, 11], 26 ]; 27 testTableIndexes("grid", idxes); 28 29 idxes = [ 30 [0, 1, 2], 31 [3, 4, 5], 32 [6, 7, 8], 33 [9, 10, 11], 34 ]; 35 testTableIndexes("grid-rowgroups", idxes); 36 37 // //////////////////////////////////////////////////////////////////////// 38 // a bit strange ARIA grid 39 idxes = [ 40 [0, 1], 41 [2, 3], 42 ]; 43 testTableIndexes("grid2", idxes); 44 45 // an ARIA grid with div wrapping cell and div wrapping row 46 idxes = [ 47 [0, 1], 48 [2, 3], 49 [4, 5], 50 ]; 51 testTableIndexes("grid3", idxes); 52 53 SimpleTest.finish(); 54 } 55 56 SimpleTest.waitForExplicitFinish(); 57 addA11yLoadEvent(doTest); 58 </script> 59 </head> 60 <body> 61 62 <a target="_blank" 63 href="https://bugzilla.mozilla.org/show_bug.cgi?id=386813" 64 title="support nsIAccessibleTable on ARIA grid/treegrid">Mozilla Bug 386813</a> 65 <a target="_blank" 66 title="nsHTMLTableCellAccessible is used in dojo's ARIA grid" 67 href="https://bugzilla.mozilla.org/show_bug.cgi?id=513848">Mozilla Bug 513848</a> 68 <a target="_blank" 69 title="ARIA grid with rowgroup breaks table row/col counting and indices" 70 href="https://bugzilla.mozilla.org/show_bug.cgi?id=761853">Mozilla Bug 761853</a> 71 72 <p id="display"></p> 73 <div id="content" style="display: none"></div> 74 <pre id="test"> 75 </pre> 76 77 <div role="grid" id="grid"> 78 <div role="row"> 79 <span role="columnheader">column1</span> 80 <span role="columnheader">column2</span> 81 <span role="columnheader">column3</span> 82 </div> 83 <div role="row"> 84 <span role="rowheader">row1</span> 85 <span role="gridcell">cell1</span> 86 <span role="gridcell">cell2</span> 87 </div> 88 <div role="row"> 89 <span role="rowheader">row2</span> 90 <span role="gridcell">cell3</span> 91 <span role="gridcell">cell4</span> 92 </div> 93 <div role="row"> 94 <span role="rowheader">row3</span> 95 <span role="gridcell">cell5</span> 96 <span role="gridcell">cell6</span> 97 </div> 98 </div> 99 100 <div role="grid" id="grid-rowgroups"> 101 <div role="row"> 102 <span role="columnheader">grid-rowgroups-col1</span> 103 <span role="columnheader">grid-rowgroups-col2</span> 104 <span role="columnheader">grid-rowgroups-col3</span> 105 </div> 106 <div role="rowgroup"> 107 <div role="row"> 108 <span role="rowheader">grid-rowgroups-row1</span> 109 <span role="gridcell">grid-rowgroups-cell1</span> 110 <span role="gridcell">grid-rowgroups-cell2</span> 111 </div> 112 <div role="row"> 113 <span role="rowheader">grid-rowgroups-row2</span> 114 <span role="gridcell">grid-rowgroups-cell3</span> 115 <span role="gridcell">grid-rowgroups-cell4</span> 116 </div> 117 </div> 118 <div role="row"> 119 <span role="rowheader">grid-rowgroups-row3</span> 120 <span role="gridcell">grid-rowgroups-cell5</span> 121 <span role="gridcell">grid-rowgroups-cell6</span> 122 </div> 123 </div> 124 125 <div role="grid" id="grid2"> 126 <div role="row"> 127 <table role="presentation"> 128 <tr> 129 <td role="columnheader">header1</td> 130 <td role="columnheader">header2</td> 131 </tr> 132 </table> 133 </div> 134 <div role="row"> 135 <table role="presentation"> 136 <tr> 137 <td role="gridcell">cell1</td> 138 <td role="gridcell" tabindex="-1">cell2</td> 139 </tr> 140 </table> 141 </div> 142 </div> 143 144 <div role="grid" id="grid3"> 145 <div role="row"> 146 <div role="gridcell">Normal cell</div> 147 <div role="gridcell">1</div> 148 </div> 149 <div role="row"> 150 <div role="gridcell">Div</div> 151 <div><div role="gridcell">2</div></div> 152 </div> 153 <div tabindex="-1"><div role="row"> 154 <div role="gridcell">Cell in row in div</div> 155 <div role="gridcell">3</div> 156 </div></div> 157 </div> 158 </body> 159 </html>