| <!DOCTYPE HTML> |
| <html> |
| <body> |
| <script src="../resources/js-test.js"></script> |
| |
| <div> |
| <a id="link1" href="#">Link</a> |
| <button id="button1">Button</button> |
| A<input id="text1" type="text" value="Value"> |
| B<input id="text-readonly1" type="text" value="Value" readonly> |
| C<input id="text-readonly2" type="text" value="Value" readonly aria-readonly="false"> |
| D<input id="checkbox1" type="checkbox" checked> |
| E<input id="number1" type="number" value="123"> |
| F<input id="radio1" type="radio" checked> |
| G<input id="slider1" type="range" min="1" max="10" value="5"> |
| H<input id="submit1" type="submit"> |
| I<select id="combobox1"><option>1<option selected>2</select> |
| J<select multiple id="listbox1"><option>1<option selected>2</select> |
| K<textarea id="textarea1">Textarea</textarea> |
| L<textarea id="textarea-readonly1" readonly>Textarea</textarea> |
| M<textarea id="textarea-readonly2" readonly aria-readonly="false">Textarea</textarea> |
| N<div id="focusable1" tabindex="0">Focusable</div> |
| <h5 id="heading1" tabindex="0">Heading</h5> |
| <div id="div1" tabindex="0" aria-readonly="true">Plain div can't be readonly</div> |
| <div id="aria-button1" tabindex="0" role="button" aria-readonly="false">ARIA button</div> |
| <div id="aria-togglebutton1" tabindex="0" role="button" aria-pressed="false">ARIA toggle button</div> |
| <div id="aria-link1" tabindex="0" role="link">ARIA link</div> |
| <div id="aria-slider1" tabindex="0" role="slider" aria-readonly="true">ARIA slider</div> |
| <div id="aria-progress1" tabindex="0" role="progressbar" aria-readonly="true">ARIA progress meter</div> |
| <div id="aria-textbox1" tabindex="0" role="textbox" aria-readonly="true">ARIA textbox</div> |
| <div id="contenteditable_root1" contentEditable> |
| <button id="contenteditable_button1">Button</button> |
| </div> |
| <div id="contenteditable_root-readonly1" contentEditable aria-readonly="true"> |
| </div> |
| <div id="contenteditable_root-readonly2" role="textbox" contentEditable aria-readonly="true"> |
| </div> |
| <div id="contenteditable_root-readonly3" tabindex="0" role="textbox" contentEditable="false" aria-readonly="true"> |
| </div> |
| |
| </div> |
| |
| <div id="console"></div> |
| <script> |
| description("This tests which elements expose themselves as readonly. Readonly here refers to whether the item is not editable, not whether a control value can be changed vs if it's unavailable."); |
| |
| if (window.testRunner && window.accessibilityController) { |
| testRunner.dumpAsText(); |
| |
| function check(id, expected_readonly) { |
| debug(id); |
| window.element = document.getElementById(id); |
| element.focus(); |
| shouldBe("document.activeElement == element", "true"); |
| window.axElement = accessibilityController.focusedElement; |
| |
| shouldBe("axElement.isReadOnly", "" + expected_readonly); |
| debug(""); |
| } |
| |
| check("link1", false); |
| check("button1", false); |
| check("text1", false); |
| check("text-readonly1", true); |
| check("text-readonly2", true); |
| check("checkbox1", false); |
| check("number1", false); |
| check("radio1", false); |
| check("slider1", false); |
| check("submit1", false); |
| check("combobox1", false); |
| check("listbox1", false); |
| check("textarea1", false); |
| check("textarea-readonly1", true); |
| check("textarea-readonly2", true); |
| check("focusable1", false); |
| check("heading1", false); |
| check("div1", false); |
| check("aria-button1", false); |
| check("aria-togglebutton1", false); |
| check("aria-link1", false); |
| check("aria-slider1", true); |
| check("aria-progress1", false); |
| check("aria-textbox1", true); |
| check("contenteditable_root1", false); |
| check("contenteditable_button1", false); |
| // This is correct according to ARIA spec, as aria-readonly is supported |
| // on specific roles only -- it is not a universal ARIA property. |
| check("contenteditable_root-readonly1", false); |
| // This is correct according to HTML-AAM, the readonly state is ignored if |
| // the element is set to contenteditable and readonly="true", |
| check("contenteditable_root-readonly2", false); |
| check("contenteditable_root-readonly3", true); |
| } |
| |
| </script> |
| |
| </body> |
| </html> |