|
1 <html> |
|
2 |
|
3 <head> |
|
4 <title>ARIA selection event testing</title> |
|
5 |
|
6 <link rel="stylesheet" type="text/css" |
|
7 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> |
|
8 |
|
9 <script type="application/javascript" |
|
10 src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> |
|
11 <script type="application/javascript" |
|
12 src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> |
|
13 |
|
14 <script type="application/javascript" |
|
15 src="../common.js"></script> |
|
16 <script type="application/javascript" |
|
17 src="../events.js"></script> |
|
18 <script type="application/javascript" |
|
19 src="../role.js"></script> |
|
20 <script type="application/javascript" |
|
21 src="../states.js"></script> |
|
22 |
|
23 <script type="application/javascript"> |
|
24 //////////////////////////////////////////////////////////////////////////// |
|
25 // Invokers |
|
26 |
|
27 function selectItem(aSelectID, aItemID) |
|
28 { |
|
29 this.selectNode = getNode(aSelectID); |
|
30 this.itemNode = getNode(aItemID); |
|
31 |
|
32 this.eventSeq = [ |
|
33 new invokerChecker(EVENT_SELECTION, aItemID) |
|
34 ]; |
|
35 |
|
36 this.invoke = function selectItem_invoke() { |
|
37 var itemNode = this.selectNode.querySelector("*[aria-selected='true']"); |
|
38 if (itemNode) |
|
39 itemNode.removeAttribute("aria-selected"); |
|
40 |
|
41 this.itemNode.setAttribute("aria-selected", "true"); |
|
42 } |
|
43 |
|
44 this.getID = function selectItem_getID() |
|
45 { |
|
46 return "select item " + prettyName(aItemID); |
|
47 } |
|
48 } |
|
49 |
|
50 //////////////////////////////////////////////////////////////////////////// |
|
51 // Do tests |
|
52 |
|
53 var gQueue = null; |
|
54 |
|
55 //gA11yEventDumpToConsole = true; // debug stuff |
|
56 |
|
57 function doTests() |
|
58 { |
|
59 gQueue = new eventQueue(); |
|
60 |
|
61 gQueue.push(new selectItem("tablist", "tab1")); |
|
62 gQueue.push(new selectItem("tablist", "tab2")); |
|
63 |
|
64 gQueue.push(new selectItem("tree", "treeitem1")); |
|
65 gQueue.push(new selectItem("tree", "treeitem1a")); |
|
66 gQueue.push(new selectItem("tree", "treeitem1a1")); |
|
67 |
|
68 gQueue.push(new selectItem("tree2", "tree2item1")); |
|
69 gQueue.push(new selectItem("tree2", "tree2item1a")); |
|
70 gQueue.push(new selectItem("tree2", "tree2item1a1")); |
|
71 |
|
72 gQueue.invoke(); // Will call SimpleTest.finish(); |
|
73 } |
|
74 |
|
75 SimpleTest.waitForExplicitFinish(); |
|
76 addA11yLoadEvent(doTests); |
|
77 </script> |
|
78 </head> |
|
79 |
|
80 <body> |
|
81 |
|
82 <a target="_blank" |
|
83 href="https://bugzilla.mozilla.org/show_bug.cgi?id=569653" |
|
84 title="Make selection events async"> |
|
85 Mozilla Bug 569653 |
|
86 </a> |
|
87 <a target="_blank" |
|
88 href="https://bugzilla.mozilla.org/show_bug.cgi?id=804040" |
|
89 title="Selection event not fired when selection of ARIA tab changes"> |
|
90 Mozilla Bug 804040 |
|
91 </a> |
|
92 |
|
93 <p id="display"></p> |
|
94 <div id="content" style="display: none"></div> |
|
95 <pre id="test"> |
|
96 </pre> |
|
97 |
|
98 <div role="tablist" id="tablist"> |
|
99 <div role="tab" id="tab1">tab1</div> |
|
100 <div role="tab" id="tab2">tab2</div> |
|
101 </div> |
|
102 |
|
103 <div id="tree" role="tree"> |
|
104 <div id="treeitem1" role="treeitem">Canada |
|
105 <div id="treeitem1a" role="treeitem">- Ontario |
|
106 <div id="treeitem1a1" role="treeitem">-- Toronto</div> |
|
107 </div> |
|
108 <div id="treeitem1b" role="treeitem">- Manitoba</div> |
|
109 </div> |
|
110 <div id="treeitem2" role="treeitem">Germany</div> |
|
111 <div id="treeitem3" role="treeitem">Russia</div> |
|
112 </div> |
|
113 |
|
114 <div id="tree2" role="tree" aria-multiselectable="true"> |
|
115 <div id="tree2item1" role="treeitem">Canada |
|
116 <div id="tree2item1a" role="treeitem">- Ontario |
|
117 <div id="tree2item1a1" role="treeitem">-- Toronto</div> |
|
118 </div> |
|
119 <div id="tree2item1b" role="treeitem">- Manitoba</div> |
|
120 </div> |
|
121 <div id="tree2item2" role="treeitem">Germany</div> |
|
122 <div id="tree2item3" role="treeitem">Russia</div> |
|
123 </div> |
|
124 |
|
125 <div id="eventdump"></div> |
|
126 </body> |
|
127 </html> |