test_input_date_key_events.html (7530B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1286182 5 --> 6 <head> 7 <title>Test key events for date control</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <script src="/tests/SimpleTest/EventUtils.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 11 <meta charset="UTF-8"> 12 </head> 13 <body> 14 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1286182">Mozilla Bug 1286182</a> 15 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1804669">Mozilla Bug 1804669</a> 16 <p id="display"></p> 17 <div id="content"> 18 <input id="input" type="date"> 19 <div id="host"></div> 20 </div> 21 <pre id="test"> 22 <script type="application/javascript"> 23 24 SimpleTest.waitForExplicitFinish(); 25 SimpleTest.waitForFocus(function() { 26 test(); 27 SimpleTest.finish(); 28 }); 29 30 var testData = [ 31 /** 32 * keys: keys to send to the input element. 33 * initialVal: initial value set to the input element. 34 * expectedVal: expected value of the input element after sending the keys. 35 */ 36 { 37 // Type 11222016, default order is month, day, year. 38 keys: ["11222016"], 39 initialVal: "", 40 expectedVal: "2016-11-22" 41 }, 42 { 43 // Type 3 in the month field will automatically advance to the day field, 44 // then type 5 in the day field will automatically advance to the year 45 // field. 46 keys: ["352016"], 47 initialVal: "", 48 expectedVal: "2016-03-05" 49 }, 50 { 51 // Type 13 in the month field will set it to the maximum month, which is 52 // 12. 53 keys: ["13012016"], 54 initialVal: "", 55 expectedVal: "2016-12-01" 56 }, 57 { 58 // Type 00 in the month field will set it to the minimum month, which is 1. 59 keys: ["00012016"], 60 initialVal: "", 61 expectedVal: "2016-01-01" 62 }, 63 { 64 // Type 33 in the day field will set it to the maximum day, which is 31. 65 keys: ["12332016"], 66 initialVal: "", 67 expectedVal: "2016-12-31" 68 }, 69 { 70 // Type 00 in the day field will set it to the minimum day, which is 1. 71 keys: ["12002016"], 72 initialVal: "", 73 expectedVal: "2016-12-01" 74 }, 75 { 76 // Type 275769 in the year field will set it to 2757 and 69 will be set when a blur event happens. 77 keys: ["0101275769"], 78 initialVal: "", 79 expectedVal: "2757-01-01" 80 }, 81 { 82 // Type 02292024 in the input will set the year field to 2024. 83 keys: ["02292024"], 84 initialVal: "", 85 expectedVal: "2024-02-29" 86 }, 87 { 88 // Type 0000 in the year field will set it to the minimum year, which is 89 // 0001. 90 keys: ["01010000"], 91 initialVal: "", 92 expectedVal: "0001-01-01" 93 }, 94 { 95 // Advance to year field and decrement. 96 keys: ["KEY_Tab", "KEY_Tab", "KEY_ArrowDown"], 97 initialVal: "2016-11-25", 98 expectedVal: "2015-11-25" 99 }, 100 { 101 // Right key should do the same thing as TAB key. 102 keys: ["KEY_ArrowRight", "KEY_ArrowRight", "KEY_ArrowDown"], 103 initialVal: "2016-11-25", 104 expectedVal: "2015-11-25" 105 }, 106 { 107 // Advance to day field then back to month field and decrement. 108 keys: ["KEY_ArrowRight", "KEY_ArrowLeft", "KEY_ArrowDown"], 109 initialVal: "2000-05-01", 110 expectedVal: "2000-04-01" 111 }, 112 { 113 // Focus starts on the first field, month in this case, and increment. 114 keys: ["KEY_ArrowUp"], 115 initialVal: "2000-03-01", 116 expectedVal: "2000-04-01" 117 }, 118 { 119 // Advance to day field and decrement. 120 keys: ["KEY_Tab", "KEY_ArrowDown"], 121 initialVal: "1234-01-01", 122 expectedVal: "1234-01-31" 123 }, 124 { 125 // Advance to day field and increment. 126 keys: ["KEY_Tab", "KEY_ArrowUp"], 127 initialVal: "1234-01-01", 128 expectedVal: "1234-01-02" 129 }, 130 { 131 // PageUp on month field increments month by 3. 132 keys: ["KEY_PageUp"], 133 initialVal: "1999-01-01", 134 expectedVal: "1999-04-01" 135 }, 136 { 137 // PageDown on month field decrements month by 3. 138 keys: ["KEY_PageDown"], 139 initialVal: "1999-01-01", 140 expectedVal: "1999-10-01" 141 }, 142 { 143 // PageUp on day field increments day by 7. 144 keys: ["KEY_Tab", "KEY_PageUp"], 145 initialVal: "1999-01-01", 146 expectedVal: "1999-01-08" 147 }, 148 { 149 // PageDown on day field decrements day by 7. 150 keys: ["KEY_Tab", "KEY_PageDown"], 151 initialVal: "1999-01-01", 152 expectedVal: "1999-01-25" 153 }, 154 { 155 // PageUp on year field increments year by 10. 156 keys: ["KEY_Tab", "KEY_Tab", "KEY_PageUp"], 157 initialVal: "1999-01-01", 158 expectedVal: "2009-01-01" 159 }, 160 { 161 // PageDown on year field decrements year by 10. 162 keys: ["KEY_Tab", "KEY_Tab", "KEY_PageDown"], 163 initialVal: "1999-01-01", 164 expectedVal: "1989-01-01" 165 }, 166 { 167 // Home key on month field sets it to the minimum month, which is 01. 168 keys: ["KEY_Home"], 169 initialVal: "2016-06-01", 170 expectedVal: "2016-01-01" 171 }, 172 { 173 // End key on month field sets it to the maximum month, which is 12. 174 keys: ["KEY_End"], 175 initialVal: "2016-06-01", 176 expectedVal: "2016-12-01" 177 }, 178 { 179 // Home key on day field sets it to the minimum day, which is 01. 180 keys: ["KEY_Tab", "KEY_Home"], 181 initialVal: "2016-01-10", 182 expectedVal: "2016-01-01" 183 }, 184 { 185 // End key on day field sets it to the maximum day, which is 31. 186 keys: ["KEY_Tab", "KEY_End"], 187 initialVal: "2016-01-10", 188 expectedVal: "2016-01-31" 189 }, 190 { 191 // Home key should have no effect on year field. 192 keys: ["KEY_Tab", "KEY_Tab", "KEY_Home"], 193 initialVal: "2016-01-01", 194 expectedVal: "2016-01-01" 195 }, 196 { 197 // End key should have no effect on year field. 198 keys: ["KEY_Tab", "KEY_Tab", "KEY_End"], 199 initialVal: "2016-01-01", 200 expectedVal: "2016-01-01" 201 }, 202 { 203 // Incomplete value maps to empty .value. 204 keys: ["1111"], 205 initialVal: "", 206 expectedVal: "" 207 }, 208 { 209 // Backspace key should clean a month field and map to empty .value. 210 keys: ["KEY_Backspace"], 211 initialVal: "2016-01-01", 212 expectedVal: "" 213 }, 214 { 215 // Backspace key should clean a day field and map to empty .value. 216 keys: ["KEY_Tab", "KEY_Backspace"], 217 initialVal: "2016-01-01", 218 expectedVal: "" 219 }, 220 { 221 // Backspace key should clean a year field and map to empty .value. 222 keys: ["KEY_Tab", "KEY_Tab", "KEY_Backspace"], 223 initialVal: "2016-01-01", 224 expectedVal: "" 225 }, 226 { 227 // Backspace key on Calendar button should not change a value. 228 keys: ["KEY_Tab", "KEY_Tab", "KEY_Tab", "KEY_Backspace"], 229 initialVal: "2016-01-01", 230 expectedVal: "2016-01-01" 231 }, 232 ]; 233 234 function sendKeys(aKeys) { 235 for (let i = 0; i < aKeys.length; i++) { 236 let key = aKeys[i]; 237 if (key.startsWith("KEY_")) { 238 synthesizeKey(key); 239 } else { 240 sendString(key); 241 } 242 } 243 } 244 245 function test() { 246 document.querySelector("#host").attachShadow({ mode: "open" }).innerHTML = ` 247 <input type="date"> 248 `; 249 250 function chromeListener(e) { 251 ok(false, "Picker should not be opened when dispatching untrusted click."); 252 } 253 254 for (const elem of [document.getElementById("input"), document.getElementById("host").shadowRoot.querySelector("input")]) { 255 for (let { keys, initialVal, expectedVal } of testData) { 256 elem.focus(); 257 elem.value = initialVal; 258 sendKeys(keys); 259 is(elem.value, expectedVal, 260 "Test with " + keys + ", result should be " + expectedVal); 261 elem.value = ""; 262 elem.blur(); 263 } 264 SpecialPowers.addChromeEventListener("MozOpenDateTimePicker", 265 chromeListener); 266 elem.click(); 267 SpecialPowers.removeChromeEventListener("MozOpenDateTimePicker", 268 chromeListener); 269 } 270 } 271 272 </script> 273 </pre> 274 </body> 275 </html>