Bug 392535, handle keyboard navigation in popup datepicker, r=gavin

This commit is contained in:
enndeakin@sympatico.ca 2007-08-16 21:22:18 -07:00
parent 5b4cb5308a
commit 881667a9ef
2 changed files with 62 additions and 39 deletions

View File

@ -11,9 +11,12 @@
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
<hbox onpopupshown="testtag_datepicker_UI_popup()"
onpopuphidden="testtag_finish()">
<datepicker id="datepicker"/>
<datepicker id="datepicker-popup" type="popup"/>
<datepicker id="datepicker-grid" type="grid"/>
</hbox>
<body xmlns="http://www.w3.org/1999/xhtml">
<p id="display"></p>
@ -30,9 +33,16 @@ SimpleTest.waitForExplicitFinish();
function testtag_datepickers()
{
var dppopup = document.getElementById("datepicker-popup");
testtag_datepicker(document.getElementById("datepicker"), "", "datepicker");
testtag_datepicker(document.getElementById("datepicker-popup"), "popup", "datepicker popup");
testtag_datepicker(dppopup, "popup", "datepicker popup");
testtag_datepicker(document.getElementById("datepicker-grid"), "grid", "datepicker grid");
dppopup.open = true;
}
function testtag_finish()
{
ok(!document.getElementById("datepicker-popup").open, "datepicker popup open false again");
SimpleTest.finish();
}
@ -117,13 +127,8 @@ function testtag_datepicker(dp, type, testid)
setDateField("dateValue", "none", true, 2002, 6, 15);
is(dp.open, false, testid + "open false");
dp.open = true;
if (type == "popup") {
ok(dp.open, testid + "open true");
dp.open = false;
ok(!dp.open, testid + "open false again");
}
else {
if (type != "popup") {
dp.open = true;
ok(!dp.open, testid + "open still false");
}
@ -145,9 +150,11 @@ function testtag_datepicker(dp, type, testid)
dp.monthField, 2003, 3, 29, 2003, 3, 29);
testtag_datepicker_UI_key(dp, testid + "readonly ", "2003-06-15",
dp.dateField, 2003, 5, 15, 2003, 5, 15);
dp.readOnly = false;
}
else {
testtag_datepicker_UI_grid(dp, testid);
testtag_datepicker_UI_grid(dp, "grid", testid);
}
}
@ -177,87 +184,103 @@ function testtag_datepicker_UI_fields(dp, testid)
testtag_datepicker_UI_key(dp, testid, "2100-02-28", dp.dateField, 2100, 1, 1, 2100, 1, 28);
}
function testtag_datepicker_UI_grid(dp, testid)
function testtag_datepicker_UI_grid(dp, type, testid)
{
testid += "UI ";
// check that pressing the cursor keys moves the date properly
dp.focus();
// check that pressing the cursor keys moves the date properly. For grid
// types, focus the grid first. For popup types, the grid should be focused
// automatically when opening the popup.
var ktarget = dp;
if (type == "grid")
dp.focus();
else
ktarget = dp.attachedControl;
dp.value = "2003-02-22";
synthesizeKeyExpectEvent("VK_LEFT", { }, dp, "change", testid + "key left");
synthesizeKeyExpectEvent("VK_LEFT", { }, ktarget, "change", testid + "key left");
is(dp.value, "2003-02-21", testid + "key left");
synthesizeKeyExpectEvent("VK_RIGHT", { }, dp, "change", testid + "key right");
synthesizeKeyExpectEvent("VK_RIGHT", { }, ktarget, "change", testid + "key right");
is(dp.value, "2003-02-22", testid + "key right");
synthesizeKeyExpectEvent("VK_RIGHT", { }, dp, "change", testid + "key right next week");
synthesizeKeyExpectEvent("VK_RIGHT", { }, ktarget, "change", testid + "key right next week");
is(dp.value, "2003-02-23", testid + "key right next week");
synthesizeKeyExpectEvent("VK_LEFT", { }, dp, "change", testid + "key left previous week");
synthesizeKeyExpectEvent("VK_LEFT", { }, ktarget, "change", testid + "key left previous week");
is(dp.value, "2003-02-22", testid + "key left previous week");
synthesizeKeyExpectEvent("VK_UP", { }, dp, "change", testid + "key up");
synthesizeKeyExpectEvent("VK_UP", { }, ktarget, "change", testid + "key up");
is(dp.value, "2003-02-15", testid + "key up");
synthesizeKeyExpectEvent("VK_DOWN", { }, dp, "change", testid + "key down");
synthesizeKeyExpectEvent("VK_DOWN", { }, ktarget, "change", testid + "key down");
is(dp.value, "2003-02-22", testid + "key down");
synthesizeKeyExpectEvent("VK_DOWN", { }, dp, "change");
synthesizeKeyExpectEvent("VK_DOWN", { }, ktarget, "change");
is(dp.value, "2003-03-01", testid + "key down next month", testid + "key down next month");
synthesizeKeyExpectEvent("VK_UP", { }, dp, "change");
synthesizeKeyExpectEvent("VK_UP", { }, ktarget, "change");
is(dp.value, "2003-02-22", testid + "key up previous month", testid + "key up previous month");
// the displayed month may be changed with the page up and page down keys,
// however this only changes the displayed month, not the current value.
synthesizeKeyExpectEvent("VK_PAGE_DOWN", { }, dp, "monthchange", testid + "key page down");
synthesizeKeyExpectEvent("VK_PAGE_DOWN", { }, ktarget, "monthchange", testid + "key page down");
is(dp.value, "2003-02-22", testid + "key page down");
// the monthchange event is fired when the displayed month is changed
synthesizeKeyExpectEvent("VK_UP", { }, dp, "monthchange", testid + "key up after month change");
synthesizeKeyExpectEvent("VK_UP", { }, ktarget, "monthchange", testid + "key up after month change");
is(dp.value, "2003-02-15", testid + "key up after month change");
synthesizeKeyExpectEvent("VK_PAGE_UP", { }, dp, "monthchange", testid + "key page up");
synthesizeKeyExpectEvent("VK_PAGE_UP", { }, ktarget, "monthchange", testid + "key page up");
is(dp.value, "2003-02-15", testid + "key page up");
// the value of a read only datepicker cannot be changed
dp.readOnly = true;
synthesizeKeyExpectEvent("VK_LEFT", { }, dp, "!change", testid + "key left read only");
synthesizeKeyExpectEvent("VK_LEFT", { }, ktarget, "!change", testid + "key left read only");
is(dp.value, "2003-02-15", testid + "key left read only");
synthesizeKeyExpectEvent("VK_RIGHT", { }, dp, "!change", testid + "key right read only");
synthesizeKeyExpectEvent("VK_RIGHT", { }, ktarget, "!change", testid + "key right read only");
is(dp.value, "2003-02-15", testid + "key right read only");
synthesizeKeyExpectEvent("VK_DOWN", { }, dp, "!change", testid + "key down read only");
synthesizeKeyExpectEvent("VK_DOWN", { }, ktarget, "!change", testid + "key down read only");
is(dp.value, "2003-02-15", testid + "key down read only");
synthesizeKeyExpectEvent("VK_UP", { }, dp, "!change", testid + "key up read only");
synthesizeKeyExpectEvent("VK_UP", { }, ktarget, "!change", testid + "key up read only");
is(dp.value, "2003-02-15", testid + "key up read only");
// month can still be changed even when readonly
synthesizeKeyExpectEvent("VK_PAGE_DOWN", { }, dp, "monthchange",
synthesizeKeyExpectEvent("VK_PAGE_DOWN", { }, ktarget, "monthchange",
testid + "key page up read only");
synthesizeKeyExpectEvent("VK_PAGE_UP", { }, dp, "monthchange",
synthesizeKeyExpectEvent("VK_PAGE_UP", { }, ktarget, "monthchange",
testid + "key page down read only");
dp.readOnly = false;
synthesizeKeyExpectEvent("VK_LEFT", { }, dp, "change", testid + "key left changable again");
synthesizeKeyExpectEvent("VK_LEFT", { }, ktarget, "change", testid + "key left changable again");
is(dp.value, "2003-02-14", testid + "key left changable again");
// the value of a disabled datepicker cannot be changed
dp.disabled = true;
synthesizeKeyExpectEvent("VK_LEFT", { }, dp, "!change", testid + "key left disabled");
synthesizeKeyExpectEvent("VK_LEFT", { }, ktarget, "!change", testid + "key left disabled");
is(dp.value, "2003-02-14", testid + "key left disabled");
synthesizeKeyExpectEvent("VK_RIGHT", { }, dp, "!change", testid + "key right disabled");
synthesizeKeyExpectEvent("VK_RIGHT", { }, ktarget, "!change", testid + "key right disabled");
is(dp.value, "2003-02-14", testid + "key right disabled");
synthesizeKeyExpectEvent("VK_DOWN", { }, dp, "!change", testid + "key down disabled");
synthesizeKeyExpectEvent("VK_DOWN", { }, ktarget, "!change", testid + "key down disabled");
is(dp.value, "2003-02-14", testid + "key down disabled");
synthesizeKeyExpectEvent("VK_UP", { }, dp, "!change", testid + "key up disabled");
synthesizeKeyExpectEvent("VK_UP", { }, ktarget, "!change", testid + "key up disabled");
is(dp.value, "2003-02-14", testid + "key up disabled");
// month cannot be changed even when disabled
synthesizeKeyExpectEvent("VK_PAGE_DOWN", { }, dp, "!monthchange",
synthesizeKeyExpectEvent("VK_PAGE_DOWN", { }, ktarget, "!monthchange",
testid + "key page down disabled");
synthesizeKeyExpectEvent("VK_PAGE_UP", { }, dp, "!monthchange",
synthesizeKeyExpectEvent("VK_PAGE_UP", { }, ktarget, "!monthchange",
testid + "key page up disabled");
dp.disabled = false;
synthesizeKeyExpectEvent("VK_RIGHT", { }, dp, "change", testid + "key right enabled again");
synthesizeKeyExpectEvent("VK_RIGHT", { }, ktarget, "change", testid + "key right enabled again");
is(dp.value, "2003-02-15", testid + "key right enabled again");
}
function testtag_datepicker_UI_popup()
{
var dppopup = document.getElementById("datepicker-popup");
is(dppopup.open, true, "datepicker popup after open");
testtag_datepicker_UI_grid(dppopup, "popup", "datepicker popup ");
dppopup.open = false;
}
function testtag_datepicker_UI_key(dp, testid, value, field,
uyear, umonth, udate,
dyear, dmonth, ddate)

View File

@ -1231,10 +1231,10 @@
onup="this.parentNode._increaseOrDecrease(1);"
ondown="this.parentNode._increaseOrDecrease(-1);"/>
<xul:dropmarker class="datepicker-dropmarker" xbl:inherits="disabled"/>
<xul:menupopup>
<xul:panel onpopupshown="this.firstChild.focus();">
<xul:datepicker anonid="grid" type="grid" class="datepicker-popupgrid"
xbl:inherits="disabled,readonly,firstdayofweek"/>
</xul:menupopup>
</xul:panel>
</content>
<implementation>
<constructor>