ee41b5e2635b7a46d0e99101fe49d0a386a44daa
[WebKit-https.git] / LayoutTests / accessibility / canvas-fallback-content.html
1 <!DOCTYPE HTML>
2 <html>
3 <body>
4 <script src="../resources/js-test-pre.js"></script>
5 <script src="../resources/accessibility-helper.js"></script>
6 <style>
7 myelement {
8   display: block;
9 }
10 </style>
11
12 <div>
13   <a id="link1" href="#">Link</a>
14   <button id="button1">Button</button>
15   <input id="text1" type="text">
16   <input id="checkbox1" type="checkbox">
17   <input id="radio1" type="radio">
18   <input id="submit1" type="submit">
19   <select id="combobox1"><option>1<option>2</select>
20   <myelement id="focusable1" tabindex="0">Focusable</myelement>
21   <div id="aria-button1" tabindex="0" role="button">ARIA button</div>
22   <div id="aria-link1" tabindex="0" role="link">ARIA link</div>
23 </div>
24
25 <canvas id="myCanvas" width="300" height="300">
26   <a id="link2" href="#">Link</a>
27   <button id="button2">Button</button>
28   <input id="text2" type="text">
29   <input id="checkbox2" type="checkbox">
30   <input id="radio2" type="radio">
31   <input id="submit2" type="submit">
32   <select id="combobox2"><option>1<option>2</select>
33   <myelement id="focusable2" tabindex="0">Focusable</myelement>
34   <div id="aria-button2" tabindex="0" role="button">ARIA button</div>
35   <div id="aria-link2" tabindex="0" role="link">ARIA link</div>
36 </canvas>
37
38 <div id="console"></div>
39 <script>
40 description("This test makes sure that focusable elements in canvas fallback content are accessible.");
41
42 if (window.testRunner && window.accessibilityController) {
43     window.testRunner.dumpAsText();
44
45     function check(id, expectedRole) {
46         debug(id);
47         window.element = document.getElementById(id);
48         element.focus();
49         shouldBe("document.activeElement == element", "true");
50         window.axElement = accessibilityController.focusedElement;
51         shouldBe("axElement.role", "\"" + expectedRole + "\"");
52         debug("");
53     }
54
55     var comboBoxRole = platformRoleForComboBox(accessibilityController.platformName);
56
57     // Check rendered controls.
58     check("link1", "AXRole: AXLink");
59     check("button1", "AXRole: AXButton");
60     check("text1", "AXRole: AXTextField");
61     check("checkbox1", "AXRole: AXCheckBox");
62     check("radio1", "AXRole: AXRadioButton");
63     check("submit1", "AXRole: AXButton");
64     check("combobox1", comboBoxRole);
65     check("focusable1", "AXRole: AXGroup");
66     check("aria-button1", "AXRole: AXButton");
67     check("aria-link1", "AXRole: AXLink");
68
69     // Check unrendered controls inside a canvas.
70     check("link2", "AXRole: AXLink");
71     check("button2", "AXRole: AXButton");
72     check("text2", "AXRole: AXTextField");
73     check("checkbox2", "AXRole: AXCheckBox");
74     check("radio2", "AXRole: AXRadioButton");
75     check("submit2", "AXRole: AXButton");
76     check("combobox2", comboBoxRole);
77     check("focusable2", "AXRole: AXGroup");
78     check("aria-button2", "AXRole: AXButton");
79     check("aria-link2", "AXRole: AXLink");
80
81     // Check that the role is updated when the element changes.
82     document.getElementById('focusable1').setAttribute('role', 'button');
83     check("focusable1", "AXRole: AXButton");
84     document.getElementById('focusable2').setAttribute('role', 'button');
85     check("focusable2", "AXRole: AXButton");
86 }
87
88 </script>
89
90 <script src="../resources/js-test-post.js"></script>
91 </body>
92 </html>