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