third_party/WebKit/LayoutTests/fast/forms/date-multiple-fields/date-multiple-fields-keyboard-events.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <p id="description"></p>
   8 <p>
   9 Please run this with DumpRenderTree.
  10 </p>
  11 Test following keys:
  12 <ul>
  13     <li>Digits</li>
  14     <li>Left/Right - Move focus field inside element</li>
  15     <li>Up/Down - Increment/decrement value of focus field</li>
  16     <li>Tab - Move focus field</li>
  17     <li>Backspace - Make value empty</li>
  18 </ul>
  19 <input id="before">
  20 <input id="input" type="date">
  21 <input id="after">
  22 <div id="console"></div>
  23 <script>
  24 description('Multiple fields UI of month input type with keyboard events');
  25 if (window.internals)
  26     internals.settings.setLangAttributeAwareFormControlUIEnabled(true);
  27 var input = document.getElementById('input');
  28
  29 function keyDown(key, modifiers)
  30 {
  31     if (!window.eventSender)
  32         return;
  33     eventSender.keyDown(key, modifiers);
  34 }
  35
  36 function beginTest(opt_title, opt_value, opt_min, opt_max)
  37 {
  38     if (opt_title)
  39         debug('== ' + opt_title + ' ==');
  40     input.value = opt_value || '';
  41     input.min = opt_min ? opt_min : '';
  42     input.max = opt_max ? opt_max : '';
  43     input.blur();
  44     input.focus();
  45 }
  46
  47 // We assume the date format is MM/dd/yyyy.
  48
  49 beginTest('Digit keys');
  50 keyDown('9'); // -> 09/[dd]/yyyy
  51 keyDown('2'); // -> 09/[02]/yyyy
  52 keyDown('0'); // -> 09/20/[yyyy]
  53 keyDown('1'); // -> 09/20/[0001]
  54 keyDown('2'); // -> 09/20/[0012]
  55 keyDown('A'); // Ignored.
  56 shouldBeEqualToString('input.value', '0012-09-20');
  57
  58 beginTest('Digit keys starting with zero');
  59 keyDown('0'); // -> [00]/dd/yyyy
  60 keyDown('2'); // -> 02/[dd]/yyyy
  61 keyDown('0'); // -> 02/[00]/yyyy
  62 keyDown('3'); // -> 02/03/[yyyy]
  63 keyDown('0'); // -> 02/03/[0000]
  64 keyDown('0'); // -> 02/03/[0000]
  65 keyDown('0'); // -> 02/03/[0000]
  66 keyDown('4'); // -> 02/03/[0004]
  67 keyDown('4'); // -> 02/03/[0044]
  68 shouldBeEqualToString('input.value', '0044-02-03');
  69
  70 beginTest('Digit keys and backspace key');
  71 keyDown('1'); // -> [01]/dd/yyyy
  72 keyDown("\b"); // -> [mm]/20/2012
  73 keyDown('5'); // -> 05/[dd]/yyyy
  74 keyDown('6'); // -> 05/06/[yyyy]
  75 keyDown("\b"); // -> 05/06/[yyyy]
  76 keyDown('7'); // -> 05/06/[0007]
  77 keyDown("\b"); // -> 05/06/[yyyy]
  78 keyDown('8'); // -> 05/06/[0008]
  79 shouldBeEqualToString('input.value', '0008-05-06');
  80
  81 beginTest('Digit keys with maximum value', null, null, '2013-01-01');
  82 keyDown('5'); // -> 05/[dd]/yyyy
  83 keyDown('6'); // -> 05/06/[yyyy]
  84 keyDown('2'); // -> 05/06/[0002]
  85 keyDown('0'); // -> 05/06/[0020]
  86 keyDown('1'); // -> 05/06/[0201]
  87 keyDown('4'); // -> 05/06/[2014] We accept a value larger than the maximum.
  88 shouldBeEqualToString('input.value', '2014-05-06');
  89 keyDown('5'); // -> 05/06/[0145] We don't accept a value of which the number of digits is longer than one of the maximum.
  90 shouldBeEqualToString('input.value', '0145-05-06');
  91
  92 beginTest('Digit keys with minimum value', null, '2013-01-01');
  93 keyDown('5'); // -> 05/[dd]/yyyy
  94 keyDown('6'); // -> 05/06/[yyyy]
  95 keyDown('1'); // -> 05/06/[0001]
  96 keyDown('9'); // -> 05/06/[0019]
  97 keyDown('9'); // -> 05/06/[0199]
  98 keyDown('9'); // -> 05/06/1999
  99 shouldBeEqualToString('input.value', '1999-05-06');
 100
 101 beginTest('Entering "00" to month', '2013-04-16');
 102 keyDown('0'); // -> [00]/16/2013
 103 keyDown('0'); // -> 01/[16]/2013
 104 shouldBeEqualToString('input.value', '2013-01-16');
 105
 106 beginTest('Entering "13" to month', '2013-04-16');
 107 keyDown('1'); // -> [01]/16/2013
 108 keyDown('3'); // -> 12/[16]/2013
 109 shouldBeEqualToString('input.value', '2013-12-16');
 110
 111 beginTest('Left/Right keys', '2012-09-29');
 112 keyDown('rightArrow'); // -> 09/[29]/2012
 113 keyDown('5'); // -> 09/05/[2012]
 114 keyDown('leftArrow'); // -> 09/[05]/2012
 115 keyDown('6'); // -> 09/06/[2012]
 116 shouldBeEqualToString('input.value', '2012-09-06');
 117 keyDown('leftArrow'); // -> 09/[06]/2012
 118 keyDown('leftArrow'); // -> [09]/06/2012
 119 keyDown('leftArrow'); // -> [09]/06/2012
 120 shouldBeEqualToString('document.activeElement.id', 'input');
 121
 122 beginTest('Up/Down keys', '2012-09-29');
 123 keyDown('upArrow'); // -> [10]/29/2012
 124 shouldBeEqualToString('input.value', '2012-10-29');
 125 keyDown('downArrow'); // -> [09]/29/2012
 126 keyDown('downArrow'); // -> [08]/29/2012
 127 shouldBeEqualToString('input.value', '2012-08-29');
 128
 129 beginTest('Up/Down keys on empty value');
 130 keyDown('downArrow'); //  -> [12]/dd/yyyy
 131 keyDown('downArrow'); //  -> [11]/dd/yyyy
 132 keyDown('rightArrow'); // -> 11/[dd]/yyyy
 133 keyDown('upArrow'); //    -> 11/[01]/yyyy
 134 keyDown('upArrow'); //    -> 11/[02]/yyyy
 135 keyDown('downArrow'); //  -> 11/[01]/yyyy
 136 keyDown('rightArrow'); // -> 11/01/[yyyy]
 137 var currentYear = new Date().getFullYear();
 138 keyDown('upArrow'); // -> 11/01/[current year]
 139 shouldBe('input.value', 'currentYear + "-11-01"');
 140
 141 beginTest('Up/Down keys on empty value 2');
 142 keyDown('upArrow'); //    -> [01]/dd/yyyy
 143 keyDown('upArrow'); //    -> [02]/dd/yyyy
 144 keyDown('rightArrow'); // -> 02/[dd]/yyyy
 145 keyDown('downArrow'); //  -> 02/[31]/yyyy
 146 keyDown('downArrow'); //  -> 02/[30]/yyyy
 147 keyDown('downArrow'); //  -> 02/[29]/yyyy
 148 keyDown('downArrow'); //  -> 02/[28]/yyyy
 149 keyDown('rightArrow'); // -> 02/28/[yyyy]
 150 currentYear = new Date().getFullYear();
 151 keyDown('downArrow'); // -> 02/28/[current year]
 152 shouldBe('input.value', 'currentYear + "-02-28"');
 153
 154 beginTest('Tab key', '2012-09-30');
 155 keyDown('\t'); // -> 09/[30]/2012
 156 keyDown('5'); // -> 09/05/[2012]
 157 shouldBeEqualToString('input.value', '2012-09-05');
 158 keyDown('\t', ['shiftKey']); // -> 09/[05]/2012
 159 keyDown('7'); // -> 09/07/[2012]
 160 shouldBeEqualToString('input.value', '2012-09-07');
 161 keyDown('\t'); // -> Focus out.
 162 shouldBeEqualToString('document.activeElement.id', 'after');
 163
 164 beginTest('Shfit+Tab key', '2012-09-30');
 165 after.focus();
 166 keyDown('\t', ['shiftKey']); // -> 09/30/[yyyy]
 167 keyDown('3'); // -> 09/30/[0003]
 168 shouldBeEqualToString('input.value', '0003-09-30');
 169 keyDown('\t', ['shiftKey']); // -> 09/[30]/0003
 170 keyDown('\t', ['shiftKey']); // -> [09]/30/0003
 171 keyDown('\t', ['shiftKey']); // -> Focus out.
 172 shouldBeEqualToString('document.activeElement.id', 'before');
 173
 174 beginTest('Up key on maximum value', '275760-09-13');
 175 keyDown('upArrow'); // -> [10]/13/275760
 176 keyDown('\t'); //      -> 10/[13]/275760
 177 keyDown('upArrow'); // -> 10/[14]/275760
 178 keyDown('\t'); //      -> 10/14/[275760]
 179 keyDown('upArrow'); // -> 10/14/[0001]
 180 shouldBeEqualToString('input.value', '0001-10-14');
 181 beginTest('Up key with a maximum attribute', '1999-12-31', '1000-01-01', '1999-12-31');
 182 keyDown('upArrow'); // -> [01]/31/1999
 183 keyDown('\t'); //      -> 01/[31]/1999
 184 keyDown('upArrow'); // -> 01/[01]/1999
 185 keyDown('\t'); //      -> 01/01/[1999]
 186 keyDown('upArrow'); // -> 01/01/[1000]
 187 shouldBeEqualToString('input.value', '1000-01-01');
 188
 189 beginTest('Down key on minimum value', '0001-01-01', 'bad min', 'wrong max');
 190 keyDown('downArrow'); // -> [12]/01/0001
 191 keyDown('\t'); //        -> 12/[01]/0001
 192 keyDown('downArrow'); // -> 12/[31]/0001
 193 keyDown('\t'); //        -> 12/31/[0001]
 194 keyDown('downArrow'); // -> 12/31/[275760], which is greater than the hard limit.
 195 shouldBeEqualToString('input.value', '');
 196 beginTest('Down key with a minimum attribute', '1000-01-01', '1000-01-01');
 197 keyDown('downArrow'); // -> [12]/01/1000
 198 keyDown('\t'); //        -> 12/[01]/1000
 199 keyDown('downArrow'); // -> 12/[31]/1000
 200 keyDown('\t'); //        -> 12/31/[1000]
 201 keyDown('downArrow'); // -> 12/31/275760, which is greater than the hard limit.
 202 shouldBeEqualToString('input.value', '');
 203
 204 beginTest('Inconsistent min-max attributes', '1999-12-31', '1999-12-31', '1000-01-01');
 205 keyDown('\t'); // -> 12/[31]/1999
 206 keyDown('\t'); // -> 12/31/[1999]
 207 keyDown('upArrow'); // -> 12/31/[1000].  1000 is the swapped minimum year.
 208 shouldBeEqualToString('input.value', '1000-12-31');
 209 keyDown('downArrow'); // -> 12/31/[1999]
 210 shouldBeEqualToString('input.value', '1999-12-31');
 211
 212 beginTest('Make an invalid date', '2012-02-01');
 213 keyDown('\t'); //        -> 02/[01]/2012
 214 keyDown('downArrow'); // -> 02/[31]/2012
 215 shouldBeEqualToString('input.value', ''); // 2012-02-31 is not a valid date.
 216 input.setAttribute('value', '2012-02-01');
 217 beginTest(undefined, '2012-02-01');
 218 keyDown('\t'); //        -> 02/[01]/2012
 219 keyDown('downArrow'); // -> 02/[31]/2012
 220 shouldBeEqualToString('input.value', ''); // 2012-02-31 is not a valid date.
 221 input.removeAttribute('value');
 222
 223 beginTest('Backspace key', '2012-09-20');
 224 keyDown("\b"); // -> [mm]/20/2012
 225 shouldBeEqualToString('input.value', '');
 226
 227 beginTest('Delete key', '2012-09-30');
 228 keyDown("delete"); // -> [mm]/30/2012
 229 shouldBeEqualToString('input.value', '');
 230
 231 beginTest('Typeahead', '2012-12-31');
 232 keyDown('rightArrow'); // -> 12/[31]/2012
 233 keyDown('1'); //          -> 12/[01]/2012
 234 shouldBeEqualToString('input.value', '2012-12-01');
 235 keyDown('leftArrow'); //  -> [12]/01/2012
 236 keyDown('rightArrow'); // -> 12/[01]/2012
 237 keyDown('2'); //          -> 12/[02]/2012
 238 shouldBeEqualToString('input.value', '2012-12-02');
 239
 240 input.setAttribute("lang", "he-il");
 241 beginTest('RTL focus navigation', '2012-09-28');
 242 debug('The tests in this block fail on platforms without the lang-attribute-aware-form-control-UI feature.');
 243 // Both of the logical order and visual order are: dd/MM/yyyy
 244 // Initial state:            [28]/09/2012
 245 keyDown('upArrow'); //    -> [29]/09/2012
 246 keyDown('rightArrow'); // -> [01]/09/2012
 247 keyDown('1'); //          -> [01]/09/2012
 248 shouldBeEqualToString('input.value', '2012-09-01');
 249 keyDown('\t'); //         -> 01/[09]/2012
 250 keyDown('2'); //          -> 01/02/[2012]
 251 shouldBeEqualToString('input.value', '2012-02-01');
 252 keyDown('\t', ['shiftKey']); // -> 01/[02]/2012/
 253 keyDown('3'); //          -> 01/03/[2012]
 254 shouldBeEqualToString('input.value', '2012-03-01');
 255 input.removeAttribute("lang");
 256
 257 beginTest('Disabled/readonly', '2012-10-08');
 258 input.disabled = true;
 259 keyDown('upArrow'); // 10/08/2012
 260 shouldBeEqualToString('input.value', '2012-10-08');
 261 input.disabled = false;
 262 input.focus();
 263 keyDown('upArrow'); // [11]/08/2012
 264 shouldBeEqualToString('input.value', '2012-11-08');
 265 input.readOnly = true;
 266 keyDown('upArrow'); // 11/08/2012
 267 shouldBeEqualToString('input.value', '2012-11-08');
 268 input.readOnly = false;
 269 input.focus();
 270 keyDown('upArrow'); // [12]/08/2012
 271 shouldBeEqualToString('input.value', '2012-12-08');
 272
 273 </script>
 274 </body>
 275 </html>