toolkit/content/tests/chrome/test_datepicker.xul

branch
TOR_BUG_3246
changeset 7
129ffea94266
equal deleted inserted replaced
-1:000000000000 0:08e403dd87c4
1 <?xml version="1.0"?>
2 <?xml-stylesheet href="chrome://global/skin" type="text/css"?>
3 <?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
4 <!--
5 XUL Widget Test for datepicker
6 -->
7 <window title="datepicker" width="500" height="600"
8 onload="setTimeout(testtag_datepickers, 0);"
9 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
10 <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
11 <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
12
13 <hbox onpopupshown="testtag_datepicker_UI_popup()"
14 onpopuphidden="testtag_finish()">
15 <datepicker id="datepicker"/>
16 <datepicker id="datepicker-popup" type="popup"/>
17 <hbox onDOMMouseScroll="mouseScrolled = event.defaultPrevented;">
18 <datepicker id="datepicker-grid" type="grid"/>
19 </hbox>
20 </hbox>
21
22 <!-- Test-only key bindings, but must not conflict with the application. -->
23 <keyset id="mainKeyset">
24 <key id="key_alt_z" key="Z" oncommand="return" modifiers="alt"/>
25 <key id="key_ctrl_q" key="Q" oncommand="return" modifiers="control"/>
26 <key id="key_meta_e" key="E" oncommand="return" modifiers="meta"/>
27 </keyset>
28
29 <body xmlns="http://www.w3.org/1999/xhtml">
30 <p id="display"></p>
31 <div id="content" style="display: none">
32 </div>
33 <pre id="test">
34 </pre>
35 </body>
36
37 <script>
38 <![CDATA[
39
40 var mouseScrolled = false;
41
42 SimpleTest.waitForExplicitFinish();
43
44 function testtag_datepickers()
45 {
46 var dppopup = document.getElementById("datepicker-popup");
47 testtag_datepicker(document.getElementById("datepicker"), "", "datepicker");
48 testtag_datepicker(dppopup, "popup", "datepicker popup");
49 testtag_datepicker(document.getElementById("datepicker-grid"), "grid", "datepicker grid");
50 dppopup.open = true;
51 }
52
53 function testtag_finish()
54 {
55 ok(!document.getElementById("datepicker-popup").open, "datepicker popup open false again");
56
57 var dpgrid = document.getElementById("datepicker-grid");
58 synthesizeWheel(dpgrid, 5, 5, { deltaY: 10.0,
59 deltaMode: WheelEvent.DOM_DELTA_LINE });
60 is(mouseScrolled, true, "mouse scrolled");
61 is(dpgrid.displayedMonth, 2, "mouse scroll changed month");
62
63 SimpleTest.finish();
64 }
65
66 function testtag_datepicker(dp, type, testid)
67 {
68 testid += " ";
69
70 var today = new Date();
71 var tyear = today.getFullYear();
72 var tmonth = today.getMonth();
73 var tdate = today.getDate();
74
75 // testtag_comparedate(dp, testid + "initial", tyear, tmonth, tdate);
76
77 // check that setting the value property works
78 dp.value = testtag_getdatestring(tyear, tmonth, tdate);
79 testtag_comparedate(dp, testid + "set value", tyear, tmonth, tdate);
80
81 // check that setting the dateValue property works
82 dp.dateValue = today;
83 testtag_comparedate(dp, testid + "set dateValue", tyear, tmonth, tdate);
84 ok(dp.value !== today, testid + " set dateValue different date");
85
86 ok(!dp.readOnly, testid + "readOnly");
87 dp.readOnly = true;
88 ok(dp.readOnly, testid + "set readOnly");
89 dp.readOnly = false;
90 ok(!dp.readOnly, testid + "clear readOnly");
91
92 var setDateField = function(field, value, expectException,
93 expectedYear, expectedMonth, expectedDate)
94 {
95 var exh = false;
96 try {
97 dp[field] = value;
98 } catch (ex) { exh = true; }
99 is(exh, expectException, testid + "set " + field + " " + value);
100 testtag_comparedate(dp, testid + "set " + field + " " + value,
101 expectedYear, expectedMonth, expectedDate);
102 }
103
104 // check the value property
105 setDateField("value", "2003-1-27", false, 2003, 0, 27);
106 setDateField("value", "2002-11-8", false, 2002, 10, 8);
107 setDateField("value", "2001-07-02", false, 2001, 6, 2);
108 setDateField("value", "2002-10-25", false, 2002, 9, 25);
109
110 // check that the year, month and date fields can be set properly
111 setDateField("year", 2002, false, 2002, 9, 25);
112 setDateField("year", 0, true, 2002, 9, 25);
113
114 setDateField("month", 6, false, 2002, 6, 25);
115 setDateField("month", 9, false, 2002, 9, 25);
116 setDateField("month", 10, false, 2002, 10, 25);
117 setDateField("month", -1, true, 2002, 10, 25);
118 setDateField("month", 12, true, 2002, 10, 25);
119
120 setDateField("date", 9, false, 2002, 10, 9);
121 setDateField("date", 10, false, 2002, 10, 10);
122 setDateField("date", 15, false, 2002, 10, 15);
123 setDateField("date", 0, true, 2002, 10, 15);
124 setDateField("date", 32, true, 2002, 10, 15);
125
126 // check that dates overflow properly
127 setDateField("value", "2002-2-40", false, 2002, 2, 12);
128 setDateField("value", "2003-03-32", false, 2003, 3, 1);
129 setDateField("value", "2003-12-32", false, 2004, 0, 1);
130
131 // check leap year handling
132 setDateField("value", "1600-2-29", false, 1600, 1, 29);
133 setDateField("value", "2000-2-29", false, 2000, 1, 29);
134 setDateField("value", "2003-2-29", false, 2003, 2, 1);
135 setDateField("value", "2004-2-29", false, 2004, 1, 29);
136 setDateField("value", "2100-2-29", false, 2100, 2, 1);
137
138 // check invalid values for the value and dateValue properties
139 dp.value = "2002-07-15";
140 setDateField("value", "", true, 2002, 6, 15);
141 setDateField("value", "2-2", true, 2002, 6, 15);
142 setDateField("value", "2000-5-6-6", true, 2002, 6, 15);
143 setDateField("value", "2000-a-19", true, 2002, 6, 15);
144 setDateField("dateValue", "none", true, 2002, 6, 15);
145
146 // grid and popup types can display a different month than the current one
147 var isGridOrPopup = (type == "grid" || type == "popup");
148 dp.displayedMonth = 3;
149 testtag_comparedate(dp, testid + "set displayedMonth",
150 2002, isGridOrPopup ? 6 : 3, 15, 3);
151
152 dp.displayedYear = 2009;
153 testtag_comparedate(dp, testid + "set displayedYear",
154 isGridOrPopup ? 2002 : 2009, isGridOrPopup ? 6 : 3, 15, 3, 2009);
155
156 if (isGridOrPopup) {
157 dp.value = "2008-02-29";
158 dp.displayedYear = 2009;
159 is(dp.displayedMonth, 1, "set displayedYear during leap year");
160 }
161
162 is(dp.open, false, testid + "open false");
163 if (type != "popup") {
164 dp.open = true;
165 ok(!dp.open, testid + "open still false");
166 }
167
168 // check the fields
169 if (type != "grid") {
170 ok(dp.yearField instanceof HTMLInputElement, testid + "yearField");
171 ok(dp.monthField instanceof HTMLInputElement, testid + "monthField");
172 ok(dp.dateField instanceof HTMLInputElement, testid + "dateField");
173
174 testtag_datepicker_UI_fields(dp, testid);
175
176 dp.readOnly = true;
177
178 // check that keyboard usage doesn't change the value when the datepicker
179 // is read only
180 testtag_datepicker_UI_key(dp, testid + "readonly ", "2003-01-29",
181 dp.yearField, 2003, 0, 29, 2003, 0, 29);
182 testtag_datepicker_UI_key(dp, testid + "readonly ", "2003-04-29",
183 dp.monthField, 2003, 3, 29, 2003, 3, 29);
184 testtag_datepicker_UI_key(dp, testid + "readonly ", "2003-06-15",
185 dp.dateField, 2003, 5, 15, 2003, 5, 15);
186
187 dp.readOnly = false;
188 }
189 else {
190 testtag_datepicker_UI_grid(dp, "grid", testid);
191 }
192 }
193
194 function testtag_datepicker_UI_fields(dp, testid)
195 {
196 testid += "UI";
197 dp.focus();
198
199 // test adjusting the date with the up and down keys
200 testtag_datepicker_UI_key(dp, testid, "2003-01-29", dp.yearField, 2004, 0, 29, 2003, 0, 29);
201 testtag_datepicker_UI_key(dp, testid, "1600-02-29", dp.yearField, 1601, 1, 28, 1600, 1, 28);
202 testtag_datepicker_UI_key(dp, testid, "2000-02-29", dp.yearField, 2001, 1, 28, 2000, 1, 28);
203 testtag_datepicker_UI_key(dp, testid, "2004-02-29", dp.yearField, 2005, 1, 28, 2004, 1, 28);
204
205 testtag_datepicker_UI_key(dp, testid, "2003-04-29", dp.monthField, 2003, 4, 29, 2003, 3, 29);
206 testtag_datepicker_UI_key(dp, testid, "2003-01-15", dp.monthField, 2003, 1, 15, 2003, 0, 15);
207 testtag_datepicker_UI_key(dp, testid, "2003-12-29", dp.monthField, 2003, 0, 29, 2003, 11, 29);
208 testtag_datepicker_UI_key(dp, testid, "2003-03-31", dp.monthField, 2003, 3, 30, 2003, 2, 30);
209
210 testtag_datepicker_UI_key(dp, testid, "2003-06-15", dp.dateField, 2003, 5, 16, 2003, 5, 15);
211 testtag_datepicker_UI_key(dp, testid, "2003-06-01", dp.dateField, 2003, 5, 2, 2003, 5, 1);
212 testtag_datepicker_UI_key(dp, testid, "2003-06-30", dp.dateField, 2003, 5, 1, 2003, 5, 30);
213 testtag_datepicker_UI_key(dp, testid, "1600-02-28", dp.dateField, 1600, 1, 29, 1600, 1, 28);
214 testtag_datepicker_UI_key(dp, testid, "2000-02-28", dp.dateField, 2000, 1, 29, 2000, 1, 28);
215 testtag_datepicker_UI_key(dp, testid, "2003-02-28", dp.dateField, 2003, 1, 1, 2003, 1, 28);
216 testtag_datepicker_UI_key(dp, testid, "2004-02-28", dp.dateField, 2004, 1, 29, 2004, 1, 28);
217 testtag_datepicker_UI_key(dp, testid, "2100-02-28", dp.dateField, 2100, 1, 1, 2100, 1, 28);
218
219 synthesizeKeyExpectEvent('Z', { altKey: true }, $("key_alt_z"), "command", testid + " alt shortcut");
220 synthesizeKeyExpectEvent('Q', { ctrlKey: true }, $("key_ctrl_q"), "command", testid + " ctrl shortcut");
221 synthesizeKeyExpectEvent('E', { metaKey: true }, $("key_meta_e"), "command", testid + " meta shortcut");
222 }
223
224 function testtag_datepicker_UI_grid(dp, type, testid)
225 {
226 testid += "UI ";
227
228 // check that pressing the cursor keys moves the date properly. For grid
229 // types, focus the grid first. For popup types, the grid should be focused
230 // automatically when opening the popup.
231 var ktarget = dp;
232 if (type == "grid")
233 dp.focus();
234 else
235 ktarget = dp.attachedControl;
236
237 dp.value = "2003-02-22";
238
239 synthesizeKeyExpectEvent("VK_LEFT", { }, ktarget, "change", testid + "key left");
240 is(dp.value, "2003-02-21", testid + "key left");
241
242 synthesizeKeyExpectEvent("VK_RIGHT", { }, ktarget, "change", testid + "key right");
243 is(dp.value, "2003-02-22", testid + "key right");
244 synthesizeKeyExpectEvent("VK_RIGHT", { }, ktarget, "change", testid + "key right next week");
245 is(dp.value, "2003-02-23", testid + "key right next week");
246 synthesizeKeyExpectEvent("VK_LEFT", { }, ktarget, "change", testid + "key left previous week");
247 is(dp.value, "2003-02-22", testid + "key left previous week");
248
249 synthesizeKeyExpectEvent("VK_UP", { }, ktarget, "change", testid + "key up");
250 is(dp.value, "2003-02-15", testid + "key up");
251 synthesizeKeyExpectEvent("VK_DOWN", { }, ktarget, "change", testid + "key down");
252 is(dp.value, "2003-02-22", testid + "key down");
253 synthesizeKeyExpectEvent("VK_DOWN", { }, ktarget, "change");
254 is(dp.value, "2003-03-01", testid + "key down next month", testid + "key down next month");
255 synthesizeKeyExpectEvent("VK_UP", { }, ktarget, "change");
256 is(dp.value, "2003-02-22", testid + "key up previous month", testid + "key up previous month");
257
258 // the displayed month may be changed with the page up and page down keys,
259 // however this only changes the displayed month, not the current value.
260 synthesizeKeyExpectEvent("VK_PAGE_DOWN", { }, ktarget, "monthchange", testid + "key page down");
261 is(dp.value, "2003-02-22", testid + "key page down");
262
263 // the monthchange event is fired when the displayed month is changed
264 synthesizeKeyExpectEvent("VK_UP", { }, ktarget, "monthchange", testid + "key up after month change");
265 is(dp.value, "2003-02-15", testid + "key up after month change");
266
267 synthesizeKeyExpectEvent("VK_PAGE_UP", { }, ktarget, "monthchange", testid + "key page up");
268 is(dp.value, "2003-02-15", testid + "key page up");
269
270 // check handling at the start and end of the month
271 dp.value = "2010-10-01";
272 synthesizeKeyExpectEvent("VK_PAGE_UP", { }, ktarget, "monthchange", testid + "key page up 2010-10-01");
273 is(dp.displayedMonth, 8, testid + "key page up 2010-10-01 displayedMonth");
274 is(dp.displayedYear, 2010, testid + "key page up 2010-10-01 displayedYear");
275
276 dp.value = "2010-10-01";
277 synthesizeKeyExpectEvent("VK_PAGE_DOWN", { }, ktarget, "monthchange", testid + "key page down 2010-10-01");
278 is(dp.displayedMonth, 10, testid + "key page down 2010-10-01 displayedMonth");
279 is(dp.displayedYear, 2010, testid + "key page down 2010-10-01 displayedYear");
280
281 dp.value = "2010-10-31";
282 synthesizeKeyExpectEvent("VK_PAGE_UP", { }, ktarget, "monthchange", testid + "key page up 2010-10-31");
283 is(dp.displayedMonth, 8, testid + "key page up 2010-10-31 displayedMonth");
284 is(dp.displayedYear, 2010, testid + "key page up 2010-10-01 displayedYear");
285 dp.value = "2010-10-31";
286 synthesizeKeyExpectEvent("VK_PAGE_DOWN", { }, ktarget, "monthchange", testid + "key page down 2010-10-31");
287 is(dp.displayedMonth, 10, testid + "key page down 2010-10-31 displayedMonth");
288 is(dp.displayedYear, 2010, testid + "key page up 2010-10-31 displayedYear");
289
290 // check handling at the end of february
291 dp.value = "2010-03-31";
292 synthesizeKeyExpectEvent("VK_PAGE_UP", { }, ktarget, "monthchange", testid + "key page up 2010-03-31");
293 is(dp.displayedMonth, 1, testid + "key page up 2010-03-31 displayedMonth");
294 is(dp.displayedYear, 2010, testid + "key page up 2010-03-31 displayedYear");
295 synthesizeKeyExpectEvent("VK_PAGE_UP", { }, ktarget, "monthchange", testid + "key page up 2010-02-28");
296 is(dp.displayedMonth, 0, testid + "key page up 2010-02-28 displayedMonth");
297 is(dp.displayedYear, 2010, testid + "key page up 2010-02-28 displayedYear");
298
299 dp.value = "2010-01-31";
300 synthesizeKeyExpectEvent("VK_PAGE_DOWN", { }, ktarget, "monthchange", testid + "key page down 2010-01-31");
301 is(dp.displayedMonth, 1, testid + "key page down 2010-01-31 displayedMonth");
302 is(dp.displayedYear, 2010, testid + "key page up 2010-01-31 displayedYear");
303 synthesizeKeyExpectEvent("VK_PAGE_DOWN", { }, ktarget, "monthchange", testid + "key page down 2010-02-28");
304 is(dp.displayedMonth, 2, testid + "key page down 2010-02-28 displayedMonth");
305 is(dp.displayedYear, 2010, testid + "key page up 2010-02-28 displayedYear");
306
307 // check handling at the end of february during a leap year
308 dp.value = "2008-01-31";
309 synthesizeKeyExpectEvent("VK_PAGE_DOWN", { }, ktarget, "monthchange", testid + "key page down 2008-01-31");
310 is(dp.displayedMonth, 1, testid + "key page down 2008-01-31 displayedMonth");
311 is(dp.displayedYear, 2008, testid + "key page up 2008-01-31 displayedYear");
312 dp.value = "2008-03-31";
313 synthesizeKeyExpectEvent("VK_PAGE_UP", { }, ktarget, "monthchange", testid + "key page up 2008-03-31");
314 is(dp.displayedMonth, 1, testid + "key page up 2008-03-31 displayedMonth");
315 is(dp.displayedYear, 2008, testid + "key page up 2008-03-31 displayedYear");
316
317 // the value of a read only datepicker cannot be changed
318 dp.value = "2003-02-15";
319
320 dp.readOnly = true;
321 synthesizeKeyExpectEvent("VK_LEFT", { }, ktarget, "!change", testid + "key left read only");
322 is(dp.value, "2003-02-15", testid + "key left read only");
323 synthesizeKeyExpectEvent("VK_RIGHT", { }, ktarget, "!change", testid + "key right read only");
324 is(dp.value, "2003-02-15", testid + "key right read only");
325 synthesizeKeyExpectEvent("VK_DOWN", { }, ktarget, "!change", testid + "key down read only");
326 is(dp.value, "2003-02-15", testid + "key down read only");
327 synthesizeKeyExpectEvent("VK_UP", { }, ktarget, "!change", testid + "key up read only");
328 is(dp.value, "2003-02-15", testid + "key up read only");
329
330 // month can still be changed even when readonly
331 synthesizeKeyExpectEvent("VK_PAGE_DOWN", { }, ktarget, "monthchange",
332 testid + "key page up read only");
333 synthesizeKeyExpectEvent("VK_PAGE_UP", { }, ktarget, "monthchange",
334 testid + "key page down read only");
335
336 dp.readOnly = false;
337 synthesizeKeyExpectEvent("VK_LEFT", { }, ktarget, "change", testid + "key left changeable again");
338 is(dp.value, "2003-02-14", testid + "key left changeable again");
339
340 // the value of a disabled datepicker cannot be changed
341 dp.disabled = true;
342 synthesizeKeyExpectEvent("VK_LEFT", { }, ktarget, "!change", testid + "key left disabled");
343 is(dp.value, "2003-02-14", testid + "key left disabled");
344 synthesizeKeyExpectEvent("VK_RIGHT", { }, ktarget, "!change", testid + "key right disabled");
345 is(dp.value, "2003-02-14", testid + "key right disabled");
346 synthesizeKeyExpectEvent("VK_DOWN", { }, ktarget, "!change", testid + "key down disabled");
347 is(dp.value, "2003-02-14", testid + "key down disabled");
348 synthesizeKeyExpectEvent("VK_UP", { }, ktarget, "!change", testid + "key up disabled");
349 is(dp.value, "2003-02-14", testid + "key up disabled");
350
351 // month cannot be changed even when disabled
352 synthesizeKeyExpectEvent("VK_PAGE_DOWN", { }, ktarget, "!monthchange",
353 testid + "key page down disabled");
354 synthesizeKeyExpectEvent("VK_PAGE_UP", { }, ktarget, "!monthchange",
355 testid + "key page up disabled");
356
357 dp.disabled = false;
358 synthesizeKeyExpectEvent("VK_RIGHT", { }, ktarget, "change", testid + "key right enabled again");
359 is(dp.value, "2003-02-15", testid + "key right enabled again");
360 }
361
362 function testtag_datepicker_UI_popup()
363 {
364 var dppopup = document.getElementById("datepicker-popup");
365 is(dppopup.open, true, "datepicker popup after open");
366 testtag_datepicker_UI_grid(dppopup, "popup", "datepicker popup ");
367 dppopup.open = false;
368 }
369
370 function testtag_datepicker_UI_key(dp, testid, value, field,
371 uyear, umonth, udate,
372 dyear, dmonth, ddate)
373 {
374 dp.value = value;
375 field.focus();
376
377 synthesizeKey("VK_UP", { });
378 testtag_comparedate(dp, testid + " " + value + " key up", uyear, umonth, udate);
379
380 synthesizeKey("VK_DOWN", { });
381 testtag_comparedate(dp, testid + " " + value + " key down", dyear, dmonth, ddate);
382 }
383
384 function testtag_getdatestring(year, month, date)
385 {
386 month = (month < 9) ? ("0" + ++month) : month + 1;
387 if (date < 10)
388 date = "0" + date;
389 return year + "-" + month + "-" + date;
390 }
391
392 function testtag_comparedate(dp, testid, year, month, date, displayedMonth, displayedYear)
393 {
394 is(dp.value, testtag_getdatestring(year, month, date), testid + " value");
395 if (testid.indexOf("initial") == -1)
396 is(dp.getAttribute("value"),
397 testtag_getdatestring(year, month, date),
398 testid + " value attribute");
399
400 var dateValue = dp.dateValue;
401 ok(dateValue.getFullYear() == year &&
402 dateValue.getMonth() == month &&
403 dateValue.getDate() == date,
404 testid + " dateValue");
405
406 is(dp.year, year, testid + " year");
407 is(dp.month, month, testid + " month");
408 is(dp.displayedMonth, displayedMonth ? displayedMonth : month, testid + " displayedMonth");
409 is(dp.displayedYear, displayedYear ? displayedYear : year, testid + " displayedYear");
410 is(dp.date, date, testid + " date");
411 }
412
413 ]]>
414
415 </script>
416
417 </window>

mercurial