<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../resources/js-test.js"></script>
</head>
<body data-role="generic">
<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">This is a dialog</dialog>
<div role="grid">
<div role="row">
<div role="columnheader">
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" aria-label="Named form">This is a form</div>
<form data-role="form" id="form1" aria-label="A named section is a form">This is a form</form>
<form data-role="form" aria-labelledby="form1">This is a form</form>
<form data-role="form" title="A named is a form">This is a form</form>
<div role="generic" tabindex="0">This is a generic element</div>
<div aria-live="polite" data-role="generic"></div>
<div role="group">This is a group</div>
<!-- Re-add data-role expectation for details/summary if ARIA adds mappings -->
<details> <!-- HTML-AAM 1.0 has no corresponding ARIA role -->
<summary>This is a summary</summary> <!-- No corresponding ARIA role -->
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>
<h2 data-role="heading" style="display:table">
Heading inside table
</h2>
</main>
<div role="link">This is a link</div>
<a href="#" data-role="link">This is a link</a>
<div role="image">This is an image</div>
<img src="bullet.png" data-role="image" usemap="#map">
<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" data-role="list">
<!-- <menuitem> has been deprecated since HTML 5.2, and doea not map to ARIA menuitem -->
<menuitem command="doSomething" data-role="generic">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="none">This is none/presentation</div>
<nav role="none">This is none/presentation, too</nav>
<div role="progressbar">This is a progressbar</div>
<progress data-role="progressbar" max="100">10</progress>
<div role="meter">This is a meter</div>
<meter data-role="meter" 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" aria-label="Named region">This is a region</div>
<section data-role="region" id="section1" aria-label="A named section is a region">This is a region</section>
<section data-role="region" aria-labelledby="section1">This is a region</section>
<section data-role="region" title="A named section is a 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>
<div role="textbox">This is a textbox</div>
<input type="email" data-role="textbox">
<input type="password" data-role="textbox">
<input type="search" data-role="searchbox">
<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="list">
<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">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++) {
// Test that any element with an ARIA role has the same computedRole.
var roleElement = roleElements[i];
var role = roleElement.getAttribute('role');
var expectedRoleString = '"' + role + '"';
shouldBe('roleElement.computedRole', expectedRoleString);
var implicitRoleElements = document.querySelectorAll('[data-role=' + role + ']');
// Next, test native elements that should also have that same computedRole.
for (var j = 0; j < implicitRoleElements.length; j++) {
var implicitRoleElement = implicitRoleElements[j];
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>
Codebase Browser
chromium