Index: LayoutTests/accessibility/computed-name.html |
diff --git a/LayoutTests/accessibility/computed-name.html b/LayoutTests/accessibility/computed-name.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..47589ce4f6f4fffdba68c72d69eaab64698d2045 |
--- /dev/null |
+++ b/LayoutTests/accessibility/computed-name.html |
@@ -0,0 +1,239 @@ |
+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
+<html> |
+<head> |
+ <script src="../resources/js-test.js"></script> |
+</head> |
+ |
+<body data-role="document" aria-label="implicit document name"> |
+ <div role="alert" aria-label="alert name">This is an alert</div> |
+ |
+ <div role="alertdialog" aria-label="alertdialog name">This is an alertdialog</div> |
dmazzoni
2014/12/17 06:24:19
I feel like a test of computed-name shouldn't iter
aboxhall
2014/12/18 04:34:47
I think both axes are valuable, actually - we defi
dmazzoni
2014/12/18 18:02:21
I think that the latest spec simplifies this, fina
aboxhall
2014/12/19 00:02:08
Acknowledged.
|
+ |
+ <div role="application" aria-label="application name">This is an application</div> |
+ |
+ <div role="article" aria-label="article name">This is an article</div> |
+ <article data-role="article" aria-label="implicit article name">This is an article</article> |
+ |
+ <div role="banner" aria-label="banner name">This is a banner</div> |
+ <header data-role="banner" aria-label="implicit banner name">This is a banner</header> |
+ |
+ <div role="button">button name</div> |
+ <div role="button" aria-label="button name">This is a button</div> |
+ <input type="button" value="implicit button name" data-role="button"> |
+ <button data-role="button">implicit button name</button> |
+ <button data-role="button" aria-label="implicit button name">This is a button</button> |
+ |
+ <div role="complementary" data-knownFailure>complementary name</div> |
+ <div role="complementary" aria-label="complementary name">This is a complementary</div> |
+ <aside data-role="complementary" data-knownFailure>implicit complementary name</aside> |
+ <aside data-role="complementary" aria-label="implicit complementary name">This is a complementary</aside> |
+ |
+ <fieldset data-role="group" aria-label="implicit group name"> |
+ <div role="checkbox">checkbox name</div> |
+ <div role="checkbox" aria-label="checkbox name"></div> |
+ <label for="check">implicit checkbox name</label> |
+ <input type="checkbox" id="check" data-role="checkbox"> |
+ </fieldset> |
+ |
+ <div role="dialog" aria-label="dialog name"></div> |
+ <dialog data-role="dialog" aria-label="implicit dialog name" data-knownFailure>This is a dialog</dialog> |
+ |
+ <div role="directory" data-knownFailure>directory name</div> |
+ <div role="directory" aria-label="directory name">This is a directory</div> |
+ |
+ <div role="grid" aria-label="grid name"> |
+ <div role="row" aria-label="row name"> |
+ <div role="columnheader" aria-label="columnheader name"> |
+ This is a columnheader |
+ </div> |
+ </div> |
+ <div role="row" aria-label="row name"> |
+ <div role="gridcell" aria-label="gridcell name"> |
+ This is a gridcell |
+ </div> |
+ </div> |
+ </div> |
+ |
+ <div role="combobox" aria-label="combobox name">This is a combobox</div> |
+ <input type="text" list="suggestions" data-role="combobox" aria-name="implicit combobox name" data-knownFailure> |
+ <datalist id="suggestions"> |
+ <option value="suggestion1" label="suggestion1"> |
+ <option value="suggestion2" label="suggestion2"> |
+ </datalist> |
+ |
+ <div role="definition" aria-label="definition name">This is a definition</div> |
+ |
+ <div role="document" aria-label="document name">This is a document</div> |
+ |
+ <div role="form" aria-label="form name">This is a form</div> |
+ |
+ <div role="group" aria-label="group name">This is a group</div> |
+ <details data-role="group" aria-label="implicit group name"> |
+ <summary>This is a summary</summary> |
+ This is a group |
+ </details> |
+ |
+ <div role="heading">heading name</div> |
+ <div role="heading" aria-label="heading name">This is a heading</div> |
+ <h1 data-role="heading">implicit heading name</h1> |
+ <h2 data-role="heading">implicit heading name</h2> |
+ <h3 data-role="heading">implicit heading name</h3> |
+ <h4 data-role="heading">implicit heading name</h4> |
+ <h5 data-role="heading">implicit heading name</h5> |
+ <h6 data-role="heading">implicit heading name</h6> |
+ |
+ <div role="img" aria-label="img name">This is an img</div> |
+ <img src="broken.png" data-role="img" alt="implicit img name"> |
+ |
+ <div role="link">link name</div> |
+ <div role="link" aria-label="link name">This is a link</div> |
+ <a href="#" data-role="link">implicit link name</a> |
+ <map name="map"> |
+ <area shape=rect coords="0, 0, 10, 10" href="#" data-role="link" aria-label="implicit link name"> |
+ </map> |
+ |
+ <div role="list" aria-label="list name">This is a list</div> |
+ <ul data-role="list" aria-label="implicit list name"><li data-role="listitem">implicit listitem name</li></ul> |
+ <ol data-role="list" aria-label="implicit list name"><li data-role="listitem">implicit listitem name</li></ol> |
+ |
+ <div role="listbox" aria-label="listbox name">This is a listbox</div> |
+ <select data-role="listbox" size="1" aria-label="implicit listbox name"> |
+ <option value="1">First option</option> |
+ <option value="2">Second</option> |
+ </select> |
+ |
+ <div role="log" aria-label="log name">This is a log</div> |
+ |
+ <div role="main" aria-label="main name">This is main</div> |
+ <main data-role="main" aria-label="implicit main name">This is main</main> |
+ |
+ <div role="marquee" aria-label="marquee name">This is a marquee</div> |
+ |
+ <div role="math" aria-label="math name">This is math</div> |
+ |
+ <div role="menu" aria-label="menu name">This is a menu</div> |
+ |
+ <div role="menubar" aria-label="menubar name">This is a menubar</div> |
+ |
+ <div role="menuitem">menuitem name</div> |
+ <div role="menuitem" aria-label="menuitem name">This is a menuitem</div> |
+ <menu type="popup"> |
+ <menuitem command="doSomething" data-role="menuitem" aria-label="implicit menuitem name" data-knownFailure>This is a menuitem</menuitem> |
+ </menu> |
+ |
+ <div role="menuitemcheckbox">menuitemcheckbox name</div> |
+ <div role="menuitemcheckbox" aria-label="menuitemcheckbox name">This is a menuitemcheckbox</div> |
+ |
+ <div role="menuitemradio">menuitemradio name</div> |
+ <div role="menuitemradio" aria-label="menuitemradio name">This is a menuitemradio</div> |
+ |
+ <div role="navigation" aria-label="navigation name">This is a navigation</div> |
+ <nav data-role="navigation" aria-label="implicit navigation name">This is a navigation</nav> |
+ |
+ <div role="note" aria-label="note name">This is a note</div> |
+ |
+ <div role="option">option name</div> |
+ <div role="option" aria-label="option name">This is an option</div> |
+ <select multiple> |
+ <option value="1" data-role="option" data-knownFailure>implicit option name</option> |
+ <option value="2" data-role="option" data-knownFailure>implicit option name</option> |
+ </select> |
+ |
+ <div role="progressbar" aria-label="progressbar name">This is a progressbar</div> |
+ <progress data-role="progressbar" value="10" max="100" aria-label="implicit progressbar name">implicit progressbar name</progress> |
+ |
+ <div role="radio">radio name</div> |
+ <div role="radio" aria-label="radio name">This is a radiobutton</div> |
+ <label for="radio">implicit radio name</label> |
+ <input type="radio" data-role="radio" id="radio"> |
+ |
+ <div role="radiogroup" aria-label="radiogroup name">This is a radiogroup</div> |
+ |
+ <div role="region" aria-label="region name">This is a region</div> |
+ <section data-role="region" aria-label="implicit region name">This is a region</section> |
+ |
+ <div role="scrollbar" aria-label="scrollbar name">This is a scrollbar</div> |
+ |
+ <div role="search" aria-label="search name">This is a search</div> |
+ |
+ <div role="separator" aria-label="separator name">This is a separator</div> |
+ <hr data-role="separator" aria-label="implicit separator name"> |
+ |
+ <div role="slider" aria-label="slider name">This is a slider</div> |
+ <label for="range">implicit slider name<label> |
+ <input type="range" data-role="slider" value="5" max="10" id="range" data-knownFailure> |
+ |
+ <div role="spinbutton" aria-label="spinbutton name">This is a spinbutton</div> |
+ <label for="number">implicit spinbutton name</label> |
+ <input type="number" data-role="spinbutton" data-knownFailure> |
+ |
+ <div role="status" aria-label="status name">This is a status</div> |
+ <output data-role="status" aria-label="implicit status name"></output> |
+ |
+ <div role="tablist" aria-label="tablist name"> |
+ <div role="tab">tab name</div> |
+ <div role="tab" aria-label="tab name">This is a tab</div> |
+ </div> |
+ |
+ <div role="tabpanel" aria-label="tabpanel name">This is a tabpanel</div> |
+ |
+ <button role="text" data-knownFailure>text name</button> |
+ |
+ <div role="textbox" aria-label="textbox name">This is a textbox</div> |
+ <input type="email" data-role="textbox" aria-label="implicit textbox name"> |
+ <input type="password" data-role="textbox" aria-label="implicit textbox name"> |
+ <input type="search" data-role="textbox" aria-label="implicit textbox name"> |
+ <input type="tel" data-role="textbox" aria-label="implicit textbox name"> |
+ <input type="text" data-role="textbox" aria-label="implicit textbox name"> |
+ <input type="url" data-role="textbox" aria-label="implicit textbox name"> |
+ |
+ <div role="timer" aria-label="timer name">This is a timer</div> |
+ |
+ <div role="toolbar" aria-label="toolbar name">This is a toolbar</div> |
+ <menu type="toolbar" data-role="toolbar" aria-label="implicit toolbar name"> |
+ <menuitem onclick="location='help.html'" label="Help"> |
+ <menuitem onclick="location='about.html'" label="About"> |
+ </menu> |
+ |
+ <div role="tooltip" aria-label="tooltip name">This is a tooltip</div> |
+ <div role="tooltip" data-knownFailure>tooltip name</div> |
+ |
+ <div role="tree" aria-label="tree name">This is a tree</div> |
+ |
+ <div role="treegrid" aria-label="treegrid name">This is a treegrid</div> |
+ |
+ <div role="treeitem" data-knownFailure>treeitem name</div> |
+ <div role="treeitem" aria-label="treeitem name">This is a treeitem</div> |
+<script> |
+description(""); |
+ |
+if (window.testRunner) { |
+ testRunner.dumpAsText(); |
+ |
+ var roleElements = document.querySelectorAll('[role]'); |
+ var rolesTested = {}; |
+ for (var i = 0; i < roleElements.length; i++) { |
+ var roleElement = roleElements[i]; |
+ var name = roleElement.computedName; |
+ var role = roleElement.getAttribute('role'); |
+ if (!roleElement.hasAttribute('data-knownFailure')) { |
+ var expectedNameString = '"' + role + ' name"'; |
+ shouldBe('name', expectedNameString); |
+ } |
+ var implicitRoleElements = document.querySelectorAll('[data-role=' + role + ']'); |
+ if (rolesTested[role]) |
+ continue; |
+ for (var j = 0; j < implicitRoleElements.length; j++) { |
+ var implicitRoleElement = implicitRoleElements[j]; |
+ if (!implicitRoleElement.hasAttribute('data-knownFailure')) { |
+ var expectedNameString = '"implicit ' + role + ' name"'; |
+ shouldBe('implicitRoleElement.computedName', expectedNameString); |
+ } |
+ } |
+ rolesTested[role] = true; |
+ } |
+} |
+</script> |
dmazzoni
2014/12/17 06:24:19
Optional: I've seen some tests set display:none on
aboxhall
2014/12/18 04:34:47
Wouldn't that mess up the accessibility tree?
dmazzoni
2014/12/18 18:02:21
You'd do it after all of your accessibility tree t
aboxhall
2014/12/19 00:02:08
Oh I see, done.
|
+ |
+</body> |
+</html> |