test_list.html (8690B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML ul/li element 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 listItemTree(aBulletText, aName, aSubtree) { 17 var obj = { 18 role: ROLE_LISTITEM, 19 children: [ 20 { 21 role: ROLE_LISTITEM_MARKER, 22 name: aBulletText, 23 }, 24 { 25 role: ROLE_TEXT_LEAF, 26 name: aName, 27 }, 28 ], 29 }; 30 31 if (aSubtree) 32 obj.children.push(aSubtree); 33 34 return obj; 35 } 36 37 function doTest() { 38 // list1 39 var discAccTree = { 40 role: ROLE_LIST, 41 children: [ 42 new listItemTree(kDiscBulletText, "Oranges"), 43 new listItemTree(kDiscBulletText, "Apples"), 44 new listItemTree(kDiscBulletText, "Bananas"), 45 ], 46 }; 47 48 testAccessibleTree("list1", discAccTree); 49 50 // list2 51 var circleAccTree = { 52 role: ROLE_LIST, 53 children: [ 54 new listItemTree(kCircleBulletText, "Oranges"), 55 new listItemTree(kCircleBulletText, "Apples"), 56 new listItemTree(kCircleBulletText, "Bananas"), 57 ], 58 }; 59 60 testAccessibleTree("list2", circleAccTree); 61 62 // list3 63 var squareAccTree = { 64 role: ROLE_LIST, 65 children: [ 66 new listItemTree(kSquareBulletText, "Oranges"), 67 new listItemTree(kSquareBulletText, "Apples"), 68 new listItemTree(kSquareBulletText, "Bananas"), 69 ], 70 }; 71 72 testAccessibleTree("list3", squareAccTree); 73 74 // list4 75 var nestedAccTree = { 76 role: ROLE_LIST, 77 children: [ 78 new listItemTree("1. ", "Oranges"), 79 new listItemTree("2. ", "Apples"), 80 new listItemTree("3. ", "Bananas", circleAccTree), 81 ], 82 }; 83 84 testAccessibleTree("list4", nestedAccTree); 85 86 // dl list 87 var tree = 88 { DEFINITION_LIST: [ // dl 89 { TERM: [ // dt 90 { TEXT_LEAF: [] }, 91 ] }, 92 { DEFINITION: [ // dd 93 { TEXT_LEAF: [] }, 94 ] }, 95 { TERM: [ // dt 96 { TEXT_LEAF: [] }, 97 ] }, 98 { DEFINITION: [ // dd 99 { TEXT_LEAF: [] }, 100 ] }, 101 ] }; 102 103 testAccessibleTree("list5", tree); 104 105 // dl list inside ordered list 106 tree = 107 { LIST: [ // ol 108 { LISTITEM: [ // li 109 { LISTITEM_MARKER: [ ] }, 110 { DEFINITION_LIST: [ // dl 111 { TERM: [ // dt 112 { TEXT_LEAF: [] }, 113 ] }, 114 { DEFINITION: [ // dd 115 { TEXT_LEAF: [] }, 116 ] }, 117 ] }, 118 ] }, 119 ] }; 120 121 testAccessibleTree("list6", tree); 122 123 // li having no display:list-item style 124 tree = 125 { LIST: [ // ul 126 { LISTITEM: [ // li 127 { TEXT_LEAF: [] }, 128 ] }, 129 { TEXT_LEAF: [] }, 130 { LISTITEM: [ // li 131 { TEXT_LEAF: [] }, 132 ] }, 133 ] }; 134 testAccessibleTree("list7", tree); 135 136 tree = 137 { LIST: [ // ul 138 { LISTITEM: [ // li 139 { TEXT_LEAF: [] }, 140 ] }, 141 { LISTITEM: [ // li 142 { TEXT_LEAF: [] }, 143 ] }, 144 ] }; 145 testAccessibleTree("list8", tree); 146 147 // span having display:list-item style 148 testAccessibleTree("list9", discAccTree); 149 150 // dl with div grouping dt/dd 151 tree = 152 { DEFINITION_LIST: [ // dl 153 { TERM: [ // dt 154 { TEXT_LEAF: [] }, 155 ] }, 156 { DEFINITION: [ // dd 157 { TEXT_LEAF: [] }, 158 ] }, 159 { TERM: [ // dt 160 { TEXT_LEAF: [] }, 161 ] }, 162 { DEFINITION: [ // dd 163 { TEXT_LEAF: [] }, 164 ] }, 165 ] }; 166 167 testAccessibleTree("list10", tree); 168 169 // list-style-image 170 testAccessibleTree("list11", discAccTree); 171 172 // list-style: none 173 tree = 174 { LIST: [ // ul 175 { LISTITEM: [ // li 176 { TEXT_LEAF: [] }, 177 ] }, 178 { LISTITEM: [ // li 179 { TEXT_LEAF: [] }, 180 ] }, 181 ] }; 182 testAccessibleTree("list12", tree); 183 184 // ::marker with content 185 tree = { // ol 186 role: ROLE_LIST, 187 children: [ 188 { // li 189 role: ROLE_LISTITEM, 190 children: [ 191 { // ::marker content text and counter 192 role: ROLE_LISTITEM_MARKER, 193 name: "foo1", 194 }, 195 { 196 role: ROLE_TEXT_LEAF, 197 name: "Oranges", 198 }, 199 ], 200 }, 201 { // li 202 role: ROLE_LISTITEM, 203 children: [ 204 { // ::marker content text and counter 205 role: ROLE_LISTITEM_MARKER, 206 name: "foo2", 207 }, 208 { 209 role: ROLE_TEXT_LEAF, 210 name: "Apples", 211 }, 212 ], 213 }, 214 ], 215 }; 216 testAccessibleTree("list13", tree); 217 218 SimpleTest.finish(); 219 } 220 221 SimpleTest.waitForExplicitFinish(); 222 addA11yLoadEvent(doTest); 223 </script> 224 </head> 225 <body> 226 227 <a target="_blank" 228 title="Fix O(n^2) access to all the children of a container" 229 href="https://bugzilla.mozilla.org/show_bug.cgi?id=342045"> 230 Mozilla Bug 342045 231 </a> 232 <a target="_blank" 233 title="Wrong accessible is created for HTML:li having block display style" 234 href="https://bugzilla.mozilla.org/show_bug.cgi?id=507555"> 235 Mozilla Bug 507555 236 </a> 237 <a target="_blank" 238 title="Bullets of nested not ordered lists have one and the same character." 239 href="https://bugzilla.mozilla.org/show_bug.cgi?id=604587"> 240 Mozilla Bug 604587 241 </a> 242 <a target="_blank" 243 title="Fix list bullets for DL list (crash [@ nsBulletFrame::GetListItemText])" 244 href="https://bugzilla.mozilla.org/show_bug.cgi?id=629114"> 245 Mozilla Bug 629114 246 </a> 247 <p id="display"></p> 248 <div id="content" style="display: none"></div> 249 <pre id="test"> 250 </pre> 251 252 <ul id="list1"> 253 <li id="l1_li1">Oranges</li> 254 <li id="l1_li2">Apples</li> 255 <li id="l1_li3">Bananas</li> 256 </ul> 257 258 <ul id="list2" style="list-style-type: circle"> 259 <li id="l2_li1">Oranges</li> 260 <li id="l2_li2">Apples</li> 261 <li id="l2_li3">Bananas</li> 262 </ul> 263 264 <ul id="list3" style="list-style-type: square"> 265 <li id="l3_li1">Oranges</li> 266 <li id="l3_li2">Apples</li> 267 <li id="l3_li3">Bananas</li> 268 </ul> 269 270 <ol id="list4"> 271 <li id="li4">Oranges</li> 272 <li id="li5">Apples</li> 273 <li id="li6">Bananas<ul> 274 <li id="n_li4">Oranges</li> 275 <li id="n_li5">Apples</li> 276 <li id="n_li6">Bananas</li> 277 </ul> 278 </li> 279 </ol> 280 281 <dl id="list5"> 282 <dt>item1</dt><dd>description</dd> 283 <dt>item2</td><dd>description</dd> 284 </dl> 285 286 <ol id="list6"> 287 <li> 288 <dl id="dl"> 289 <dt>item1</dt><dd>description</dd> 290 </dl> 291 </li> 292 </ol> 293 294 <!-- display style different than list-item --> 295 <ul id="list7"> 296 <li id="l7_li1" style="display:inline-block;">Oranges</li> 297 <li id="l7_li2" style="display:inline-block;">Apples</li> 298 </ul> 299 300 <ul id="list8"> 301 <li id="l8_li1" style="display:inline; float:right;">Oranges</li> 302 <li id="l8_li2" style="display:inline; float:right;">Apples</li> 303 </ul> 304 305 <!-- list-item display style --> 306 <ul id="list9"> 307 <span id="l9_li1" style="display:list-item">Oranges</span> 308 <span id="l9_li2" style="display:list-item">Apples</span> 309 <span id="l9_li3" style="display:list-item">Bananas</span> 310 </ul> 311 312 <!-- dl with div grouping dd/dt elements (bug 1476347) --> 313 <dl id="list10"> 314 <div><dt>item1</dt><dd>description</dd></div> 315 <div><dt>item2</td><dd>description</dd></div> 316 </dl> 317 318 <!-- list-style-image --> 319 <ul id="list11" 320 style="list-style-type: none; list-style-image: url('../moz.png');"> 321 <li>Oranges</li> 322 <li>Apples</li> 323 <li>Bananas</li> 324 </ul> 325 326 <!-- list-style: none --> 327 <ul id="list12" style="list-style: none;"> 328 <li>Oranges</li> 329 <li>Apples</li> 330 </ul> 331 332 <!-- ::marker with content --> 333 <style> 334 #list13 li { 335 counter-increment: list13counter; 336 } 337 #list13 li::marker { 338 content: 'foo' counter(list13counter); 339 } 340 </style> 341 <ol id="list13"> 342 <li>Oranges</li> 343 <li>Apples</li> 344 </ol> 345 </body> 346 </html>