third_party/WebKit/LayoutTests/accessibility/computed-role.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" data-knownFailure>
   8   <div id="test-cases">
   9     <div role="alert" aria-label="This is an alert"></div>
  10
  11     <div role="alertdialog" aria-label="This is an alert dialog"></div>
  12
  13     <div role="application" aria-label="This is an application"></div>
  14
  15       <div role="article">This is an article</div>
  16       <article data-role="article">This is an article</article>
  17
  18       <div role="banner">This is a banner</div>
  19       <header data-role="banner">This is a banner</header>
  20
  21       <div role="button">This is a button</div>
  22       <div role="button" aria-pressed="true">This is a togglebutton</div>
  23       <input type="button" value="This is a button" data-role="button">
  24       <button data-role="button">This is a button</button>
  25
  26       <div role="complementary">This is a complementary</div>
  27       <aside data-role="complementary">This is a complementary</aside>
  28
  29       <div role="contentinfo">This is a contentinfo</div>
  30       <footer data-role="contentinfo">This is a contentinfo</footer>
  31
  32       <fieldset data-role="group">
  33         <div role="checkbox" aria-label="This is a checkbox"></div>
  34         <label for="check">This is a checkbox</label>
  35         <input type="checkbox" id="check" data-role="checkbox">
  36       </fieldset>
  37
  38       <div role="dialog">This is a dialog</div>
  39       <dialog data-role="dialog" data-knownFailure>This is a dialog</dialog>
  40
  41       <div role="directory" data-knownFailure>This is a directory</div>
  42
  43       <div role="grid" data-knownFailure>
  44         <div role="row">
  45           <div role="columnheader" data-knownFailure>
  46             This is a columnheader
  47           </div>
  48         </div>
  49         <div role="row">
  50           <div role="gridcell">
  51             This is a gridcell
  52           </div>
  53         </div>
  54       </div>
  55
  56       <div role="combobox">This is combobox</div>
  57       <input type="text" list="suggestions" data-role="combobox">
  58       <datalist id="suggestions">
  59         <option value="suggestion1" label="suggestion1">
  60         <option value="suggestion2" label="suggestion2">
  61       </datalist>
  62       <select data-role="combobox" size="1">
  63         <option value="1">First option</option>
  64         <option value="2">Second</option>
  65       </select>
  66
  67       <div role="definition">This is a definition</div>
  68
  69       <div role="document">This is a document</div>
  70
  71       <div role="form">This is a form</div>
  72
  73       <div role="group">This is a group</div>
  74       <details data-role="group" data-knownFailure>
  75         <summary>This is a summary</summary>
  76         This is a group
  77       </details>
  78
  79       <div role="heading">This is a heading</div>
  80       <h1 data-role="heading">This is a heading</h1>
  81       <h2 data-role="heading">This is a heading</h2>
  82       <h3 data-role="heading">This is a heading</h3>
  83       <h4 data-role="heading">This is a heading</h4>
  84       <h5 data-role="heading">This is a heading</h5>
  85       <h6 data-role="heading">This is a heading</h6>
  86
  87       <div role="img">This is an image</div>
  88       <img src="broken.png" data-role="img">
  89
  90       <div role="link">This is a link</div>
  91       <a href="#" data-role="link">This is a link</a>
  92       <map name="map">
  93         <area shape=rect coords="0, 0, 10, 10" href="#" data-role="link">
  94       </map>
  95
  96       <div role="list">This is a list</div>
  97       <ul data-role="list"><li data-role="listitem">This is a list item</li></ul>
  98       <ol data-role="list"><li data-role="listitem">This is a list item</li></ol>
  99
 100       <div role="listbox">This is a listbox</div>
 101
 102       <div role="log">This is a log</div>
 103
 104       <div role="main">This is main</div>
 105       <main data-role="main">This is main</main>
 106
 107       <div role="marquee">This is a marquee</div>
 108
 109       <div role="math">This is math</div>
 110
 111       <div role="menu">This is a menu</div>
 112
 113       <div role="menubar">This is a menubar</div>
 114
 115       <div role="menuitem">This is a menuitem</div>
 116       <menu type="popup">
 117         <menuitem command="doSomething" data-role="menuitem" data-knownFailure>This is a menuitem</menuitem>
 118       </menu>
 119
 120       <div role="menuitemcheckbox">This is a menuitemcheckbox</div>
 121
 122       <div role="menuitemradio">This is a menuitemradio</div>
 123
 124       <div role="note">This is a note</div>
 125
 126       <div role="navigation">This is a navigation</div>
 127       <nav data-role="navigation">This is a navigation</nav>
 128
 129       <div role="option">This is an option</div>
 130       <select multiple>
 131         <option value="1" data-role="option">First option</option>
 132         <option value="2" data-role="option">Second</option>
 133       </select>
 134
 135       <div role="presentation">This is presentation</div>
 136       <nav role="presentation">This is presentation, too</nav>
 137
 138       <div role="progressbar">This is a progressbar</div>
 139       <progress data-role="progressbar" max="100">10</progress>
 140       <meter data-role="progressbar" max="100"></meter>
 141
 142       <div role="radio">This is a radiobutton</div>
 143       <input type="radio" data-role="radio">
 144
 145       <div role="radiogroup">This is a radiogroup</div>
 146
 147       <div role="region">This is a region</div>
 148       <section data-role="region">This is a region</section>
 149
 150       <div role="scrollbar">This is a scrollbar</div>
 151
 152       <div role="search">This is a search</div>
 153
 154       <div role="separator">This is a separator</div>
 155       <hr data-role="separator">
 156
 157       <div role="slider">This is a slider</div>
 158       <input type="range" data-role="slider" value="5" max="10">
 159
 160       <div role="spinbutton">This is a spinbutton</div>
 161       <input type="number" data-role="spinbutton">
 162
 163       <div role="status">This is a status</div>
 164       <output data-role="status"></output>
 165
 166       <div role="tablist">
 167         <div role="tab">This is a tab</div>
 168       </div>
 169
 170       <div role="tabpanel">This is a tabpanel</div>
 171
 172       <button role="text">This is static text</button>
 173
 174       <div role="textbox" data-knownFailure>This is a textbox</div>
 175       <input type="email" data-role="textbox">
 176       <input type="password" data-role="textbox">
 177       <input type="search" data-role="textbox">
 178       <input type="tel" data-role="textbox">
 179       <input type="text" data-role="textbox">
 180       <input type="url" data-role="textbox">
 181
 182       <div role="timer">This is a timer</div>
 183
 184       <div role="toolbar">This is a toolbar</div>
 185       <menu type="toolbar" data-role="toolbar" data-knownFailure>
 186        <menuitem onclick="location='help.html'" label="Help">
 187        <menuitem onclick="location='about.html'" label="About">
 188       </menu>
 189
 190       <div role="tooltip">This is a tooltip</div>
 191
 192       <div role="tree">This is a tree</div>
 193
 194       <div role="treegrid" data-knownFailure>This is a treegrid</div>
 195
 196       <div role="treeitem">This is a treeitem</div>
 197
 198       <!-- also works in SVG -->
 199       <svg version="1.1" width="300" height="200" aria-labelledby="svg-title">
 200         <title id="svg-title">Green rectangle</title>
 201         <a xlink:href="http://example.com" tabindex="0" role="link">
 202           <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
 203           <text x="35" y="30" font-size="1em" text-anchor="middle" fill="#000000">Website</text>
 204         </a>
 205       </svg>
 206   </div>
 207 <script>
 208 description("");
 209
 210 if (window.testRunner) {
 211     testRunner.dumpAsText();
 212
 213     var roleElements = document.querySelectorAll('div[role]');
 214     for (var i = 0; i < roleElements.length; i++) {
 215         var roleElement = roleElements[i];
 216         var role = roleElement.getAttribute('role');
 217         if (!roleElement.hasAttribute('data-knownFailure')) {
 218             var expectedRoleString = '"' + role + '"';
 219             shouldBe('roleElement.computedRole', expectedRoleString);
 220         }
 221         var implicitRoleElements = document.querySelectorAll('[data-role=' + role + ']');
 222         for (var j = 0; j < implicitRoleElements.length; j++) {
 223             var implicitRoleElement = implicitRoleElements[j];
 224             if (!implicitRoleElement.hasAttribute('data-knownFailure')) {
 225                 var expectedRoleString = '"' + role + '"';
 226                 shouldBe('implicitRoleElement.computedRole', expectedRoleString);
 227             }
 228         }
 229     }
 230     var svgAElement = document.querySelector('svg a');
 231     var expectedSvgARole = '"' + svgAElement.getAttribute('role') + '"';
 232     shouldBe('svgAElement.computedRole', expectedSvgARole);
 233
 234     document.querySelector('#test-cases').style.display = 'none';
 235 }
 236 </script>
 237
 238 </body>
 239 </html>