blob: 959c99141e22a24d38c8574b34a82399de52c0dd [file] [log] [blame]
<!DOCTYPE HTML>
<title>Accessibility: elements with -webkit-appearance: none retain the correct role.</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<!--
This test checks that elements with -webkit-appearance: none, do not lose their
AXRole.
-->
<style>
button,
input,
meter,
progress,
textarea,
select {
-webkit-appearance: none;
}
</style>
<button id="button">test</button>
<input id="ibutton" type="button" value="test">
<input id="icolor" type="color">
<input id="idate" type="date">
<input id="idatetimelocal" type="datetime-local">
<input id="ifile" type="file">
<input id="imonth" type="month">
<input id="inumber" type="number">
<input id="ipassword" type="password">
<input id="iradio" type="radio">
<input id="irange" type="range">
<input id="ireset" type="reset">
<input id="isearch" type="search">
<input id="isubmit" type="submit">
<input id="itext" type="text">
<input id="itime" type="time">
<input id="iweek" type="week">
<input id="idatalist" list="datalist">
<datalist id="datalist">
<option value="foo">
<option value="bar">
</datalist>
<meter id="meter" min="0" max="100" value="50"></meter>
<progress id="progress" value="20" max="100"></progress>
<textarea id="textarea"></textarea>
<select id="select">
<option value="0">0</option>
</select>
<select id="multiselect" multiple>
<option value="0">hello</option>
<option value="1">world</option>
</select>
<script>
function check(id, expectedRole) {
var axObject = accessibilityController.accessibleElementById(id);
assert_equals(axObject.role, expectedRole);
}
test(function () {
check("button", "AXRole: AXButton");
}, "Test computed AX role for <button>");
test(function () {
check("ibutton", "AXRole: AXButton");
}, "Test computed AX role for <input type=button>");
test(function () {
check("icolor", "AXRole: AXColorWell");
}, "Test computed AX role for <input type=color>");
test(function () {
check("idate", "AXRole: AXDateField");
}, "Test computed AX role for <input type=date>");
test(function () {
check("idatetimelocal", "AXRole: AXDateTimeField");
}, "Test computed AX role for <input type=datetime-local>");
test(function () {
check("ifile", "AXRole: AXButton");
}, "Test computed AX role for <input type=file>");
test(function () {
check("imonth", "AXRole: AXDateTimeField");
}, "Test computed AX role for <input type=month>");
test(function () {
check("inumber", "AXRole: AXSpinButton");
}, "Test computed AX role for <input type=number>");
test(function () {
check("ipassword", "AXRole: AXTextField");
}, "Test computed AX role for <input type=password>");
test(function () {
check("iradio", "AXRole: AXRadioButton");
}, "Test computed AX role for <input type=radio>");
test(function () {
check("irange", "AXRole: AXSlider");
}, "Test computed AX role for <input type=range>");
test(function () {
check("ireset", "AXRole: AXButton");
}, "Test computed AX role for <input type=reset>");
test(function () {
check("isearch", "AXRole: AXTextField");
}, "Test computed AX role for <input type=search>");
test(function () {
check("isubmit", "AXRole: AXButton");
}, "Test computed AX role for <input type=submit>");
test(function () {
check("itext", "AXRole: AXTextField");
}, "Test computed AX role for <input type=text>");
test(function () {
check("itime", "AXRole: AXInputTime");
}, "Test computed AX role for <input type=time>");
test(function () {
check("iweek", "AXRole: AXDateTimeField");
}, "Test computed AX role for <input type=week>");
test(function () {
check("idatalist", "AXRole: AXTextFieldWithComboBox");
}, "Test computed AX role for <input list=datalist>");
test(function () {
check("meter", "AXRole: AXMeter");
}, "Test computed AX role for <meter>");
test(function () {
check("progress", "AXRole: AXProgressIndicator");
}, "Test computed AX role for <progress>");
test(function () {
check("textarea", "AXRole: AXTextField");
}, "Test computed AX role for <textarea>");
test(function () {
check("select", "AXRole: AXPopUpButton");
}, "Test computed AX role for <select>");
test(function () {
check("multiselect", "AXRole: AXListBox");
}, "Test computed AX role for <select multiple>");
</script>