mozilla-central/dom/html/test/forms/test_input_date_key_events.html (file symbol)

Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!DOCTYPE HTML>
<html>
<!--
-->
<head>
<title>Test key events for date control</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<meta charset="UTF-8">
</head>
<body>
<p id="display"></p>
<div id="content">
<input id="input" type="date">
<div id="host"></div>
</div>
<pre id="test">
<script type="application/javascript">
SimpleTest.waitForExplicitFinish();
SimpleTest.waitForFocus(function() {
test();
SimpleTest.finish();
});
var testData = [
/**
* keys: keys to send to the input element.
* initialVal: initial value set to the input element.
* expectedVal: expected value of the input element after sending the keys.
*/
{
// Type 11222016, default order is month, day, year.
keys: ["11222016"],
initialVal: "",
expectedVal: "2016-11-22"
},
{
// Type 3 in the month field will automatically advance to the day field,
// then type 5 in the day field will automatically advance to the year
// field.
keys: ["352016"],
initialVal: "",
expectedVal: "2016-03-05"
},
{
// Type 13 in the month field will set it to the maximum month, which is
// 12.
keys: ["13012016"],
initialVal: "",
expectedVal: "2016-12-01"
},
{
// Type 00 in the month field will set it to the minimum month, which is 1.
keys: ["00012016"],
initialVal: "",
expectedVal: "2016-01-01"
},
{
// Type 33 in the day field will set it to the maximum day, which is 31.
keys: ["12332016"],
initialVal: "",
expectedVal: "2016-12-31"
},
{
// Type 00 in the day field will set it to the minimum day, which is 1.
keys: ["12002016"],
initialVal: "",
expectedVal: "2016-12-01"
},
{
// Type 275769 in the year field will set it to 2757 and 69 will be set when a blur event happens.
keys: ["0101275769"],
initialVal: "",
expectedVal: "2757-01-01"
},
{
// Type 02292024 in the input will set the year field to 2024.
keys: ["02292024"],
initialVal: "",
expectedVal: "2024-02-29"
},
{
// Type 0000 in the year field will set it to the minimum year, which is
// 0001.
keys: ["01010000"],
initialVal: "",
expectedVal: "0001-01-01"
},
{
// Advance to year field and decrement.
keys: ["KEY_Tab", "KEY_Tab", "KEY_ArrowDown"],
initialVal: "2016-11-25",
expectedVal: "2015-11-25"
},
{
// Right key should do the same thing as TAB key.
keys: ["KEY_ArrowRight", "KEY_ArrowRight", "KEY_ArrowDown"],
initialVal: "2016-11-25",
expectedVal: "2015-11-25"
},
{
// Advance to day field then back to month field and decrement.
keys: ["KEY_ArrowRight", "KEY_ArrowLeft", "KEY_ArrowDown"],
initialVal: "2000-05-01",
expectedVal: "2000-04-01"
},
{
// Focus starts on the first field, month in this case, and increment.
keys: ["KEY_ArrowUp"],
initialVal: "2000-03-01",
expectedVal: "2000-04-01"
},
{
// Advance to day field and decrement.
keys: ["KEY_Tab", "KEY_ArrowDown"],
initialVal: "1234-01-01",
expectedVal: "1234-01-31"
},
{
// Advance to day field and increment.
keys: ["KEY_Tab", "KEY_ArrowUp"],
initialVal: "1234-01-01",
expectedVal: "1234-01-02"
},
{
// PageUp on month field increments month by 3.
keys: ["KEY_PageUp"],
initialVal: "1999-01-01",
expectedVal: "1999-04-01"
},
{
// PageDown on month field decrements month by 3.
keys: ["KEY_PageDown"],
initialVal: "1999-01-01",
expectedVal: "1999-10-01"
},
{
// PageUp on day field increments day by 7.
keys: ["KEY_Tab", "KEY_PageUp"],
initialVal: "1999-01-01",
expectedVal: "1999-01-08"
},
{
// PageDown on day field decrements day by 7.
keys: ["KEY_Tab", "KEY_PageDown"],
initialVal: "1999-01-01",
expectedVal: "1999-01-25"
},
{
// PageUp on year field increments year by 10.
keys: ["KEY_Tab", "KEY_Tab", "KEY_PageUp"],
initialVal: "1999-01-01",
expectedVal: "2009-01-01"
},
{
// PageDown on year field decrements year by 10.
keys: ["KEY_Tab", "KEY_Tab", "KEY_PageDown"],
initialVal: "1999-01-01",
expectedVal: "1989-01-01"
},
{
// Home key on month field sets it to the minimum month, which is 01.
keys: ["KEY_Home"],
initialVal: "2016-06-01",
expectedVal: "2016-01-01"
},
{
// End key on month field sets it to the maximum month, which is 12.
keys: ["KEY_End"],
initialVal: "2016-06-01",
expectedVal: "2016-12-01"
},
{
// Home key on day field sets it to the minimum day, which is 01.
keys: ["KEY_Tab", "KEY_Home"],
initialVal: "2016-01-10",
expectedVal: "2016-01-01"
},
{
// End key on day field sets it to the maximum day, which is 31.
keys: ["KEY_Tab", "KEY_End"],
initialVal: "2016-01-10",
expectedVal: "2016-01-31"
},
{
// Home key should have no effect on year field.
keys: ["KEY_Tab", "KEY_Tab", "KEY_Home"],
initialVal: "2016-01-01",
expectedVal: "2016-01-01"
},
{
// End key should have no effect on year field.
keys: ["KEY_Tab", "KEY_Tab", "KEY_End"],
initialVal: "2016-01-01",
expectedVal: "2016-01-01"
},
{
// Incomplete value maps to empty .value.
keys: ["1111"],
initialVal: "",
expectedVal: ""
},
{
// Backspace key should clean a month field and map to empty .value.
keys: ["KEY_Backspace"],
initialVal: "2016-01-01",
expectedVal: ""
},
{
// Backspace key should clean a day field and map to empty .value.
keys: ["KEY_Tab", "KEY_Backspace"],
initialVal: "2016-01-01",
expectedVal: ""
},
{
// Backspace key should clean a year field and map to empty .value.
keys: ["KEY_Tab", "KEY_Tab", "KEY_Backspace"],
initialVal: "2016-01-01",
expectedVal: ""
},
{
// Backspace key on Calendar button should not change a value.
keys: ["KEY_Tab", "KEY_Tab", "KEY_Tab", "KEY_Backspace"],
initialVal: "2016-01-01",
expectedVal: "2016-01-01"
},
];
function sendKeys(aKeys) {
for (let i = 0; i < aKeys.length; i++) {
let key = aKeys[i];
if (key.startsWith("KEY_")) {
synthesizeKey(key);
} else {
sendString(key);
}
}
}
function test() {
document.querySelector("#host").attachShadow({ mode: "open" }).innerHTML = `
<input type="date">
`;
function chromeListener(e) {
ok(false, "Picker should not be opened when dispatching untrusted click.");
}
for (const elem of [document.getElementById("input"), document.getElementById("host").shadowRoot.querySelector("input")]) {
for (let { keys, initialVal, expectedVal } of testData) {
elem.focus();
elem.value = initialVal;
sendKeys(keys);
is(elem.value, expectedVal,
"Test with " + keys + ", result should be " + expectedVal);
elem.value = "";
elem.blur();
}
SpecialPowers.addChromeEventListener("MozOpenDateTimePicker",
chromeListener);
elem.click();
SpecialPowers.removeChromeEventListener("MozOpenDateTimePicker",
chromeListener);
}
}
</script>
</pre>
</body>
</html>