| <!DOCTYPE HTML> |
| <html> |
| <body> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <div> |
| <a id="link1" href="#">Link</a> |
| <button id="button1">Button</button> |
| <button id="labeled-button1" aria-label="Label">Button</button> |
| <button id="button-with-title1" title="Title">Button</button> |
| <input id="text1" type="text" value="Value"> |
| <input id="checkbox1" type="checkbox" checked> |
| <input id="number1" type="number" value="123"> |
| <input id="radio1" type="radio" checked> |
| <input id="slider1" type="range" min="1" max="10" value="5"> |
| <input id="submit1" type="submit"> |
| <select id="combobox1"><option>1<option selected>2</select> |
| <select multiple id="listbox1"><option>1<option selected>2</select> |
| <textarea id="textarea1">Textarea</textarea> |
| <div id="focusable1" tabindex="0">Focusable</div> |
| <h5 id="heading1" tabindex="0">Heading</h5> |
| <div id="aria-button1" tabindex="0" role="button">ARIA button</div> |
| <div id="aria-disabledbutton1" tabindex="0" role="button" aria-disabled="true">ARIA disabled button</div> |
| <div id="aria-enabledbutton1" tabindex="0" role="button" aria-disabled="false">ARIA enabled button</div> |
| <div id="aria-requiredbutton1" tabindex="0" role="button" aria-required="true">ARIA required 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> |
| |
| <canvas id="myCanvas" width="300" height="300"> |
| <a id="link2" href="#">Link</a> |
| <button id="button2">Button</button> |
| <button id="labeled-button2" aria-label="Label">Button</button> |
| <button id="button-with-title2" title="Title">Button</button> |
| <input id="text2" type="text" value="Value"> |
| <input id="checkbox2" type="checkbox" checked> |
| <input id="number2" type="number" value="123"> |
| <input id="radio2" type="radio" checked> |
| <input id="slider2" type="range" min="1" max="10" value="5"> |
| <input id="submit2" type="submit"> |
| <select id="combobox2"><option>1<option selected>2</select> |
| <select multiple id="listbox2"><option>1<option selected>2</select> |
| <textarea id="textarea2">Textarea</textarea> |
| <div id="focusable2" tabindex="0">Focusable</div> |
| <h5 id="heading2" tabindex="0">Heading</h5> |
| <div id="aria-button2" tabindex="0" role="button">ARIA button</div> |
| <div id="aria-disabledbutton2" tabindex="0" role="button" aria-disabled="true">ARIA disabled button</div> |
| <div id="aria-enabledbutton2" tabindex="0" role="button" aria-disabled="false">ARIA enabled button</div> |
| <div id="aria-requiredbutton2" tabindex="0" role="button" aria-required="true">ARIA required button</div> |
| <div id="aria-togglebutton2" tabindex="0" role="button" aria-pressed="false">ARIA toggle button</div> |
| <div id="aria-link2" tabindex="0" role="link">ARIA link</div> |
| </canvas> |
| |
| <div id="console"></div> |
| <script> |
| function check(id1, id2) { |
| window.element1 = document.getElementById(id1); |
| element1.focus(); |
| assert_equals(document.activeElement == element1, true); |
| window.axElement1 = accessibilityController.focusedElement; |
| |
| window.element2 = document.getElementById(id2); |
| element2.focus(); |
| assert_equals(document.activeElement == element2, true); |
| window.axElement2 = accessibilityController.focusedElement; |
| |
| assert_equals(axElement2.role, axElement1.role); |
| assert_equals(axElement2.roleDescription, axElement1.roleDescription); |
| assert_equals(axElement2.name, axElement1.name); |
| assert_equals(axElement2.description, axElement1.description); |
| assert_equals(axElement2.stringValue, axElement1.stringValue); |
| assert_equals(axElement2.isEnabled, axElement1.isEnabled); |
| assert_equals(axElement2.isRequired, axElement1.isRequired); |
| assert_equals(axElement2.isChecked, axElement1.isChecked); |
| assert_equals(axElement2.intValue, axElement1.intValue); |
| assert_equals(axElement2.minValue, axElement1.minValue); |
| assert_equals(axElement2.maxValue, axElement1.maxValue); |
| } |
| |
| test((t) => { |
| check("link1", "link2"); |
| check("button1", "button2"); |
| check("labeled-button1", "labeled-button2"); |
| check("button-with-title1", "button-with-title2"); |
| check("text1", "text2"); |
| check("checkbox1", "checkbox2"); |
| check("number1", "number2"); |
| check("radio1", "radio2"); |
| check("slider1", "slider2"); |
| check("submit1", "submit2"); |
| check("combobox1", "combobox2"); |
| check("listbox1", "listbox2"); |
| check("textarea1", "textarea2"); |
| check("focusable1", "focusable2"); |
| check("heading1", "heading2"); |
| check("aria-button1", "aria-button2"); |
| check("aria-disabledbutton1", "aria-disabledbutton2"); |
| check("aria-enabledbutton1", "aria-enabledbutton2"); |
| check("aria-requiredbutton1", "aria-requiredbutton2"); |
| check("aria-togglebutton1", "aria-togglebutton2"); |
| check("aria-link1", "aria-link2"); |
| }, "This tests a number of different elements in canvas fallback content to make sure their accessible attributes are essentially identical to the corresponding elements outside of canvas fallback content."); |
| |
| |
| </script> |
| |
| </body> |
| </html> |