test_obj.html (12812B)
1 <html> 2 <!-- 3 https://bugzilla.mozilla.org/show_bug.cgi?id=475006 4 https://bugzilla.mozilla.org/show_bug.cgi?id=391829 5 https://bugzilla.mozilla.org/show_bug.cgi?id=581952 6 https://bugzilla.mozilla.org/show_bug.cgi?id=558036 7 --> 8 <head> 9 <title>Group attributes tests</title> 10 <link rel="stylesheet" type="text/css" 11 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 12 13 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 14 15 <script type="application/javascript" 16 src="../common.js"></script> 17 <script type="application/javascript" 18 src="../attributes.js"></script> 19 20 <script type="application/javascript"> 21 function doTest() { 22 // aria 23 testAttrs("atomic", {"atomic": "true", "container-atomic": "true"}, true); 24 testAttrs(getNode("atomic").firstChild, {"container-atomic": "true"}, true); 25 testAbsentAttrs("atomic_false", {"atomic": "false", "container-atomic": "false"}); 26 testAbsentAttrs(getNode("atomic_false").firstChild, {"container-atomic": "false"}); 27 28 testAttrs("autocomplete", {"autocomplete": "true"}, true); 29 testAttrs("checkbox", {"checkable": "true"}, true); 30 testAttrs("checkedCheckbox", {"checkable": "true"}, true); 31 testAbsentAttrs("checkedMenuitem", {"checkable": "true"}); 32 testAttrs("checkedMenuitemCheckbox", {"checkable": "true"}, true); 33 testAttrs("checkedMenuitemRadio", {"checkable": "true"}, true); 34 testAttrs("checkedOption", {"checkable": "true"}, true); 35 testAttrs("checkedRadio", {"checkable": "true"}, true); 36 testAttrs("checkedTreeitem", {"checkable": "true"}, true); 37 testAttrs("dropeffect", {"dropeffect": "copy"}, true); 38 testAttrs("grabbed", {"grabbed": "true"}, true); 39 testAttrs("haspopupTrue", { "haspopup": "true" }, true); 40 testAbsentAttrs("haspopupFalse", { "haspopup": "false" }); 41 testAbsentAttrs("haspopupEmpty", { "haspopup": "" }); 42 testAttrs("haspopupDialog", { "haspopup": "dialog" }, true); 43 testAttrs("haspopupListbox", { "haspopup": "listbox" }, true); 44 testAttrs("haspopupMenu", { "haspopup": "menu" }, true); 45 testAttrs("haspopupTree", { "haspopup": "tree" }, true); 46 testAbsentAttrs("modal", {"modal": "true"}); 47 testAttrs("sortAscending", {"sort": "ascending"}, true); 48 testAttrs("sortDescending", {"sort": "descending"}, true); 49 testAttrs("sortNone", {"sort": "none"}, true); 50 testAttrs("sortOther", {"sort": "other"}, true); 51 testAttrs("roledescr", {"roledescription": "spreadshit"}, true); 52 testAttrs("currentPage", {"current": "page"}, true); 53 testAttrs("currentStep", {"current": "step"}, true); 54 testAttrs("currentLocation", {"current": "location"}, true); 55 testAttrs("currentDate", {"current": "date"}, true); 56 testAttrs("currentTime", {"current": "time"}, true); 57 testAttrs("currentTrue", {"current": "true"}, true); 58 testAttrs("currentOther", {"current": "true"}, true); 59 testAbsentAttrs("currentFalse", {"current": "true"}); 60 testAttrs("currentSpan", {"current": "page"}, true); 61 62 // live object attribute 63 64 // HTML 65 testAttrs("output", {"live": "polite"}, true); 66 67 // ARIA 68 testAttrs("live", {"live": "polite"}, true); 69 testAttrs("live2", {"live": "polite"}, true); 70 testAbsentAttrs("live3", {"live": ""}); 71 if (MAC) { 72 testAttrs("alert", {"live": "assertive"}, true); 73 } else { 74 testAbsentAttrs("alert", {"live": "assertive"}); 75 } 76 testAttrs("log", {"live": "polite"}, true); 77 testAttrs("logAssertive", {"live": "assertive"}, true); 78 testAttrs("marquee", {"live": "off"}, true); 79 testAttrs("status", {"live": "polite"}, true); 80 testAttrs("timer", {"live": "off"}, true); 81 testAbsentAttrs("tablist", {"live": "polite"}); 82 83 // container-live object attribute 84 testAttrs("liveChild", {"container-live": "polite"}, true); 85 testAttrs("live2Child", {"container-live": "polite"}, true); 86 if (MAC) { 87 testAttrs("alertChild", {"container-live": "assertive"}, true); 88 } else { 89 testAbsentAttrs("alertChild", {"container-live": "assertive"}); 90 } 91 testAttrs("logChild", {"container-live": "polite"}, true); 92 testAttrs("logAssertiveChild", {"container-live": "assertive"}, true); 93 testAttrs("marqueeChild", {"container-live": "off"}, true); 94 testAttrs("statusChild", {"container-live": "polite"}, true); 95 testAttrs("timerChild", {"container-live": "off"}, true); 96 testAbsentAttrs("tablistChild", {"container-live": "polite"}); 97 testAttrs("containerLiveOutput", {"container-live": "polite"}, true); 98 testAttrs("containerLiveOutput1", {"container-live": "polite"}, true); 99 testAttrs("containerLiveOutput2", {"container-live": "polite"}, true); 100 101 // container-live-role object attribute 102 testAttrs("log", {"container-live-role": "log"}, true); 103 testAttrs("logAssertive", {"container-live-role": "log"}, true); 104 testAttrs("marquee", {"container-live-role": "marquee"}, true); 105 testAttrs("status", {"container-live-role": "status"}, true); 106 testAttrs("timer", {"container-live-role": "timer"}, true); 107 testAttrs("logChild", {"container-live-role": "log"}, true); 108 testAttrs("logAssertive", {"container-live-role": "log"}, true); 109 testAttrs("logAssertiveChild", {"container-live-role": "log"}, true); 110 testAttrs("marqueeChild", {"container-live-role": "marquee"}, true); 111 testAttrs("statusChild", {"container-live-role": "status"}, true); 112 testAttrs("timerChild", {"container-live-role": "timer"}, true); 113 testAbsentAttrs("tablistChild", {"container-live-role": "tablist"}); 114 115 // absent aria-label and aria-labelledby object attribute 116 testAbsentAttrs("label", {"label": "foo"}); 117 testAbsentAttrs("labelledby", {"labelledby": "label"}); 118 119 // container that has no default live attribute 120 testAttrs("liveGroup", {"live": "polite"}, true); 121 testAttrs("liveGroupChild", {"container-live": "polite"}, true); 122 testAttrs("liveGroup", {"container-live-role": "group"}, true); 123 testAttrs("liveGroupChild", {"container-live-role": "group"}, true); 124 125 // text input type 126 testAbsentAttrs("button", { "text-input-type": "button"}); 127 testAbsentAttrs("checkbox", { "text-input-type": "checkbox"}); 128 testAbsentAttrs("radio", { "text-input-type": "radio"}); 129 testAttrs("email", {"text-input-type": "email"}, true); 130 testAttrs("search", {"text-input-type": "search"}, true); 131 testAttrs("tel", {"text-input-type": "tel"}, true); 132 testAttrs("url", {"text-input-type": "url"}, true); 133 testAttrs("number", {"text-input-type": "number"}, true); 134 135 // ARIA 136 testAttrs("searchbox", {"text-input-type": "search"}, true); 137 138 // html 139 testAttrs("radio", {"checkable": "true"}, true); 140 testAttrs("checkbox", {"checkable": "true"}, true); 141 testAttrs("draggable", {"draggable": "true"}, true); 142 testAttrs("th1", { "abbr": "SS#" }, true); 143 testAttrs("th2", { "abbr": "SS#" }, true); 144 testAttrs("th2", { "axis": "social" }, true); 145 146 // don't barf on an empty abbr element. 147 testAbsentAttrs("th3", { "abbr": "" }); 148 149 // no object attributes 150 testAbsentAttrs(getAccessible("listitem").firstChild, { "tag": "" }); 151 152 // experimental aria 153 testAttrs("experimental", {"blah": "true"}, true); 154 155 // HTML5 aside element xml-roles 156 testAttrs("aside0", {"xml-roles": "note"}, true); 157 testAttrs("aside1", {"xml-roles": "group"}, true); 158 testAttrs("aside2", {"xml-roles": "complementary"}, true); 159 160 // non-standard data-at-shortcutkeys attribute: 161 testAttrs("shortcuts", {'data-at-shortcutkeys': '{"n":"New message","r":"Reply to message"}'}, true); 162 163 SimpleTest.finish(); 164 } 165 166 SimpleTest.waitForExplicitFinish(); 167 addA11yLoadEvent(doTest); 168 </script> 169 </head> 170 <body> 171 <p id="display"></p> 172 <div id="content" style="display: none"></div> 173 <pre id="test"> 174 </pre> 175 176 <!-- container live --> 177 <output id="containerLiveOutput"><div id="containerLiveOutput1"><div id="containerLiveOutput2">Test</div></div></output> 178 179 <!-- aria --> 180 <div id="atomic" aria-atomic="true">live region</div> 181 <div id="atomic_false" aria-atomic="false">live region</div> 182 <div id="autocomplete" role="textbox" aria-autocomplete="true"></div> 183 <div id="checkbox" role="checkbox"></div> 184 <div id="checkedCheckbox" role="checkbox" aria-checked="true"></div> 185 <div id="checkedMenuitem" role="menuitem" aria-checked="true"></div> 186 <div id="checkedMenuitemCheckbox" role="menuitemcheckbox" aria-checked="true"></div> 187 <div id="checkedMenuitemRadio" role="menuitemradio" aria-checked="true"></div> 188 <div id="checkedOption" role="option" aria-checked="true"></div> 189 <div id="checkedRadio" role="radio" aria-checked="true"></div> 190 <div id="checkedTreeitem" role="treeitem" aria-checked="true"></div> 191 <div id="dropeffect" aria-dropeffect="copy"></div> 192 <div id="grabbed" aria-grabbed="true"></div> 193 <div id="haspopupTrue" aria-haspopup="true"></div> 194 <div id="haspopupFalse" aria-haspopup="false"></div> 195 <div id="haspopupEmpty" aria-haspopup=""></div> 196 <div id="haspopupDialog" aria-haspopup="dialog"></div> 197 <div id="haspopupListbox" aria-haspopup="listbox"></div> 198 <div id="haspopupMenu" aria-haspopup="menu"></div> 199 <div id="haspopupTree" aria-haspopup="tree"></div> 200 <div id="modal" aria-modal="true"></div> 201 <div id="sortAscending" role="columnheader" aria-sort="ascending"></div> 202 <div id="sortDescending" role="columnheader" aria-sort="descending"></div> 203 <div id="sortNone" role="columnheader" aria-sort="none"></div> 204 <div id="sortOther" role="columnheader" aria-sort="other"></div> 205 <div id="roledescr" aria-roledescription="spreadshit"></div> 206 <div id="currentPage" aria-current="page"></div> 207 <div id="currentStep" aria-current="step"></div> 208 <div id="currentLocation" aria-current="location"></div> 209 <div id="currentDate" aria-current="date"></div> 210 <div id="currentTime" aria-current="time"></div> 211 <div id="currentTrue" aria-current="true"></div> 212 <div id="currentOther" aria-current="other"></div> 213 <div id="currentFalse" aria-current="false"></div> 214 215 <!-- aria-current on a span which must create an accessible --> 216 <ol> 217 <li><a href="...">Page 1</a></li> 218 <li><a href="...">Page 2</a></li> 219 <li><span id="currentSpan" aria-current="page">This page</span></li> 220 </ol> 221 222 <!-- html --> 223 <output id="output"></output> 224 225 <!-- back to aria --> 226 <div id="live" aria-live="polite">excuse <div id="liveChild">me</div></div> 227 <div id="live2" role="marquee" aria-live="polite">excuse <div id="live2Child">me</div></div> 228 <div id="live3" role="region">excuse</div> 229 <div id="alert" role="alert">excuse <div id="alertChild">me</div></div> 230 <div id="log" role="log">excuse <div id="logChild">me</div></div> 231 <div id="logAssertive" role="log" aria-live="assertive">excuse <div id="logAssertiveChild">me</div></div> 232 <div id="marquee" role="marquee">excuse <div id="marqueeChild">me</div></div> 233 <div id="status" role="status">excuse <div id="statusChild">me</div></div> 234 <div id="tablist" role="tablist">tablist <div id="tablistChild">tab</div></div> 235 <div id="timer" role="timer">excuse <div id="timerChild">me</div></div> 236 237 <!-- aria-label[ledby] should not be an object attribute --> 238 <div id="label" role="checkbox" aria-label="foo"></div> 239 <div id="labelledby" role="checkbox" aria-labelledby="label"></div> 240 241 <!-- unusual live case --> 242 <div id="liveGroup" role="group" aria-live="polite"> 243 excuse <div id="liveGroupChild">me</div> 244 </div> 245 246 <!-- text input type --> 247 <input id="button" type="button"/> 248 <input id="email" type="email"/> 249 <input id="search" type="search"/> 250 <input id="tel" type="tel"/> 251 <input id="url" type="url"/> 252 <input id="number" type="number"/> 253 <div id="searchbox" role="searchbox"></div> 254 255 <!-- html --> 256 <input id="radio" type="radio"/> 257 <input id="checkbox" type="checkbox"/> 258 <div id="draggable" draggable="true">Draggable div</div> 259 <table> 260 <tr> 261 <th id="th1"><abbr title="Social Security Number">SS#</abbr></th> 262 <th id="th2" abbr="SS#" axis="social">Social Security Number</th> 263 <th id="th3"><abbr></abbr></th> 264 </tr> 265 </table> 266 267 <ul> 268 <li id="listitem">item 269 </ul> 270 271 <!-- experimental aria --> 272 <div id="experimental" aria-blah="true">Fake beer</div> 273 274 <!-- HTML5 aside elements --> 275 <aside id="aside0" role="note">aside 0</aside> 276 <aside id="aside1" role="group">aside 1</aside> 277 <aside id="aside2">aside 2</aside> 278 279 <!-- Shortcuts for web applications --> 280 <div id="shortcuts" data-at-shortcutkeys='{"n":"New message","r":"Reply to message"}'></div> 281 </body> 282 </html>