third_party/blink/web_tests/accessibility/computed-role.html - chromium/src - Git at Google

 <!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>
	<!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>