third_party/WebKit/LayoutTests/fast/forms/datetimelocal-multiple-fields/datetimelocal-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="datetime-local">
  21 <input id="after">
  22 <div id="console"></div>
  23 <script>
  24 description('Multiple fields UI of datetime-local 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(title, opt_value, opt_min, opt_max)
  37 {
  38     debug('== ' + title + ' ==');
  39     input.value = opt_value || '';
  40     input.min = opt_min ? opt_min : '';
  41     input.max = opt_max ? opt_max : '';
  42     input.blur();
  43     input.focus();
  44 }
  45
  46 beginTest('Digit keys');
  47 keyDown('9'); // -> 09/[dd]/yyyy --:-- --
  48 keyDown('2'); // -> 09/[02]/yyyy --:-- --
  49 keyDown('0'); // -> 09/20/[yyyy] --:-- --
  50 keyDown('9'); // -> 09/20/[0009] --:-- --
  51 keyDown('8'); // -> 09/20/[0098] --:-- --
  52 keyDown('7'); // -> 09/20/[0987] --:-- --
  53 keyDown('6'); // -> 09/20/[9876] --:-- --
  54 keyDown('5'); // -> 09/20/98765 [--]:-- --
  55 keyDown('7'); // -> 09/20/98765 07:[--] --
  56 keyDown('5'); // -> 09/20/98765 07:[05] --
  57 keyDown('6'); // -> 09/20/98765 07:56 [--]
  58 keyDown('A'); // -> 09/20/98765 07:56 AM
  59 shouldBeEqualToString('input.value', '98765-09-20T07:56');
  60
  61 beginTest('Digit keys starting with zero', null, null, '9999-12-31T23:59');
  62 keyDown('0'); // -> [00]/dd/yyyy --:-- --
  63 keyDown('2'); // -> 02/[dd]/yyyy --:-- --
  64 keyDown('0'); // -> 02/[00]/yyyy --:-- --
  65 keyDown('3'); // -> 02/03/[yyyy] --:-- --
  66 keyDown('0'); // -> 02/03/[0000] --:-- --
  67 keyDown('0'); // -> 02/03/[0000] --:-- --
  68 keyDown('4'); // -> 02/03/[0044] --:-- --
  69 keyDown('4'); // -> 02/03/[0044] --:-- --
  70 keyDown('0'); // -> 02/03/0044 [00]:-- --
  71 keyDown('5'); // -> 02/03/0044 05:[--] --
  72 keyDown('0'); // -> 02/03/0044 01:[01] --
  73 keyDown('6'); // -> 02/03/0044 05:06 [--]
  74 keyDown('A'); // -> 02/03/0044 05:06 AM
  75 shouldBeEqualToString('input.value', '0044-02-03T05:06');
  76
  77 beginTest('Digit keys and backspace key');
  78 keyDown('1'); // -> [01]/dd/yyyy --:-- --
  79 keyDown("\b"); // -> [mm]/20/2012 --:-- --
  80 keyDown('5'); // -> 05/[dd]/yyyy --:-- --
  81 keyDown('6'); // -> 05/06/[yyyy] --:-- --
  82 keyDown("\b"); // -> 05/06/[yyyy] --:-- --
  83 keyDown('7'); // -> 05/06/[0007] --:-- --
  84 keyDown("\b"); // -> 05/06/[yyyy] --:-- --
  85 keyDown('8'); // -> 05/06/[0008] --:-- --
  86 keyDown('rightArrow'); // -> 05/06/0008 [--]:-- --
  87 keyDown('9'); // -> 05/06/0008 09:[--] --
  88 keyDown('1'); // -> 05/06/0008 09:[01] --
  89 keyDown('0'); // -> 05/06/0008 09:10 [--]
  90 keyDown('A'); // -> 05/06/0008 09:10 [AM]
  91 shouldBeEqualToString('input.value', '0008-05-06T09:10');
  92
  93 beginTest('Left/Right keys', '2012-09-29T00:00');
  94 keyDown('rightArrow'); // -> 09/[29]/2012 12:00 AM
  95 keyDown('5'); // -> 09/05/[2012] 12:00 AM
  96 keyDown('rightArrow'); // -> 09/05/2012 [12]:00 AM
  97 keyDown('7'); // -> 09/05/2012 07:[00] AM
  98 keyDown('rightArrow'); // -> 09/05/2012 07:00 [AM]
  99 keyDown('P'); // -> 09/05/2012 07:00 [PM]
 100 keyDown('leftArrow'); // -> 09/05/2012 07:[00] PM
 101 keyDown('5'); // -> 09/05/2012 07:[05] PM
 102 keyDown('leftArrow'); // -> 09/05/2012 [07]:05 PM
 103 keyDown('leftArrow'); // -> 09/05/[2012] 07:05 PM
 104 keyDown('4'); // -> 09/05/[0004] 07:05 PM
 105 shouldBeEqualToString('input.value', '0004-09-05T19:05');
 106 keyDown('leftArrow'); // -> 09/[05]/0004 07:05 PM
 107 keyDown('leftArrow'); // -> [09]/05/0004 07:05 PM
 108 keyDown('leftArrow'); // -> [09]/05/0004 07:05 PM
 109 shouldBeEqualToString('document.activeElement.id', 'input');
 110
 111 beginTest('Up/Down keys', '2012-09-29T00:00');
 112 keyDown('upArrow'); // -> [10]/29/2012 12:00 AM
 113 shouldBeEqualToString('input.value', '2012-10-29T00:00');
 114 keyDown('downArrow'); // -> [09]/29/2012 12:00 AM
 115 keyDown('downArrow'); // -> [08]/29/2012 12:00 AM
 116 shouldBeEqualToString('input.value', '2012-08-29T00:00');
 117
 118 beginTest('Up/Down keys on empty value');
 119 keyDown('downArrow'); //  -> [12]/dd/yyyy --:-- --
 120 keyDown('downArrow'); //  -> [11]/dd/yyyy --:-- --
 121 keyDown('rightArrow'); // -> 11/[dd]/yyyy --:-- --
 122 keyDown('upArrow'); //    -> 11/[01]/yyyy --:-- --
 123 keyDown('upArrow'); //    -> 11/[02]/yyyy --:-- --
 124 keyDown('downArrow'); //  -> 11/[01]/yyyy --:-- --
 125 keyDown('rightArrow'); // -> 11/01/[yyyy] --:-- --
 126 var currentYear = new Date().getFullYear();
 127 keyDown('upArrow'); // -> 11/01/[currentYear] --:-- --
 128 keyDown('rightArrow'); // -> 11/01/currentYear [--]:-- --
 129 keyDown('upArrow'); //    -> 11/01/currentYear [01]:-- --
 130 keyDown('rightArrow'); // -> 11/01/currentYear 01:[--] --
 131 keyDown('downArrow'); //  -> 11/01/currentYear 01:[59] --
 132 keyDown('rightArrow'); // -> 11/01/currentYear 01:59 [--]
 133 keyDown('upArrow'); //    -> 11/01/currentYear 01:59 [AM]
 134 shouldBe('input.value', 'currentYear + "-11-01T01:59"');
 135
 136 beginTest('Tab key', '2012-09-30T00:00');
 137 keyDown('\t'); // -> 09/[30]/2012 12:00 AM
 138 keyDown('5'); // -> 09/05/[2012] 12:00 AM
 139 keyDown('\t'); // -> 09/05/2012 [12]:00 AM
 140 keyDown('\t'); // -> 09/05/2012 12:[00] AM
 141 keyDown('\t'); // -> 09/05/2012 12:00 [AM]
 142 keyDown('P'); // -> 09/05/2012 12:00 [PM]
 143 shouldBeEqualToString('input.value', '2012-09-05T12:00');
 144 keyDown('\t'); // -> Focus out.
 145 shouldBeEqualToString('document.activeElement.id', 'after');
 146
 147 beginTest('Shfit+Tab key', '2012-09-30T01:00');
 148 after.focus();
 149 keyDown('\t', ['shiftKey']); // -> 09/30/2012 01:00 [AM]
 150 keyDown('P'); // -> 09/30/2012 01:00 [PM]
 151 keyDown('\t', ['shiftKey']); // -> 09/30/2012 01:[00] PM
 152 keyDown('3'); // -> 09/30/2012 01:[03] PM
 153 shouldBeEqualToString('input.value', '2012-09-30T13:03');
 154 keyDown('\t', ['shiftKey']); // -> 09/30/2012 [01]:03 PM
 155 keyDown('\t', ['shiftKey']); // -> 09/30/[2012] 01:03 PM
 156 keyDown('\t', ['shiftKey']); // -> 09/[30]/2012 01:03 PM
 157 keyDown('\t', ['shiftKey']); // -> [09]/30/2012 01:03 PM
 158 keyDown('\t', ['shiftKey']); // -> Focus out.
 159 shouldBeEqualToString('document.activeElement.id', 'before');
 160
 161 beginTest('Up key on maximum value', '275760-09-13T00:00');
 162 keyDown('upArrow'); // -> [10]/13/275760 12:00 AM
 163 keyDown('\t'); //      -> 10/[13]/275760 12:00 AM
 164 keyDown('upArrow'); // -> 10/[14]/275760 12:00 AM
 165 keyDown('\t'); //      -> 10/14/[275760] 12:00 AM
 166 keyDown('upArrow'); // -> 10/14/[0001] 12:00 AM
 167 shouldBeEqualToString('input.value', '0001-10-14T00:00');
 168 beginTest('Up key with a maximum attribute', '1999-12-31T00:00', '1000-01-01T00:00', '1999-12-31T23:59');
 169 keyDown('upArrow'); // -> [01]/31/1999 12:00 AM
 170 keyDown('\t'); //      -> 01/[31]/1999 12:00 AM
 171 keyDown('upArrow'); // -> 01/[01]/1999 12:00 AM
 172 keyDown('\t'); //      -> 01/01/[1999] 12:00 AM
 173 keyDown('upArrow'); // -> 01/01/[1000] 12:00 AM
 174 shouldBeEqualToString('input.value', '1000-01-01T00:00');
 175
 176 beginTest('Down key on minimum value', '0001-01-01T00:00', 'bad min', 'wrong max');
 177 keyDown('downArrow'); // -> [12]/01/0001 12:00 AM
 178 keyDown('\t'); //        -> 12/[01]/0001 12:00 AM
 179 keyDown('downArrow'); // -> 12/[31]/0001 12:00 AM
 180 keyDown('\t'); //        -> 12/31/[0001] 12:00 AM
 181 keyDown('downArrow'); // -> 12/31/[275760] 12:00 AM, which is greater than the hard limit.
 182 shouldBeEqualToString('input.value', '');
 183 beginTest('Down key with a minimum attribute', '1000-01-01T00:00', '1000-01-01T00:00');
 184 keyDown('downArrow'); // -> [12]/01/1000 12:00 AM
 185 keyDown('\t'); //        -> 12/[01]/1000 12:00 AM
 186 keyDown('downArrow'); // -> 12/[31]/1000 12:00 AM
 187 keyDown('\t'); //        -> 12/31/[1000] 12:00 AM
 188 keyDown('downArrow'); // -> 12/31/275760, which is greater than the hard limit.
 189 shouldBeEqualToString('input.value', '');
 190
 191 beginTest('Inconsistent min-max attributes', '1999-12-31T23:59', '1999-12-31T23:59', '1000-01-01T00:00');
 192 keyDown('\t'); // -> 12/[31]/1999 11:59 PM
 193 keyDown('\t'); // -> 12/31/[1999] 11:59 PM
 194 keyDown('upArrow'); // -> 12/31/[1000] 11:59 PM.  1000 is the swapped minimum year.
 195 shouldBeEqualToString('input.value', '1000-12-31T23:59');
 196 keyDown('downArrow'); // -> 12/31/[1999]
 197 shouldBeEqualToString('input.value', '1999-12-31T23:59');
 198
 199 beginTest('Make an invalid date', '2012-02-01T00:00');
 200 keyDown('\t'); //        -> 02/[01]/2012 12:00 AM
 201 keyDown('downArrow'); // -> 02/[31]/2012 12:00 AM
 202 shouldBeEqualToString('input.value', ''); // 2012-02-31 is not a valid date.
 203
 204 beginTest('Backspace key', '2012-09-20T00:00');
 205 keyDown('\b'); // -> [mm]/20/2012 12:00 AM
 206 shouldBeEqualToString('input.value', '');
 207
 208 beginTest('Delete key', '2012-09-30T00:00');
 209 keyDown('delete'); // -> [mm]/30/2012 12:00 AM
 210 shouldBeEqualToString('input.value', '');
 211
 212 beginTest('Typeahead', '2012-12-31T00:00');
 213 keyDown('rightArrow'); // -> 12/[31]/2012 12:00 AM
 214 keyDown('1'); //          -> 12/[01]/2012 12:00 AM
 215 shouldBeEqualToString('input.value', '2012-12-01T00:00');
 216 keyDown('leftArrow'); //  -> [12]/01/2012 12:00 AM
 217 keyDown('rightArrow'); // -> 12/[01]/2012 12:00 AM
 218 keyDown('2'); //          -> 12/[02]/2012 12:00 AM
 219 shouldBeEqualToString('input.value', '2012-12-02T00:00');
 220
 221 input.setAttribute('lang', 'he-il');
 222 beginTest('RTL focus navigation', '2012-09-28T23:00');
 223 debug('The tests in this block fail on platforms without the lang-attribute-aware-form-control-UI feature.');
 224 // The logicla order: dd/MM/yyyy hh:mm
 225 // The visual order: hh:mm dd/MM/yyyy
 226 keyDown('1'); //          -> 23:00 [01]/09/2012
 227 shouldBeEqualToString('input.value', '2012-09-01T23:00');
 228 keyDown('\t'); //         -> 23:00 01/[09]/2012
 229 keyDown('2'); //          -> 23:00 01/02/[2012]
 230 keyDown('\t'); //         -> [23]:00 2012/09/01
 231 keyDown('1'); //          -> [01]:00 01/09/2012
 232 shouldBeEqualToString('input.value', '2012-02-01T01:00');
 233 keyDown('\t', ['shiftKey']); // -> 01:00 01/09/[2012]
 234 keyDown('8'); //                -> 01:00 01/09/[0008]
 235 keyDown('\t', ['shiftKey']); // -> 01:00 01/[09]/0008
 236 keyDown('3'); //                -> 01:00 01/03/[0008]
 237 shouldBeEqualToString('input.value', '0008-03-01T01:00');
 238 input.removeAttribute('lang');
 239
 240 beginTest('Disabled/readonly', '2012-10-08T00:00');
 241 input.disabled = true;
 242 keyDown('upArrow'); // 10/08/2012 12:00 AM
 243 shouldBeEqualToString('input.value', '2012-10-08T00:00');
 244 input.disabled = false;
 245 input.focus();
 246 keyDown('upArrow'); // [11]/08/2012 12:00 AM
 247 shouldBeEqualToString('input.value', '2012-11-08T00:00');
 248 input.readOnly = true;
 249 keyDown('upArrow'); // 11/08/2012 12:00 AM
 250 shouldBeEqualToString('input.value', '2012-11-08T00:00');
 251 input.readOnly = false;
 252 input.focus();
 253 keyDown('upArrow'); // [12]/08/2012 12:00 AM
 254 shouldBeEqualToString('input.value', '2012-12-08T00:00');
 255
 256 </script>
 257 </body>
 258 </html>