test_aria_owns.html (5831B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <title>@aria-owns attribute testing</title> 6 7 <link rel="stylesheet" type="text/css" 8 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 9 10 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 11 12 <script type="application/javascript" 13 src="../common.js"></script> 14 <script type="application/javascript" 15 src="../role.js"></script> 16 17 <script type="application/javascript"> 18 // ////////////////////////////////////////////////////////////////////////// 19 // Tests 20 // ////////////////////////////////////////////////////////////////////////// 21 22 // enableLogging("tree,verbose"); // debug stuff 23 24 var gQueue = null; 25 26 function doTest() { 27 var tree = 28 { SECTION: [ // t1_1 29 { HEADING: [ // t1_2 30 // no kids, no loop 31 ] }, 32 ] }; 33 testAccessibleTree("t1_1", tree); 34 35 tree = 36 { SECTION: [ // t2_1 37 { GROUPING: [ // t2_2 38 { HEADING: [ // t2_3 39 // no kids, no loop 40 ] }, 41 ] }, 42 ] }; 43 testAccessibleTree("t2_1", tree); 44 45 tree = 46 { GROUPING: [ // t3_1 47 { NOTE: [ // t3_2 48 { HEADING: [ // DOM child of t3_2 49 { SECTION: [ // t3_3 50 // no kids, no loop 51 ] }, 52 ] }, 53 ] }, 54 ] }; 55 testAccessibleTree("t3_1", tree); 56 57 tree = 58 { SECTION: [ // t4_1 59 { GROUPING: [ // DOM child of t4_1, aria-owns ignored 60 // no kids, no loop 61 ] }, 62 ] }; 63 testAccessibleTree("t4_1", tree); 64 65 tree = 66 { SECTION: [ // t5_1 67 { GROUPING: [ // DOM child of t5_1 68 { NOTE: [ // t5_2 69 { HEADING: [ // DOM child of t5_2 70 { FORM: [ // t5_3 71 { TOOLTIP: [ // DOM child of t5_3 72 // no kids, no loop 73 ]}, 74 ]}, 75 ]}, 76 ] }, 77 ] }, 78 ] }; 79 testAccessibleTree("t5_1", tree); 80 81 tree = 82 { SECTION: [ // t6_1 83 { RADIOBUTTON: [ ] }, 84 { CHECKBUTTON: [ ] }, // t6_3, rearranged by aria-owns 85 { PUSHBUTTON: [ ] }, // t6_2, rearranged by aria-owns 86 ] }; 87 testAccessibleTree("t6_1", tree); 88 89 tree = 90 { SECTION: [ // ariaowns_container 91 { SECTION: [ // ariaowns_self 92 { SECTION: [ // ariaowns_uncle 93 ] }, 94 ] }, 95 ] }; 96 testAccessibleTree("ariaowns_container", tree); 97 98 tree = 99 { GRID: [ 100 { ROW: [ 101 { GRID_CELL: [ 102 { TEXT_LEAF: [] }, 103 ] }, 104 { GRID_CELL: [ 105 { TEXT_LEAF: [] }, 106 ] }, 107 ] }, 108 { ROW: [ 109 { GRID_CELL: [ 110 { TEXT_LEAF: [] }, 111 ] }, 112 { GRID_CELL: [ 113 { TEXT_LEAF: [] }, 114 ] }, 115 ] }, 116 ] }; 117 testAccessibleTree("grid", tree); 118 119 tree = 120 { SECTION: [ // presentation_owner 121 // Can't own ancestor, so no children. 122 ] }; 123 testAccessibleTree("presentation_owner", tree); 124 125 tree = 126 { GROUPING: [ // t7 127 { SECTION: [ // t7_1 128 { SECTION: [ // t7_2 129 { SECTION: [ { TEXT_LEAF: [] } ] }, 130 ] }, 131 ] }, 132 { role: ROLE_PUSHBUTTON, name: "heck yes" }, 133 ] }; 134 testAccessibleTree("t7", tree); 135 136 SimpleTest.finish(); 137 } 138 139 SimpleTest.waitForExplicitFinish(); 140 addA11yLoadEvent(doTest); 141 142 </script> 143 </head> 144 145 <body> 146 147 <p id="display"></p> 148 <div id="content" style="display: none"></div> 149 <pre id="test"> 150 </pre> 151 152 <!-- simple loop --> 153 <div id="t1_1" aria-owns="t1_2"></div> 154 <div id="t1_2" aria-owns="t1_1" role="heading"></div> 155 156 <!-- loop --> 157 <div id="t2_2" aria-owns="t2_3" role="group"></div> 158 <div id="t2_1" aria-owns="t2_2"></div> 159 <div id="t2_3" aria-owns="t2_1" role="heading"></div> 160 161 <!-- loop #2 --> 162 <div id="t3_1" aria-owns="t3_2" role="group"></div> 163 <div id="t3_2" role="note"> 164 <div aria-owns="t3_3" role="heading"></div> 165 </div> 166 <div id="t3_3" aria-owns="t3_1"></div> 167 168 <!-- self loop --> 169 <div id="t4_1"><div aria-owns="t4_1" role="group"></div></div> 170 171 <!-- natural and aria-owns hierarchy --> 172 <div id="t5_2" role="note"><div aria-owns="t5_3" role="heading"></div></div> 173 <div id="t5_1"><div aria-owns="t5_2" role="group"></div></div> 174 <div id="t5_3" aria-label="form" role="form"><div aria-owns="t5_1" role="tooltip"></div></div> 175 176 <!-- rearrange children --> 177 <div id="t6_1" aria-owns="t6_3 t6_2"> 178 <div id="t6_2" role="button"></div> 179 <div id="t6_3" role="checkbox"></div> 180 <div role="radio"></div> 181 </div> 182 183 <div id="ariaowns_container"> 184 <div id="ariaowns_self" 185 aria-owns="aria_ownscontainer ariaowns_self ariaowns_uncle"></div> 186 </div> 187 <div id="ariaowns_uncle"></div> 188 189 <!-- grid --> 190 <div aria-owns="grid-row2" role="grid" id="grid"> 191 <div role="row"> 192 <div role="gridcell">cell 1,1</div> 193 <div role="gridcell">cell 1,2</div> 194 </div> 195 </div> 196 <div role="row" id="grid-row2"> 197 <div role="gridcell">cell 2,1</div> 198 <div role="gridcell">cell 2,2</div> 199 </div> 200 201 <!-- Owned child which is an ancestor of its owner but didn't yet exist when 202 aria-owns relocation was processed (bug 1485097). --> 203 <div id="presentation" role="presentation"> 204 <div id="presentation_owner" aria-owns="presentation"></div> 205 </div> 206 207 <div id="t7" role="group"> 208 <div id="t7_1" role="presentation"> 209 <div id="t7_2" role="presentation"> 210 <div aria-owns="t7_2">heck yes</div> 211 </div> 212 </div> 213 <div role="button" aria-labelledby="t7_1"></div> 214 </div> 215 </body> 216 217 </html>