Chromium Code Reviews Chromium Code Reviews
Issue 742353004:
Implement computedRole and computedName (behind a flag) (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| 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" data-knownFailure> | |
| 8 <div role="alert" aria-label="This is an alert"></div> | |
| 9 | |
| 10 <div role="alertdialog" aria-label="This is an alert dialog"></div> | |
| 11 | |
| 12 <div role="application" aria-label="This is an application"></div> | |
| 13 | |
| 14 <div role="article">This is an article</div> | |
| 15 <article data-role="article">This is an article</article> | |
| 16 | |
| 17 <div role="banner">This is a banner</div> | |
| 18 <header data-role="banner">This is a banner</header> | |
| 19 | |
| 20 <div role="button">This is a button</div> | |
| 21 <input type="button" value="This is a button" data-role="button"> | |
| 22 <button data-role="button">This is a button</button> | |
| 23 | |
| 24 <div role="complementary">This is a complementary</div> | |
| 25 <aside data-role="complementary">This is a complementary</aside> | |
| 26 | |
| 27 <fieldset data-role="group"> | |
| 28 <div role="checkbox" aria-label="This is a checkbox"></div> | |
| 29 <label for="check">This is a checkbox</label> | |
| 30 <input type="checkbox" id="check" data-role="checkbox"> | |
| 31 </fieldset> | |
| 32 | |
| 33 <div role="dialog">This is a dialog</div> | |
| 34 <dialog data-role="dialog" data-knownFailure>This is a dialog</dialog> | |
| 35 | |
| 36 <div role="directory" data-knownFailure>This is a directory</div> | |
| 37 | |
| 38 <div role="grid" data-knownFailure> | |
| 39 <div role="row"> | |
| 40 <div role="columnheader" data-knownFailure> | |
| 41 This is a columnheader | |
| 42 </div> | |
| 43 </div> | |
| 44 <div role="row"> | |
| 45 <div role="gridcell"> | |
| 46 This is a gridcell | |
| 47 </div> | |
| 48 </div> | |
| 49 </div> | |
| 50 | |
| 51 <div role="combobox">This is combobox</div> | |
| 52 <input type="text" list="suggestions" data-role="combobox"> | |
| 53 <datalist id="suggestions"> | |
| 54 <option value="suggestion1" label="suggestion1"> | |
| 55 <option value="suggestion2" label="suggestion2"> | |
| 56 </datalist> | |
| 57 | |
| 58 <div role="definition">This is a definition</div> | |
| 59 | |
| 60 <div role="document">This is a document</div> | |
| 61 | |
| 62 <div role="form">This is a form</div> | |
| 63 | |
| 64 <div role="group">This is a group</div> | |
| 65 <details data-role="group" data-knownFailure> | |
| 66 <summary>This is a summary</summary> | |
| 67 This is a group | |
| 68 </details> | |
| 69 | |
| 70 <div role="heading">This is a heading</div> | |
| 71 <h1 data-role="heading">This is a heading</h1> | |
| 72 <h2 data-role="heading">This is a heading</h2> | |
| 73 <h3 data-role="heading">This is a heading</h3> | |
| 74 <h4 data-role="heading">This is a heading</h4> | |
| 75 <h5 data-role="heading">This is a heading</h5> | |
| 76 <h6 data-role="heading">This is a heading</h6> | |
| 77 | |
| 78 <div role="img">This is an image</div> | |
| 79 <img src="broken.png" data-role="img"> | |
| 80 | |
| 81 <div role="link">This is a link</div> | |
| 82 <a href="#" data-role="link">This is a link</a> | |
| 83 <map name="map"> | |
| 84 <area shape=rect coords="0, 0, 10, 10" href="#" data-role="link"> | |
| 85 </map> | |
| 86 | |
| 87 <div role="list">This is a list</div> | |
| 88 <ul data-role="list"><li data-role="listitem">This is a list item</li></ul> | |
| 89 <ol data-role="list"><li data-role="listitem">This is a list item</li></ol> | |
| 90 | |
| 91 <div role="listbox">This is a listbox</div> | |
| 92 <select data-role="listbox" size="1" data-knownFailure> | |
| 93 <option value="1">First option</option> | |
| 94 <option value="2">Second</option> | |
| 95 </select> | |
| 96 | |
| 97 <div role="log">This is a log</div> | |
| 98 | |
| 99 <div role="main">This is main</div> | |
| 100 <main data-role="main">This is main</main> | |
| 101 | |
| 102 <div role="marquee">This is a marquee</div> | |
| 103 | |
| 104 <div role="math">This is math</div> | |
| 105 | |
| 106 <div role="menu">This is a menu</div> | |
| 107 | |
| 108 <div role="menubar">This is a menubar</div> | |
| 109 | |
| 110 <div role="menuitem">This is a menuitem</div> | |
| 111 <menu type="popup"> | |
| 112 <menuitem command="doSomething" data-role="menuitem" data-knownFailure>This is a menuitem</menuitem> | |
| 113 </menu> | |
| 114 | |
| 115 <div role="menuitemcheckbox">This is a menuitemcheckbox</div> | |
| 116 | |
| 117 <div role="menuitemradio">This is a menuitemradio</div> | |
| 118 | |
| 119 <div role="note">This is a note</div> | |
| 120 | |
| 121 <div role="navigation">This is a navigation</div> | |
| 122 <nav data-role="navigation">This is a navigation</nav> | |
| 123 | |
| 124 <div role="option">This is an option</div> | |
| 125 <select multiple> | |
| 126 <option value="1" data-role="option">First option</option> | |
| 127 <option value="2" data-role="option">Second</option> | |
| 128 </select> | |
| 129 | |
| 130 <div role="presentation">This is presentation</div> | |
| 131 <nav role="presentation">This is presentation, too</nav> | |
| 132 | |
| 133 <div role="progressbar">This is a progressbar</div> | |
| 134 <progress data-role="progressbar" max="100">10</progress> | |
| 135 | |
| 136 <div role="radio">This is a radiobutton</div> | |
| 137 <input type="radio" data-role="radio"> | |
| 138 | |
| 139 <div role="radiogroup">This is a radiogroup</div> | |
| 140 | |
| 141 <div role="region">This is a region</div> | |
| 142 <section data-role="region">This is a region</section> | |
| 143 | |
| 144 <div role="scrollbar">This is a scrollbar</div> | |
| 145 | |
| 146 <div role="search">This is a search</div> | |
| 147 | |
| 148 <div role="separator">This is a separator</div> | |
| 149 <hr data-role="separator"> | |
| 150 | |
| 151 <div role="slider">This is a slider</div> | |
| 152 <input type="range" data-role="slider" value="5" max="10"> | |
| 153 | |
| 154 <div role="spinbutton">This is a spinbutton</div> | |
| 155 <input type="number" data-role="spinbutton"> | |
| 156 | |
| 157 <div role="status">This is a status</div> | |
| 158 <output data-role="status"></output> | |
| 159 | |
| 160 <div role="tablist"> | |
| 161 <div role="tab">This is a tab</div> | |
| 162 </div> | |
| 163 | |
| 164 <div role="tabpanel">This is a tabpanel</div> | |
| 165 | |
| 166 <button role="text">This is static text</button> | |
| 167 | |
| 168 <div role="textbox" data-knownFailure>This is a textbox</div> | |
| 169 <input type="email" data-role="textbox" data-knownFailure> | |
| 170 <input type="password" data-role="textbox" data-knownFailure> | |
| 171 <input type="search" data-role="textbox" data-knownFailure> | |
| 172 <input type="tel" data-role="textbox" data-knownFailure> | |
| 173 <input type="text" data-role="textbox" data-knownFailure> | |
| 174 <input type="url" data-role="textbox" data-knownFailure> | |
| 175 | |
| 176 <div role="timer">This is a timer</div> | |
| 177 | |
| 178 <div role="toolbar">This is a toolbar</div> | |
| 179 <menu type="toolbar" data-role="toolbar" data-knownFailure> | |
| 180 <menuitem onclick="location='help.html'" label="Help"> | |
| 181 <menuitem onclick="location='about.html'" label="About"> | |
| 182 </menu> | |
| 183 | |
| 184 <div role="tooltip">This is a tooltip</div> | |
| 185 | |
| 186 <div role="tree">This is a tree</div> | |
| 187 | |
| 188 <div role="treegrid" data-knownFailure>This is a treegrid</div> | |
| 189 | |
| 190 <div role="treeitem">This is a treeitem</div> | |
| 191 <script> | |
| 192 description(""); | |
| 193 | |
| 194 if (window.testRunner) { | |
| 195 testRunner.dumpAsText(); | |
| 196 | |
| 197 var roleElements = document.querySelectorAll('[role]'); | |
| 198 for (var i = 0; i < roleElements.length; i++) { | |
| 199 var roleElement = roleElements[i]; | |
| 200 var role = roleElement.getAttribute('role'); | |
| 201 if (!roleElement.hasAttribute('data-knownFailure')) | |
| 202 shouldBe('roleElement.computedRole', 'role'); | |
|
dmazzoni
2014/12/17 06:24:19
Suppose each element had an id, then this could be
aboxhall
2014/12/18 04:34:47
It now prints out the role name, which should be e
| |
| 203 var implicitRoleElements = document.querySelectorAll('[data-role=' + rol e + ']'); | |
| 204 for (var j = 0; j < implicitRoleElements.length; j++) { | |
| 205 var implicitRoleElement = implicitRoleElements[j]; | |
| 206 if (!implicitRoleElement.hasAttribute('data-knownFailure')) | |
| 207 shouldBe('implicitRoleElement.computedRole', 'role'); | |
| 208 } | |
| 209 } | |
| 210 } | |
| 211 </script> | |
| 212 | |
| 213 </body> | |
| 214 </html> | |
| OLD | NEW |
