third_party/WebKit/LayoutTests/accessibility/computed-name.html

   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 alertdialog</div>
  12
  13       <div role="application" aria-label="application name">This is an application</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 banner</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 button</button>
  26
  27       <div role="complementary" data-knownFailure>complementary name</div>
  28       <div role="complementary" aria-label="complementary name">This is a complementary</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-knownFailure>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="implicit 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-label="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="listitem">implicit listitem name</li></ul>
  98       <ol data-role="list" aria-label="implicit list name"><li data-role="listitem">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="implicit 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 menuitemradio</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 name</option>
 140         <option value="2" data-role="option" data-knownFailure>implicit option name</option>
 141       </select>
 142
 143       <div role="progressbar" aria-label="progressbar name">This is a progressbar</div>
 144       <progress data-role="progressbar" value="10" max="100" aria-label="implicit 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 region</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 name">
 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="#228b22" 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="Placeholder5" 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="Title7"
 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=' + role + ']');
 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>