blob: 95c32f7f98ecd0402733d9dd717f7131ff0031e4 [file] [log] [blame]
<script src="../resources/js-test.js"></script>
<script src="../resources/accessibility-helper.js"></script>
<div>These lists have a static text role because they have a presentation role.</div>
<ul role="presentation">
<li>Presentation Item 1</li>
<li>Presentation Item 2</li>
</ul>
<div>The first list item has a listitem role even if ul has a presentation role because it has an explicit role.</div>
<ul role="presentation">
<li role="listitem">Explicit Item 1</li>
<li>Implicit Item 2</li>
</ul>
<div>These two tables have static text roles because they have presentation roles.</div>
<table role="presentation">
<thead>
<tr>
<th>Presentation th</th>
</tr>
</thead>
<tbody>
<tr>
<td>Presentation th</td>
</tr>
</tbody>
</table>
<table role="presentation">
<tr>
<th>Presentation th</th>
</tr>
</table>
<div>The "Presentation th" has a static text role because it has a presentation role.</div>
<table>
<tr role="presentation">
<th>Presentation th</th>
</tr>
<tr>
<td>Normal td</td>
</tr>
</table>
<div>The row for "Explicit th" has a row role even if table has a presentation role because it has an explicit role.</div>
<table role="presentation">
<tr role="row">
<th>Explicit th</th>
</tr>
<tr>
<td>Implicit td</td>
</tr>
</table>
<div>The menu items except button have a static text role because it has a presentation role and is disabled.<br>
Button has a button role because it has an explicit role.</div>
<menu type="toolbar" role="presentation">
<input type="checkbox" name="vehicle" value="Bike" disabled> I have a bike
<input type="button" role="button" value="Click me" disabled>
<input type="radio" name="gender" value="male" disabled> Male
<input type="radio" name="gender" value="female" disabled> Female
</menu>
<div>The option A has a static text role because it has a presentation role and is disabled.<br>
The option B has option role because it has an explicit role.</div>
<div role="group">
<select multiple role="presentation" disabled>
<option value="A" disabled>A</option>
<option value="B" disabled role="option">B</option>
</select>
</div>
<p>End of test</p>
<p id="description"></p>
<div id="console"></div>
<script>
description("This test make sure that presentation role is inherited to required owned elements.");
if (window.testRunner)
testRunner.dumpAsText();
if (window.accessibilityController) {
// Ensure we've seen all nodes in accessibility tree.
traverseAccessibilityTree(accessibilityController.rootElement);
buildAccessibilityTree(accessibilityController.focusedElement, 0, 1);
}
</script>