appearance-affects-role.html | Explore in Territory

<!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: AXDate");
    }, "Test computed AX role for <input type=date>");

    test(function () {
        check("idatetimelocal", "AXRole: AXDateTime");
    }, "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: AXDateTime");
    }, "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: AXSearchBox");
    }, "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: AXDateTime");
    }, "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: AXComboBoxSelect");
    }, "Test computed AX role for <select>");

    test(function () {
        check("multiselect", "AXRole: AXListBox");
    }, "Test computed AX role for <select multiple>");
</script>
chromium/third_party/blink/web_tests/accessibility/appearance-affects-role.html
