| <!DOCTYPE HTML> |
| <html> |
| <body> |
| <script src="../resources/js-test-pre.js"></script> |
| |
| <!-- ==================================================================================================== --> |
| <!-- HTML elements in alphabetical order, excepting the need for nesting (e.g. <li> is with its <ol> and <ul> parents) --> |
| <!-- This only tests elements that have an exact 1:1 ARIA role mapping, and computed role overrides. --> |
| <!-- ==================================================================================================== --> |
| <div id="content"> |
| <a data-role="link" href="#" data-note="[href]" data-platform="atk,mac" class="ex">X</a> |
| <article data-role="article" data-platform="atk,mac" class="ex">X</article> |
| <aside data-role="complementary" data-platform="atk,mac" class="ex">X</aside> |
| <button data-role="button" data-platform="atk,mac" class="ex">X</button> |
| <dfn data-role="definition" data-platform="atk,mac" class="ex">X</dfn> |
| <dl data-role="" data-platform="atk,mac" class="ex"> |
| <dt>X</dt> |
| <dd>X</dd> |
| </dl> |
| <footer data-role="" data-platform="atk,mac" class="ex">X</footer> |
| <form data-role="form" data-platform="atk,mac" class="ex">X</form> |
| <header data-role="banner" data-platform="atk,mac" class="ex">X</header> |
| <h1 data-role="heading" data-platform="atk,mac" class="ex">X</h1> |
| <h2 data-role="heading" data-platform="atk,mac" class="ex">X</h2> |
| <h3 data-role="heading" data-platform="atk,mac" class="ex">X</h3> |
| <h4 data-role="heading" data-platform="atk,mac" class="ex">X</h4> |
| <h5 data-role="heading" data-platform="atk,mac" class="ex">X</h5> |
| <h5 data-role="heading" data-platform="atk,mac" class="ex">X</h6> |
| <hr data-role="separator" data-platform="atk,mac" class="ex"> |
| <img data-role="img" data-platform="atk,mac" class="ex" data-note=":not([src]):not([alt])"> |
| <img data-role="" data-platform="atk,mac" class="ex" alt="" data-note="[alt='']"> |
| <img data-role="img" data-platform="atk,mac" class="ex" src="foo.png" data-note="[src]:not([alt])"> |
| <img data-role="img" data-platform="atk,mac" class="ex" alt="X" data-note="[alt='X']"> |
| <input type="button" value="X" data-role="button" data-platform="atk,mac" class="ex" data-note="[type='button']"> |
| <input type="checkbox" data-role="checkbox" data-platform="atk,mac" class="ex" data-note="[type='checkbox']"> |
| <input type="date" data-role=""data-platform="atk,mac" class="ex" data-note="[type='date']"> |
| <input type="datetime" value="X" data-role="" data-platform="atk,mac" class="ex" data-note="[type='datetime']"> |
| <input type="datetime-local" value="X" data-role="" data-platform="atk,mac" class="ex" data-note="[type='datetime-local']"> |
| <input type="email" value="X" data-role="" data-platform="atk,mac" class="ex" data-note="[type='email']"> |
| <input type="file" data-role="button" data-platform="atk,mac" class="ex" data-note="[type='file']"> |
| <input type="hidden" data-role="" data-platform="atk,mac" class="ex" data-note="[type='hidden']"> |
| <input type="image" data-role="button" data-platform="atk,mac" class="ex" data-note="[type='image']"> |
| <input type="month" value="X" data-role="" data-platform="atk,mac" class="ex" data-note="[type='month']"> |
| <input type="number" value="X" data-role="" data-platform="atk,mac" class="ex" data-note="[type='number']"> |
| <input type="password" value="X" data-role="" data-platform="atk,mac" class="ex" data-note="[type='password']"> |
| <input type="radio" data-role="radio" data-platform="atk,mac" class="ex" data-note="[type='radio']"> |
| <input type="range" data-role="slider" data-platform="atk,mac" class="ex" data-note="[type='range']"> |
| <input type="reset" data-role="button" data-platform="atk,mac" class="ex" data-note="[type='reset']"> |
| <input type="search" value="X" data-role="searchbox" data-platform="atk,mac" class="ex" data-note="[type='search']"> |
| <input type="submit" data-role="button" data-platform="atk,mac" class="ex" data-note="[type='submit']"> |
| <input type="tel" value="X" data-role="" data-platform="atk,mac" class="ex" data-note="[type='tel']"> |
| <input type="text" value="X" data-role="" data-platform="atk,mac" class="ex" data-note="[type='text']"> |
| <input type="time" value="X" data-role="" data-platform="atk,mac" class="ex" data-note="[type='time']"> |
| <input type="url" value="X" data-role="" data-platform="atk,mac" class="ex" data-note="[type='url']"> |
| <input type="week" value="X" data-role="" data-platform="atk,mac" class="ex" data-note="[type='week']"> |
| <ins data-role="" data-platform="atk,mac" class="ex">X</ins> |
| <mark data-role="" data-platform="atk,mac" class="ex">X</mark> |
| <math data-role="math" data-platform="atk,mac" class="ex">X</math> |
| <!-- skipped <menu> --> |
| <!-- skipped <meta> --> |
| <!-- renable for atk after http://webkit.org/b/163383 fixed --><meter data-role="progressbar" data-platform="mac" class="ex" value="0.75">X</meter> |
| <nav data-role="navigation" data-platform="atk,mac" class="ex">X</nav> |
| <!-- skipped <noscript> --> |
| <!-- skipped <object> --> |
| <ol data-role="list" data-platform="atk,mac" class="ex"> |
| <li data-role="listitem" data-platform="atk,mac" class="ex">X</li> |
| </ol> |
| <!-- skipped <optgroup> --> |
| <!-- skipped <option> --> |
| <!-- skipped <output> --> |
| <p data-role="" data-platform="atk,mac" class="ex">X</p> |
| <!-- skipped <param> --> |
| <pre data-role="" data-platform="atk,mac" class="ex">X</pre> |
| <progress data-role="progressbar" data-platform="atk,mac" class="ex" value="0.75">X</progress> |
| <q data-role="" data-platform="atk,mac" class="ex">X</q> |
| <!-- skipped <ruby/rp/rt> --> |
| <s data-role="" data-platform="atk,mac" class="ex">X</s> |
| <samp data-role="" data-platform="atk,mac" class="ex">X</samp> |
| <!-- skipped <script> --> |
| <section data-role="" data-platform="atk,mac" class="ex" data-note=":not([aria-label]:not([aria-labelledby])">X</section> |
| <section data-role="region" data-platform="atk,mac" class="ex" aria-label="x" data-note="[aria-label]">X</section> |
| <section data-role="region" data-platform="atk,mac" class="ex" aria-labelledby="section-label" data-note="[aria-labelledby]"> |
| <h2 id="section-label">X</h2> |
| </section> |
| <select data-role="button" data-platform="atk,mac" class="ex" data-note=":not([multiple])"> |
| <option data-role="" data-platform="atk,mac" class="ex">X</option> |
| <optgroup data-role="" data-platform="atk,mac" class="ex" label="more"> |
| <option data-role="" data-platform="atk,mac" class="ex">X</option> |
| </optgroup> |
| </select> |
| <select data-role="listbox" data-platform="atk,mac" class="ex" multiple data-note="[multiple]"> |
| <option data-role="option" data-platform="atk,mac" class="ex">X</option> |
| <optgroup data-role="option" data-platform="atk,mac" class="ex" label="more"> |
| <option data-role="option" data-platform="atk,mac" class="ex">Y</option> |
| <option data-role="option" data-platform="atk,mac" class="ex">Z</option> |
| </optgroup> |
| </select> |
| <small data-role="" data-platform="atk,mac" class="ex">X</small> |
| <span data-role="" data-platform="atk,mac" class="ex">X</span> |
| <strong data-role="" data-platform="atk,mac" class="ex">X</strong> |
| <sub data-role="" data-platform="atk,mac" class="ex">X</sub> |
| <sup data-role="" data-platform="atk,mac" class="ex">X</sup> |
| <svg data-role="" data-platform="atk,mac" class="ex">X</svg> |
| |
| <table data-role="table" data-platform="atk,mac" class="ex"> |
| <caption data-role="" data-platform="atk,mac" class="ex">X</caption> |
| <thead data-role="rowgroup" data-platform="atk,mac" class="ex"> |
| <tr data-role="row" data-platform="atk,mac" class="ex"> |
| <th data-role="columnheader" data-platform="atk,mac" class="ex">X</th> |
| </tr> |
| </thead> |
| <tbody data-role="rowgroup" data-platform="atk,mac" class="ex"> |
| <tr data-role="row" data-platform="atk,mac" class="ex"> |
| <td data-role="cell" data-platform="atk,mac" class="ex">X</td> |
| </tr> |
| </tbody> |
| <tfoot data-role="rowgroup" data-platform="atk,mac" class="ex"> |
| <tr data-role="row" data-platform="atk,mac" class="ex"> |
| <td data-role="cell" data-platform="atk,mac" class="ex">X</td> |
| </tr> |
| </tfoot> |
| </table> |
| |
| <table role="grid" data-role="grid" data-platform="atk,mac" class="ex"> |
| <caption data-role="" data-platform="atk,mac" class="ex">X</caption> |
| <thead data-role="rowgroup" data-platform="atk,mac" class="ex"> |
| <tr data-role="row" data-platform="atk,mac" class="ex"> |
| <th data-role="columnheader" data-platform="atk,mac" class="ex">X</th> |
| </tr> |
| </thead> |
| <tbody data-role="rowgroup" data-platform="atk,mac" class="ex"> |
| <tr data-role="row" data-platform="atk,mac" class="ex"> |
| <td role="gridcell" data-role="gridcell" data-platform="atk,mac" class="ex">X</td> |
| </tr> |
| </tbody> |
| <tfoot data-role="rowgroup" data-platform="atk,mac" class="ex"> |
| <tr data-role="row" data-platform="atk,mac" class="ex"> |
| <td role="gridcell" data-role="gridcell" data-platform="atk,mac" class="ex">X</td> |
| </tr> |
| </tfoot> |
| </table> |
| |
| <textarea data-role="textbox" data-platform="atk,mac" class="ex">X</textarea> |
| <time data-role="" data-platform="atk,mac" class="ex">X</time> |
| <ul data-role="list" data-platform="atk,mac" class="ex"> |
| <li data-role="listitem" data-platform="atk,mac" class="ex">X</li> |
| </ul> |
| <var data-role="" data-platform="atk,mac" class="ex">X</var> |
| <wbr data-role="" data-platform="atk,mac" class="ex">X</wbr> |
| |
| <!-- ==================================================================================================== --> |
| <!-- Abstract ARIA roles in alphabetical order; only generic role should be exposed on abstract roles --> |
| <!-- ==================================================================================================== --> |
| <div role="command" data-role="" data-platform="atk,mac" class="ex">X</div> |
| <div role="composite" data-role="" data-platform="atk,mac" class="ex">X</div> |
| <div role="input" data-role="" data-platform="atk,mac" class="ex">X</div> |
| <div role="landmark" data-role="" data-platform="atk,mac" class="ex">X</div> |
| <div role="range" data-role="" data-platform="atk,mac" class="ex">X</div> |
| <div role="roletype" data-role="" data-platform="atk,mac" class="ex">X</div> |
| <div role="section" data-role="" data-platform="atk,mac" class="ex">X</div> |
| <div role="sectionhead" data-role="" data-platform="atk,mac" class="ex">X</div> |
| <div role="select" data-role="" data-platform="atk,mac" class="ex">X</div> |
| <div role="structure" data-role="" data-platform="atk,mac" class="ex">X</div> |
| <div role="widget" data-role="" data-platform="atk,mac" class="ex">X</div> |
| <div role="window" data-role="" data-platform="atk,mac" class="ex">X</div> |
| |
| |
| <!-- ==================================================================================================== --> |
| <!-- Non-abstract ARIA roles in alphabetical order, excepting the need for nesting (e.g. row is with its grid parent) --> |
| <!-- ==================================================================================================== --> |
| <div role="alert" data-role="alert" data-platform="atk,mac" class="ex">X</div> |
| <div role="alertdialog" data-role="alertdialog" data-platform="atk,mac" class="ex">X</div> |
| <div role="application" data-role="application" data-platform="atk,mac" class="ex">X</div> |
| <div role="article" data-role="article" data-platform="atk,mac" class="ex">X</div> |
| <div role="banner" data-role="banner" data-platform="atk,mac" class="ex">X</div> |
| <div role="button" data-role="button" data-platform="atk,mac" class="ex">X</div> |
| <div role="checkbox" data-role="checkbox" data-platform="atk,mac" class="ex">X</div> |
| <div role="combobox" data-role="combobox" data-platform="atk,mac" class="ex">X</div> |
| <div role="complementary" data-role="complementary" data-platform="atk,mac" class="ex">X</div> |
| <div role="contentinfo" data-role="contentinfo" data-platform="atk,mac" class="ex">X</div> |
| <div role="definition" data-role="definition" data-platform="atk,mac" class="ex">X</div> |
| <div role="dialog" data-role="dialog" data-platform="atk,mac" class="ex">X</div> |
| <div role="directory" data-role="list" data-platform="atk,mac" class="ex">X</div><!-- FIXME: should be directory --> |
| <div role="document" data-role="document" data-platform="atk,mac" class="ex">X</div> |
| <div role="figure" data-role="figure" data-platform="atk,mac" class="ex">X</div> |
| <div role="form" data-role="form" data-platform="atk,mac" class="ex">X</div> |
| <div role="graphics-document" data-role="document" data-platform="atk,mac" class="ex">X</div> |
| <div role="graphics-object" data-role="group" data-platform="atk,mac" class="ex">X</div> |
| <div role="graphics-symbol" data-role="img" data-platform="atk,mac" class="ex">X</div> |
| <div role="grid" data-role="grid" data-platform="atk,mac" class="ex"> |
| <div role="rowgroup" data-role="rowgroup" data-platform="atk,mac" class="ex"> |
| <div role="row" data-role="row" data-platform="atk,mac" class="ex"> |
| <div role="rowheader" data-role="rowheader" data-platform="atk,mac" class="ex">X</div> |
| <div role="columnheader" data-role="columnheader" data-platform="atk,mac" class="ex">X</div> |
| <div role="gridcell" data-role="gridcell" data-platform="atk,mac" class="ex">X</div> |
| </div> |
| </div> |
| </div> |
| <div role="feed" data-role="feed" data-platform="atk,mac" class="ex">X</div> |
| <div role="group" data-role="group" data-platform="atk,mac" class="ex">X</div> |
| <div role="heading" data-role="heading" data-platform="atk,mac" class="ex">X</div> |
| <div role="img" data-role="img" data-platform="atk,mac" class="ex">X</div> |
| <div role="link" data-role="link" data-platform="atk,mac" class="ex">X</div> |
| <div role="list" data-role="list" data-platform="atk,mac" class="ex"> |
| <div role="listitem" data-role="listitem" data-platform="atk,mac" class="ex">X</div> |
| </div> |
| <div role="listbox" data-role="listbox" data-platform="atk,mac" class="ex"> |
| <div role="option" data-role="option" data-platform="atk,mac" class="ex">X</div> |
| </div> |
| <div role="log" data-role="log" data-platform="atk,mac" class="ex">X</div> |
| <div role="main" data-role="main" data-platform="atk,mac" class="ex">X</div> |
| <div role="marquee" data-role="marquee" data-platform="atk,mac" class="ex">X</div> |
| <div role="math" data-role="math" data-platform="atk,mac" class="ex">X</div> |
| <div role="menu" data-role="menu" data-platform="atk,mac" class="ex"> |
| <div role="menuitem" data-role="menuitem" data-platform="atk,mac" class="ex">X</div> |
| <div role="menuitemcheckbox" data-role="menuitemcheckbox" data-platform="atk,mac" class="ex">X</div> |
| <div role="menuitemradio" data-role="menuitemradio" data-platform="atk,mac" class="ex">X</div> |
| </div> |
| <div role="menubar" data-role="menubar" data-platform="atk,mac" class="ex"> |
| <div role="menuitem" data-role="menuitem" data-platform="atk,mac" class="ex">X</div> |
| <div role="menuitemcheckbox" data-role="menuitemcheckbox" data-platform="atk,mac" class="ex">X</div> |
| <div role="menuitemradio" data-role="menuitemradio" data-platform="atk,mac" class="ex">X</div> |
| </div> |
| <div role="navigation" data-role="navigation" data-platform="atk,mac" class="ex">X</div> |
| <div role="note" data-role="note" data-platform="atk,mac" class="ex">X</div> |
| <div role="presentation" data-role="" data-platform="atk,mac" class="ex">X</div> |
| <div role="progressbar" data-role="progressbar" data-platform="atk,mac" class="ex">X</div> |
| <div role="radiogroup" data-role="radiogroup" data-platform="atk,mac" class="ex"> |
| <div role="radio" data-role="radio" data-platform="atk,mac" class="ex">X</div> |
| </div> |
| <div role="region" data-platform="atk,mac" class="ex" data-role="" data-note=":not([aria-label]:not([aria-labelledby])">X</div> |
| <div role="region" data-platform="atk,mac" class="ex" data-role="region" aria-label="x" data-note="[aria-label]">X</div> |
| <div role="region" data-platform="atk,mac" class="ex" data-role="region" aria-labelledby="region-label" data-note="[aria-labelledby]"> |
| <h2 id="region-label">X</h2> |
| </div> |
| |
| <div role="scrollbar" data-role="scrollbar" data-platform="atk,mac" class="ex">X</div> |
| <div role="search" data-role="search" data-platform="atk,mac" class="ex">X</div> |
| <div role="separator" data-role="separator" data-platform="atk,mac" class="ex">X</div> |
| <div role="slider" data-role="slider" data-platform="atk,mac" class="ex">X</div> |
| <div role="spinbutton" data-role="spinbutton" data-platform="atk,mac" class="ex">X</div> |
| <div role="status" data-role="status" data-platform="atk,mac" class="ex">X</div> |
| <div role="tablist" data-role="tablist" data-platform="atk,mac" class="ex"> |
| <div role="tab" data-role="tab" data-platform="atk,mac" class="ex">X</div> |
| </div> |
| <div role="tabpanel" data-role="tabpanel" data-platform="atk,mac" class="ex">X</div> |
| <div role="textbox" data-role="" data-platform="atk,mac" class="ex">X</div><!-- FIXME: should be textbox --> |
| <div role="term" data-role="term" data-platform="atk,mac" class="ex">X</div> |
| <div role="timer" data-role="timer" data-platform="atk,mac" class="ex">X</div> |
| <div role="toolbar" data-role="toolbar" data-platform="atk,mac" class="ex">X</div> |
| <div role="tooltip" data-role="tooltip" data-platform="atk,mac" class="ex">X</div> |
| <div role="tree" data-role="tree" data-platform="atk,mac" class="ex"> |
| <div role="treeitem" data-role="treeitem" data-platform="atk,mac" class="ex">X</div> |
| <div role="group" data-role="group" data-platform="atk,mac" class="ex"> |
| <div role="treeitem" data-role="treeitem" data-platform="atk,mac" class="ex">X</div> |
| </div> |
| </div> |
| <div role="treegrid" data-role="treegrid" data-platform="atk,mac" class="ex"> |
| <div role="rowgroup" data-role="rowgroup" data-platform="atk,mac" class="ex"> |
| <div role="row" data-role="row" data-platform="atk,mac" class="ex"> |
| <div role="rowheader" data-role="rowheader" data-platform="atk,mac" class="ex">X</div> |
| <div role="columnheader" data-role="columnheader" data-platform="atk,mac" class="ex">X</div> |
| <div role="gridcell" data-role="gridcell" data-platform="atk,mac" class="ex">X</div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <!-- ==================================================================================================== --> |
| <!-- generic role attribute parsing tests --> |
| <!-- ==================================================================================================== --> |
| <div role="button foo" data-role="button" data-platform="atk,mac" class="ex">X</div> |
| <div role="foo button bar" data-role="button" data-platform="atk,mac" class="ex">X</div> |
| <div role="foo button bar" data-role="button" data-platform="atk,mac" class="ex">X</div><!-- [sic] Two spaces in role string --> |
| |
| <!-- FIXME: These two should be button but fail b/c of http://webkit.org/b/128400 --> |
| <div role="foo button bar" data-role="" data-platform="atk,mac" class="ex">X</div><!-- [sic] Tab chars in role string --> |
| <div role="foo |
| button |
| bar" data-role="" data-platform="atk,mac" class="ex">X</div><!-- [sic] Newlines in role string --> |
| |
| |
| <!-- ==================================================================================================== --> |
| <!-- implicit role parsing tests --> |
| <!-- ==================================================================================================== --> |
| <img role="foo" src="foo.png" data-role="img" alt="X" data-platform="atk,mac" class="ex"> |
| <img role="foo bar" src="foo.png" data-role="img" alt="X" data-platform="atk,mac" class="ex"> |
| <img role="foo bar" src="foo.png" data-role="img" alt="X" data-platform="atk,mac" class="ex"><!-- [sic] Two spaces in role string --> |
| <img role="foo bar" src="foo.png" data-role="img" alt="X" data-platform="atk,mac" class="ex"><!-- [sic] Newline in role string --> |
| <img role="foo |
| bar" src="foo.png" data-role="img" alt="X" data-platform="atk,mac" class="ex"><!-- [sic] Tab char in role string --> |
| <img role="text" src="foo.png" data-role="text" alt="X" data-platform="atk,mac" class="ex"> |
| <img role="text img" src="foo.png" data-role="text" alt="X" data-platform="atk,mac" class="ex"> |
| <img role="img text" src="foo.png" data-role="img" alt="X" data-platform="atk,mac" class="ex"> |
| <img role="presentation" data-role="img" data-note="[aria-label]" alt="X" src="foo.png" aria-label="X" data-platform="atk,mac" class="ex"><!-- presentation with global attr should fallback to implicit role --> |
| <a href="#" role="foo bar" data-role="link" data-platform="atk,mac" class="ex">X</a> |
| </div> |
| |
| <div id="console"></div> |
| <script> |
| if (window.testRunner && window.accessibilityController) { |
| description("This tests that native elements and ARIA overrides result in the same ARIA computed role, regardless of platform.") |
| var examples = document.querySelectorAll(".ex"); |
| var el, contentAttrRoleString, axElement, computedAriaRole, output, expectedRole, expectation, result, note; |
| var currentPlatform = accessibilityController.platformName; |
| for (var i = 0, c = examples.length; i < c; i++) { |
| el = examples[i]; |
| el.id = "ex" + i |
| |
| axElement = accessibilityController.accessibleElementById(el.id); |
| if (!axElement) |
| continue; |
| |
| supportedPlatforms = el.getAttribute('data-platform'); |
| if (!supportedPlatforms || supportedPlatforms.indexOf(currentPlatform) == -1) |
| continue; |
| |
| computedAriaRole = axElement.computedRoleString; |
| |
| contentAttrRoleString = el.getAttribute("role"); |
| note = el.getAttribute("data-note") |
| output = el.tagName.toLowerCase() + (contentAttrRoleString ? ("[role=\""+contentAttrRoleString+"\"]") : "") + (note ? note : ""); |
| output += " -> "; |
| output += computedAriaRole; |
| output += ". "; |
| |
| expectedRole = ""; |
| if (el.hasAttribute("data-role")) { |
| expectedRole = el.getAttribute("data-role"); |
| } |
| |
| expectation = expectedRole; |
| matchedResults = (computedAriaRole == expectedRole) |
| |
| result = document.getElementById('console'); |
| if (matchedResults) { |
| result.innerText += "PASS: " + output + "\n"; |
| } else { |
| result.innerText += "FAIL: " + output + "Expected: " + expectation + ".\n"; |
| } |
| } |
| |
| // Once tests are complete, hide all the example markup. |
| document.getElementById("content").style.visibility = "hidden"; |
| } |
| </script> |
| <script src="../resources/js-test-post.js"></script> |
| </body> |
| </html> |
