| <!DOCTYPE HTML> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <div role="grid"> |
| <div role="presentation" id="row1"> |
| <div role="gridcell">Cell</div> |
| <div role="gridcell">Cell</div> |
| </div> |
| </div> |
| |
| <table role="presentation" id="table1"> |
| <caption>Real data table</caption> |
| <tr id="tr1"> |
| <td id="td1">X</td> |
| </tr> |
| </table> |
| |
| <canvas id="myCanvas" width="300" height="300"> |
| <input type="radio" id="input"> |
| </canvas> |
| |
| <!-- TODO(aleventhal) this test breaks when put in a <canvas> --> |
| <select size="2" id="select1"> |
| <option id="opt1">option 1</option> |
| <option>option 2</option> |
| </select> |
| <script> |
| |
| function axElementById(id) { |
| return accessibilityController.accessibleElementById(id); |
| } |
| |
| test(function(t) { |
| const axPresentation = axElementById('row1'); |
| assert_equals(axPresentation, undefined); |
| |
| // Change role attribute |
| document.getElementById('row1').setAttribute('role', 'row'); |
| |
| const axRow = axElementById('row1'); |
| assert_equals(axRow.role, 'AXRole: AXRow'); |
| }, "Role presentation changes to role row."); |
| |
| test(function(t) { |
| assert_equals(axElementById('table'), undefined); |
| assert_equals(axElementById('tr1'), undefined); |
| assert_equals(axElementById('td1').role, "AXRole: AXGenericContainer"); |
| |
| // Change role="presentation" |
| document.getElementById('table1').removeAttribute('role'); |
| |
| const axTable = axElementById('table1'); |
| assert_equals(axTable.role, 'AXRole: AXTable'); |
| |
| const axTableRow = axElementById('tr1'); |
| assert_equals(axTableRow.role, 'AXRole: AXRow'); |
| |
| const axTableCell = axElementById('td1'); |
| assert_equals(axTableCell.role, 'AXRole: AXCell'); |
| |
| // Change role attribute back to "presentation" |
| document.getElementById('table1').setAttribute('role', 'presentation'); |
| |
| assert_equals(axElementById('table'), undefined); |
| assert_equals(axElementById('tr1'), undefined); |
| assert_equals(axElementById('td1').role, "AXRole: AXGenericContainer"); |
| }, "Role presentation toggled on table."); |
| |
| test(function(t) { |
| assert_equals(axElementById('opt1').role, "AXRole: AXListBoxOption"); |
| assert_equals(axElementById('select1').role, "AXRole: AXListBox"); |
| |
| // Change @size to "1" |
| document.getElementById('select1').setAttribute('size', '1'); |
| assert_equals(axElementById('select1').role, 'AXRole: AXPopUpButton'); |
| assert_equals(axElementById('opt1').role, 'AXRole: AXMenuListOption'); |
| |
| // Change @size back to "2" |
| document.getElementById('select1').setAttribute('size', '2'); |
| assert_equals(axElementById('opt1').role, 'AXRole: AXListBoxOption'); |
| |
| }, "Select size change."); |
| |
| test(function(t) { |
| const axInput = axElementById('input'); |
| assert_equals(axInput.role, "AXRole: AXRadioButton"); |
| |
| // Change @type to "range" |
| document.getElementById('input').setAttribute('type', 'range'); |
| const axSlider = axElementById('input'); |
| assert_equals(axSlider.role, 'AXRole: AXSlider'); |
| }, "Input type change."); |
| |
| </script> |
