| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| 2 <html> |
| 3 <head> |
| 4 <script src="../resources/js-test.js"></script> |
| 5 </head> |
| 6 |
| 7 <body data-role="document" aria-label="implicit document name"> |
| 8 <div id="test-cases"> |
| 9 <div role="alert" aria-label="alert name">This is an alert</div> |
| 10 |
| 11 <div role="alertdialog" aria-label="alertdialog name">This is an alertdial
og</div> |
| 12 |
| 13 <div role="application" aria-label="application name">This is an applicati
on</div> |
| 14 |
| 15 <div role="article" aria-label="article name">This is an article</div> |
| 16 <article data-role="article" aria-label="implicit article name">This is an
article</article> |
| 17 |
| 18 <div role="banner" aria-label="banner name">This is a banner</div> |
| 19 <header data-role="banner" aria-label="implicit banner name">This is a ban
ner</header> |
| 20 |
| 21 <div role="button">button name</div> |
| 22 <div role="button" aria-label="button name">This is a button</div> |
| 23 <input type="button" value="implicit button name" data-role="button"> |
| 24 <button data-role="button">implicit button name</button> |
| 25 <button data-role="button" aria-label="implicit button name">This is a but
ton</button> |
| 26 |
| 27 <div role="complementary" data-knownFailure>complementary name</div> |
| 28 <div role="complementary" aria-label="complementary name">This is a comple
mentary</div> |
| 29 <aside data-role="complementary" data-knownFailure>implicit complementary
name</aside> |
| 30 <aside data-role="complementary" aria-label="implicit complementary name">
This is a complementary</aside> |
| 31 |
| 32 <fieldset data-role="group" aria-label="implicit group name"> |
| 33 <div role="checkbox">checkbox name</div> |
| 34 <div role="checkbox" aria-label="checkbox name"></div> |
| 35 <label for="check">implicit checkbox name</label> |
| 36 <input type="checkbox" id="check" data-role="checkbox"> |
| 37 </fieldset> |
| 38 |
| 39 <div role="dialog" aria-label="dialog name"></div> |
| 40 <dialog data-role="dialog" aria-label="implicit dialog name" data-knownFai
lure>This is a dialog</dialog> |
| 41 |
| 42 <div role="directory" data-knownFailure>directory name</div> |
| 43 <div role="directory" aria-label="directory name">This is a directory</div
> |
| 44 |
| 45 <div role="grid" aria-label="grid name"> |
| 46 <div role="row" aria-label="row name"> |
| 47 <div role="columnheader" aria-label="columnheader name"> |
| 48 This is a columnheader |
| 49 </div> |
| 50 </div> |
| 51 <div role="row" aria-label="row name"> |
| 52 <div role="gridcell" aria-label="gridcell name"> |
| 53 This is a gridcell |
| 54 </div> |
| 55 </div> |
| 56 </div> |
| 57 |
| 58 <div role="combobox" aria-label="combobox name">This is a combobox</div> |
| 59 <input type="text" list="suggestions" data-role="combobox" aria-name="impl
icit combobox name" data-knownFailure> |
| 60 <datalist id="suggestions"> |
| 61 <option value="suggestion1" label="suggestion1"> |
| 62 <option value="suggestion2" label="suggestion2"> |
| 63 </datalist> |
| 64 |
| 65 <div role="definition" aria-label="definition name">This is a definition</
div> |
| 66 |
| 67 <div role="document" aria-label="document name">This is a document</div> |
| 68 |
| 69 <div role="form" aria-label="form name">This is a form</div> |
| 70 |
| 71 <div role="group" aria-label="group name">This is a group</div> |
| 72 <details data-role="group" aria-label="implicit group name"> |
| 73 <summary>This is a summary</summary> |
| 74 This is a group |
| 75 </details> |
| 76 |
| 77 <div role="heading">heading name</div> |
| 78 <div role="heading" aria-label="heading name">This is a heading</div> |
| 79 <h1 data-role="heading">implicit heading name</h1> |
| 80 <h2 data-role="heading">implicit heading name</h2> |
| 81 <h3 data-role="heading">implicit heading name</h3> |
| 82 <h4 data-role="heading">implicit heading name</h4> |
| 83 <h5 data-role="heading">implicit heading name</h5> |
| 84 <h6 data-role="heading">implicit heading name</h6> |
| 85 |
| 86 <div role="img" aria-label="img name">This is an img</div> |
| 87 <img src="broken.png" data-role="img" alt="implicit img name"> |
| 88 |
| 89 <div role="link">link name</div> |
| 90 <div role="link" aria-label="link name">This is a link</div> |
| 91 <a href="#" data-role="link">implicit link name</a> |
| 92 <map name="map"> |
| 93 <area shape=rect coords="0, 0, 10, 10" href="#" data-role="link" aria-la
bel="implicit link name"> |
| 94 </map> |
| 95 |
| 96 <div role="list" aria-label="list name">This is a list</div> |
| 97 <ul data-role="list" aria-label="implicit list name"><li data-role="listit
em">implicit listitem name</li></ul> |
| 98 <ol data-role="list" aria-label="implicit list name"><li data-role="listit
em">implicit listitem name</li></ol> |
| 99 |
| 100 <div role="listbox" aria-label="listbox name">This is a listbox</div> |
| 101 <select data-role="listbox" size="1" aria-label="implicit listbox name"> |
| 102 <option value="1">First option</option> |
| 103 <option value="2">Second</option> |
| 104 </select> |
| 105 |
| 106 <div role="log" aria-label="log name">This is a log</div> |
| 107 |
| 108 <div role="main" aria-label="main name">This is main</div> |
| 109 <main data-role="main" aria-label="implicit main name">This is main</main> |
| 110 |
| 111 <div role="marquee" aria-label="marquee name">This is a marquee</div> |
| 112 |
| 113 <div role="math" aria-label="math name">This is math</div> |
| 114 |
| 115 <div role="menu" aria-label="menu name">This is a menu</div> |
| 116 |
| 117 <div role="menubar" aria-label="menubar name">This is a menubar</div> |
| 118 |
| 119 <div role="menuitem">menuitem name</div> |
| 120 <div role="menuitem" aria-label="menuitem name">This is a menuitem</div> |
| 121 <menu type="popup"> |
| 122 <menuitem command="doSomething" data-role="menuitem" aria-label="implici
t menuitem name" data-knownFailure>This is a menuitem</menuitem> |
| 123 </menu> |
| 124 |
| 125 <div role="menuitemcheckbox">menuitemcheckbox name</div> |
| 126 <div role="menuitemcheckbox" aria-label="menuitemcheckbox name">This is a
menuitemcheckbox</div> |
| 127 |
| 128 <div role="menuitemradio">menuitemradio name</div> |
| 129 <div role="menuitemradio" aria-label="menuitemradio name">This is a menuit
emradio</div> |
| 130 |
| 131 <div role="navigation" aria-label="navigation name">This is a navigation</
div> |
| 132 <nav data-role="navigation" aria-label="implicit navigation name">This is
a navigation</nav> |
| 133 |
| 134 <div role="note" aria-label="note name">This is a note</div> |
| 135 |
| 136 <div role="option">option name</div> |
| 137 <div role="option" aria-label="option name">This is an option</div> |
| 138 <select multiple> |
| 139 <option value="1" data-role="option" data-knownFailure>implicit option n
ame</option> |
| 140 <option value="2" data-role="option" data-knownFailure>implicit option n
ame</option> |
| 141 </select> |
| 142 |
| 143 <div role="progressbar" aria-label="progressbar name">This is a progressba
r</div> |
| 144 <progress data-role="progressbar" value="10" max="100" aria-label="implici
t progressbar name">implicit progressbar name</progress> |
| 145 |
| 146 <div role="radio">radio name</div> |
| 147 <div role="radio" aria-label="radio name">This is a radiobutton</div> |
| 148 <label for="radio">implicit radio name</label> |
| 149 <input type="radio" data-role="radio" id="radio"> |
| 150 |
| 151 <div role="radiogroup" aria-label="radiogroup name">This is a radiogroup</
div> |
| 152 |
| 153 <div role="region" aria-label="region name">This is a region</div> |
| 154 <section data-role="region" aria-label="implicit region name">This is a re
gion</section> |
| 155 |
| 156 <div role="scrollbar" aria-label="scrollbar name">This is a scrollbar</div
> |
| 157 |
| 158 <div role="search" aria-label="search name">This is a search</div> |
| 159 |
| 160 <div role="separator" aria-label="separator name">This is a separator</div
> |
| 161 <hr data-role="separator" aria-label="implicit separator name"> |
| 162 |
| 163 <div role="slider" aria-label="slider name">This is a slider</div> |
| 164 <label for="range">implicit slider name</label> |
| 165 <input type="range" data-role="slider" value="5" max="10" id="range" data-
knownFailure> |
| 166 |
| 167 <div role="spinbutton" aria-label="spinbutton name">This is a spinbutton</
div> |
| 168 <label for="number">implicit spinbutton name</label> |
| 169 <input type="number" data-role="spinbutton" data-knownFailure> |
| 170 |
| 171 <div role="status" aria-label="status name">This is a status</div> |
| 172 <output data-role="status" aria-label="implicit status name"></output> |
| 173 |
| 174 <div role="tablist" aria-label="tablist name"> |
| 175 <div role="tab">tab name</div> |
| 176 <div role="tab" aria-label="tab name">This is a tab</div> |
| 177 </div> |
| 178 |
| 179 <div role="tabpanel" aria-label="tabpanel name">This is a tabpanel</div> |
| 180 |
| 181 <button role="text" data-knownFailure>text name</button> |
| 182 |
| 183 <div role="textbox" aria-label="textbox name">This is a textbox</div> |
| 184 <input type="email" data-role="textbox" aria-label="implicit textbox name"
> |
| 185 <input type="password" data-role="textbox" aria-label="implicit textbox na
me"> |
| 186 <input type="search" data-role="textbox" aria-label="implicit textbox name
"> |
| 187 <input type="tel" data-role="textbox" aria-label="implicit textbox name"> |
| 188 <input type="text" data-role="textbox" aria-label="implicit textbox name"> |
| 189 <input type="url" data-role="textbox" aria-label="implicit textbox name"> |
| 190 |
| 191 <div role="timer" aria-label="timer name">This is a timer</div> |
| 192 |
| 193 <div role="toolbar" aria-label="toolbar name">This is a toolbar</div> |
| 194 <menu type="toolbar" data-role="toolbar" aria-label="implicit toolbar name
"> |
| 195 <menuitem onclick="location='help.html'" label="Help"> |
| 196 <menuitem onclick="location='about.html'" label="About"> |
| 197 </menu> |
| 198 |
| 199 <div role="tooltip" aria-label="tooltip name">This is a tooltip</div> |
| 200 <div role="tooltip" data-knownFailure>tooltip name</div> |
| 201 |
| 202 <div role="tree" aria-label="tree name">This is a tree</div> |
| 203 |
| 204 <div role="treegrid" aria-label="treegrid name">This is a treegrid</div> |
| 205 |
| 206 <div role="treeitem" data-knownFailure>treeitem name</div> |
| 207 <div role="treeitem" aria-label="treeitem name">This is a treeitem</div> |
| 208 |
| 209 <!-- also works in SVG --> |
| 210 <svg version="1.1" width="300" height="200" aria-labelledby="svg-title"> |
| 211 <title id="svg-title">Green rectangle</title> |
| 212 <a xlink:href="http://example.com" tabindex="0" role="link"> |
| 213 <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#2
28b22" stroke-fill="1" /> |
| 214 <text x="35" y="30" font-size="1em" text-anchor="middle" fill="#000000
">link name</text> |
| 215 </a> |
| 216 </svg> |
| 217 |
| 218 <div id="inputs"> |
| 219 <input id="c0" data-expectedName="Title0" type="text" title="Title0"> |
| 220 <input id="c1" data-expectedName="Label1" type="text" title="Title1"> |
| 221 <input id="c2" data-expectedName="AriaLabel2" type="text" title="Title2"
aria-label="AriaLabel2"> |
| 222 <input id="c3" data-expectedName="LabelledBy3" type="text" title="Title3
" aria-label="AriaLabel3" |
| 223 aria-labelledby="lb3"> |
| 224 |
| 225 <input id="c4" data-expectedName="Placeholder4" type="text" placeholder=
"Placeholder4"> |
| 226 <input id="c5" data-expectedName="Title5" type="text" placeholder="Place
holder5" title="Title5"> |
| 227 |
| 228 <input id="c6" data-expectedName="LabelledBy6" type="text" title="Title6
" |
| 229 aria-label="AriaLabel6" aria-labelledby="lb6" |
| 230 aria-describedby="db6"> |
| 231 |
| 232 <input id="c7" data-expectedName="Placeholder7" type="text" title="Title
7" |
| 233 placeholder="Placeholder7" data-knownFailure> |
| 234 </div> |
| 235 |
| 236 <div id="labels"> |
| 237 <label for="c1">Label1</label> |
| 238 <label for="c2">Label2</label> |
| 239 <label for="c3">Label3</label> |
| 240 |
| 241 <label for="c6">Label6</label> |
| 242 |
| 243 <span id="lb3">LabelledBy3</span> |
| 244 |
| 245 <span id="lb6">LabelledBy6</span> |
| 246 |
| 247 <span id="db6">DescribedBy6</span> |
| 248 </div> |
| 249 </div> |
| 250 <script> |
| 251 description(""); |
| 252 |
| 253 if (window.testRunner) { |
| 254 testRunner.dumpAsText(); |
| 255 |
| 256 var roleElements = document.querySelectorAll('[role]'); |
| 257 var rolesTested = {}; |
| 258 for (var i = 0; i < roleElements.length; i++) { |
| 259 var roleElement = roleElements[i]; |
| 260 var name = roleElement.computedName; |
| 261 var role = roleElement.getAttribute('role'); |
| 262 if (!roleElement.hasAttribute('data-knownFailure')) { |
| 263 var expectedNameString = '"' + role + ' name"'; |
| 264 shouldBe('name', expectedNameString); |
| 265 } |
| 266 var implicitRoleElements = document.querySelectorAll('[data-role=' + rol
e + ']'); |
| 267 if (rolesTested[role]) |
| 268 continue; |
| 269 for (var j = 0; j < implicitRoleElements.length; j++) { |
| 270 var implicitRoleElement = implicitRoleElements[j]; |
| 271 if (!implicitRoleElement.hasAttribute('data-knownFailure')) { |
| 272 var expectedNameString = '"implicit ' + role + ' name"'; |
| 273 shouldBe('implicitRoleElement.computedName', expectedNameString)
; |
| 274 } |
| 275 } |
| 276 rolesTested[role] = true; |
| 277 } |
| 278 |
| 279 var svgElement = document.querySelector('svg'); |
| 280 var expectedSvgName = '"Green rectangle"'; |
| 281 shouldBe('svgElement.computedName', expectedSvgName); |
| 282 var svgAElement = document.querySelector('svg a'); |
| 283 var expectedSvgAName = '"link name"'; |
| 284 shouldBe('svgAElement.computedName', expectedSvgAName); |
| 285 |
| 286 var inputs = document.querySelector('#inputs').children; |
| 287 for (var i = 0; i < inputs.length; i++) { |
| 288 var input = inputs[i]; |
| 289 if (input.hasAttribute('data-knownFailure')) |
| 290 continue; |
| 291 var expectedNameString = '"' + input.getAttribute('data-expectedName') +
'"'; |
| 292 shouldBe('input.computedName', expectedNameString); |
| 293 } |
| 294 document.querySelector('#test-cases').style.display = 'none'; |
| 295 } |
| 296 </script> |
| 297 |
| 298 </body> |
| 299 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 742353004:
Implement computedRole and computedName (behind a flag) (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master