blob: f8bc0d47de19067a026f875e02266a0afb5e1cb7 [file] [log] [blame]
<!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'), undefined);
// 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'), undefined);
}, "Role presentation toggled on table.");
test(function(t) {
assert_equals(axElementById('opt1').role, "AXRole: AXListBoxOption");
// Change @size to "1"
document.getElementById('select1').setAttribute('size', '1');
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>