| <!DOCTYPE HTML> |
| <html> |
| <body> |
| <script src="../fast/js/resources/js-test-pre.js"></script> |
| |
| <div> |
| <label id="nothing1">Nothing</label> |
| <label id="text_label1"> |
| Text |
| <input id="text1" type="text"> |
| </label> |
| <label id="check_label1"> |
| Checkbox |
| <input id="check1" type="checkbox"> |
| </label> |
| <label id="radio_label1"> |
| Radio |
| <input id="radio1" type="radio"> |
| </label> |
| <label id="slider_label1"> |
| Slider |
| <input id="slider1" type="range"> |
| </label> |
| <label id="list_label1"> |
| List |
| <select id="list1"><option>1</option></select> |
| </label> |
| <label id="label_for1" for="text_for1">Text with label for</label> |
| <input id="text_for1" type="text"> |
| </div> |
| |
| <canvas id="myCanvas" width="300" height="300"> |
| <label id="nothing2">Nothing</label> |
| <label id="text_label2"> |
| Text |
| <input id="text2" type="text"> |
| </label> |
| <label id="check_label2"> |
| Checkbox |
| <input id="check2" type="checkbox"> |
| </label> |
| <label id="radio_label2"> |
| Radio |
| <input id="radio2" type="radio"> |
| </label> |
| <label id="slider_label2"> |
| Slider |
| <input id="slider2" type="range"> |
| </label> |
| <label id="list_label2"> |
| List |
| <select id="list2"><option>1</option></select> |
| </label> |
| <label id="label_for2" for="text_for2">Text with label for</label> |
| <input id="text_for2" type="text"> |
| </canvas> |
| |
| <div id="console"></div> |
| <script> |
| description("This tests that labels and elements with labels in canvas fallback content have the same accessibility properties as those same elements outside of a canvas."); |
| |
| if (window.testRunner && window.accessibilityController) { |
| window.testRunner.dumpAsText(); |
| |
| window.collapseWhitespace = function(str) { |
| return str.replace(/\s+/g, ' ').replace(/^\s+|\s+$/g, ''); |
| } |
| |
| // Given the ids of two elements, one inside canvas fallback content and one outside, |
| // make sure their accessibility properties are the same, checking primarily properties |
| // that affect label elements and controls with labels. It's also okay if an element is |
| // missing from the tree as long as it's missing from both (like when a label is ignored). |
| function check(id1, id2) { |
| debug("Checking accessibility properties for ids: " + id1 + ", " + id2); |
| window.axElement1 = accessibilityController.accessibleElementById(id1); |
| window.axElement2 = accessibilityController.accessibleElementById(id2); |
| |
| if (axElement1 == null && axElement2 == null) { |
| shouldBe("axElement1 == null && axElement2 == null", "true"); |
| debug(""); |
| return; |
| } |
| shouldBe("axElement2.role", "axElement1.role"); |
| shouldBe("collapseWhitespace(axElement2.title)", "collapseWhitespace(axElement1.title)"); |
| shouldBe("axElement2.titleUIElement", "axElement1.titleUIElement"); |
| debug(""); |
| } |
| |
| check("nothing1", "nothing2"); |
| check("text_label1", "text_label2"); |
| check("text1", "text2"); |
| check("check_label1", "check_label2"); |
| check("check1", "check2"); |
| check("radio_label1", "radio_label2"); |
| check("radio1", "radio2"); |
| check("slider_label1", "slider_label2"); |
| check("slider1", "slider2"); |
| check("list_label1", "list_label2"); |
| check("list1", "list2"); |
| check("label_for1", "label_for2"); |
| check("text_for1", "text_for2"); |
| } |
| |
| </script> |
| |
| <script src="../fast/js/resources/js-test-post.js"></script> |
| </body> |
| </html> |
