| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../resources/js-test.js"></script> |
| </head> |
| |
| <body data-role="document" data-knownFailure> |
| <div id="test-cases"> |
| <div role="alert" aria-label="This is an alert"></div> |
| |
| <div role="alertdialog" aria-label="This is an alert dialog"></div> |
| |
| <div role="application" aria-label="This is an application"></div> |
| |
| <div role="article">This is an article</div> |
| <article data-role="article">This is an article</article> |
| |
| <div role="banner">This is a banner</div> |
| <header data-role="banner">This is a banner</header> |
| |
| <div role="button">This is a button</div> |
| <div role="button" aria-pressed="true">This is a togglebutton</div> |
| <input type="button" value="This is a button" data-role="button"> |
| <button data-role="button">This is a button</button> |
| |
| <div role="complementary">This is a complementary</div> |
| <aside data-role="complementary">This is a complementary</aside> |
| |
| <div role="contentinfo">This is a contentinfo</div> |
| <footer data-role="contentinfo">This is a contentinfo</footer> |
| |
| <fieldset data-role="group"> |
| <div role="checkbox" aria-label="This is a checkbox"></div> |
| <label for="check">This is a checkbox</label> |
| <input type="checkbox" id="check" data-role="checkbox"> |
| </fieldset> |
| |
| <div role="dialog">This is a dialog</div> |
| <dialog data-role="dialog" data-knownFailure>This is a dialog</dialog> |
| |
| <div role="directory" data-knownFailure>This is a directory</div> |
| |
| <div role="grid" data-knownFailure> |
| <div role="row"> |
| <div role="columnheader" data-knownFailure> |
| This is a columnheader |
| </div> |
| </div> |
| <div role="row"> |
| <div role="gridcell"> |
| This is a gridcell |
| </div> |
| </div> |
| </div> |
| |
| <div role="combobox">This is combobox</div> |
| <input type="text" list="suggestions" data-role="combobox"> |
| <datalist id="suggestions"> |
| <option value="suggestion1" label="suggestion1"> |
| <option value="suggestion2" label="suggestion2"> |
| </datalist> |
| <select data-role="combobox" size="1"> |
| <option value="1">First option</option> |
| <option value="2">Second</option> |
| </select> |
| |
| <div role="definition">This is a definition</div> |
| |
| <div role="document">This is a document</div> |
| |
| <div role="form">This is a form</div> |
| |
| <div role="group">This is a group</div> |
| <details data-role="group" data-knownFailure> |
| <summary>This is a summary</summary> |
| This is a group |
| </details> |
| |
| <div role="heading">This is a heading</div> |
| <h1 data-role="heading">This is a heading</h1> |
| <h2 data-role="heading">This is a heading</h2> |
| <h3 data-role="heading">This is a heading</h3> |
| <h4 data-role="heading">This is a heading</h4> |
| <h5 data-role="heading">This is a heading</h5> |
| <h6 data-role="heading">This is a heading</h6> |
| |
| <div role="img">This is an image</div> |
| <img src="broken.png" data-role="img"> |
| |
| <div role="link">This is a link</div> |
| <a href="#" data-role="link">This is a link</a> |
| <map name="map"> |
| <area shape=rect coords="0, 0, 10, 10" href="#" data-role="link"> |
| </map> |
| |
| <div role="list">This is a list</div> |
| <ul data-role="list"><li data-role="listitem">This is a list item</li></ul> |
| <ol data-role="list"><li data-role="listitem">This is a list item</li></ol> |
| |
| <div role="listbox">This is a listbox</div> |
| |
| <div role="log">This is a log</div> |
| |
| <div role="main">This is main</div> |
| <main data-role="main">This is main</main> |
| |
| <div role="marquee">This is a marquee</div> |
| |
| <div role="math">This is math</div> |
| |
| <div role="menu">This is a menu</div> |
| |
| <div role="menubar">This is a menubar</div> |
| |
| <div role="menuitem">This is a menuitem</div> |
| <menu type="popup"> |
| <menuitem command="doSomething" data-role="menuitem" data-knownFailure>This is a menuitem</menuitem> |
| </menu> |
| |
| <div role="menuitemcheckbox">This is a menuitemcheckbox</div> |
| |
| <div role="menuitemradio">This is a menuitemradio</div> |
| |
| <div role="note">This is a note</div> |
| |
| <div role="navigation">This is a navigation</div> |
| <nav data-role="navigation">This is a navigation</nav> |
| |
| <div role="option">This is an option</div> |
| <select multiple> |
| <option value="1" data-role="option">First option</option> |
| <option value="2" data-role="option">Second</option> |
| </select> |
| |
| <div role="presentation">This is presentation</div> |
| <nav role="presentation">This is presentation, too</nav> |
| |
| <div role="progressbar">This is a progressbar</div> |
| <progress data-role="progressbar" max="100">10</progress> |
| <meter data-role="progressbar" max="100"></meter> |
| |
| <div role="radio">This is a radiobutton</div> |
| <input type="radio" data-role="radio"> |
| |
| <div role="radiogroup">This is a radiogroup</div> |
| |
| <div role="region">This is a region</div> |
| <section data-role="region">This is a region</section> |
| |
| <div role="scrollbar">This is a scrollbar</div> |
| |
| <div role="search">This is a search</div> |
| |
| <div role="separator">This is a separator</div> |
| <hr data-role="separator"> |
| |
| <div role="slider">This is a slider</div> |
| <input type="range" data-role="slider" value="5" max="10"> |
| |
| <div role="spinbutton">This is a spinbutton</div> |
| <input type="number" data-role="spinbutton"> |
| |
| <div role="status">This is a status</div> |
| <output data-role="status"></output> |
| |
| <div role="tablist"> |
| <div role="tab">This is a tab</div> |
| </div> |
| |
| <div role="tabpanel">This is a tabpanel</div> |
| |
| <button role="text">This is static text</button> |
| |
| <div role="textbox" data-knownFailure>This is a textbox</div> |
| <input type="email" data-role="textbox"> |
| <input type="password" data-role="textbox"> |
| <input type="search" data-role="textbox"> |
| <input type="tel" data-role="textbox"> |
| <input type="text" data-role="textbox"> |
| <input type="url" data-role="textbox"> |
| |
| <div role="timer">This is a timer</div> |
| |
| <div role="toolbar">This is a toolbar</div> |
| <menu type="toolbar" data-role="toolbar" data-knownFailure> |
| <menuitem onclick="location='help.html'" label="Help"> |
| <menuitem onclick="location='about.html'" label="About"> |
| </menu> |
| |
| <div role="tooltip">This is a tooltip</div> |
| |
| <div role="tree">This is a tree</div> |
| |
| <div role="treegrid" data-knownFailure>This is a treegrid</div> |
| |
| <div role="treeitem">This is a treeitem</div> |
| |
| <!-- also works in SVG --> |
| <svg version="1.1" width="300" height="200" aria-labelledby="svg-title"> |
| <title id="svg-title">Green rectangle</title> |
| <a xlink:href="http://example.com" tabindex="0" role="link"> |
| <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" /> |
| <text x="35" y="30" font-size="1em" text-anchor="middle" fill="#000000">Website</text> |
| </a> |
| </svg> |
| </div> |
| <script> |
| description(""); |
| |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| |
| var roleElements = document.querySelectorAll('div[role]'); |
| for (var i = 0; i < roleElements.length; i++) { |
| var roleElement = roleElements[i]; |
| var role = roleElement.getAttribute('role'); |
| if (!roleElement.hasAttribute('data-knownFailure')) { |
| var expectedRoleString = '"' + role + '"'; |
| shouldBe('roleElement.computedRole', expectedRoleString); |
| } |
| var implicitRoleElements = document.querySelectorAll('[data-role=' + role + ']'); |
| for (var j = 0; j < implicitRoleElements.length; j++) { |
| var implicitRoleElement = implicitRoleElements[j]; |
| if (!implicitRoleElement.hasAttribute('data-knownFailure')) { |
| var expectedRoleString = '"' + role + '"'; |
| shouldBe('implicitRoleElement.computedRole', expectedRoleString); |
| } |
| } |
| } |
| var svgAElement = document.querySelector('svg a'); |
| var expectedSvgARole = '"' + svgAElement.getAttribute('role') + '"'; |
| shouldBe('svgAElement.computedRole', expectedSvgARole); |
| |
| document.querySelector('#test-cases').style.display = 'none'; |
| } |
| </script> |
| |
| </body> |
| </html> |