| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <p id="description"></p> |
| <p> |
| Please run this with DumpRenderTree. |
| </p> |
| Test following keys: |
| <ul> |
| <li>Digits</li> |
| <li>Left/Right - Move focus field inside element</li> |
| <li>Up/Down - Increment/decrement value of focus field</li> |
| <li>Tab - Move focus field</li> |
| <li>Backspace - Make value empty</li> |
| </ul> |
| <input id="before"> |
| <input id="input" type="month"> |
| <input id="another"> |
| <div id="console"></div> |
| <script> |
| description("Multiple fields UI of month input type with keyboard events"); |
| if (window.internals) |
| internals.settings.setLangAttributeAwareFormControlUIEnabled(true); |
| var input = document.getElementById("input"); |
| |
| function keyDown(key, modifiers) |
| { |
| if (!window.eventSender) |
| return; |
| eventSender.keyDown(key, modifiers); |
| } |
| |
| function beginTest(title, value, opt_min, opt_max) |
| { |
| debug("== " + title + " =="); |
| input.value = value; |
| input.min = opt_min ? opt_min : ""; |
| input.max = opt_max ? opt_max : ""; |
| input.blur(); |
| input.focus(); |
| } |
| |
| // We assume the year-month format is "MMM yyyy". |
| |
| beginTest('Digit keys'); |
| keyDown('s'); |
| keyDown('ArrowRight'); |
| keyDown('0'); |
| keyDown('1'); |
| keyDown('2'); |
| keyDown('A'); |
| shouldBeEqualToString('input.value', '0012-09'); |
| |
| beginTest('Left/Right keys', '2012-09'); |
| keyDown('ArrowRight'); |
| keyDown('5'); |
| keyDown('ArrowLeft'); |
| keyDown('6'); |
| shouldBeEqualToString('input.value', '0005-06'); |
| keyDown('ArrowLeft'); |
| keyDown('ArrowLeft'); |
| keyDown('ArrowLeft'); |
| shouldBeEqualToString('document.activeElement.id', 'input'); |
| |
| beginTest('Up/Down keys', '2012-09'); |
| keyDown('ArrowUp'); |
| shouldBeEqualToString('input.value', '2012-10'); |
| keyDown('ArrowDown'); |
| keyDown('ArrowDown'); |
| shouldBeEqualToString('input.value', '2012-08'); |
| |
| // Note that empty value for the year field without min/max attributes is not |
| // testable because its default value depends on the current date. |
| beginTest('Up/Down keys on empty value', '', '2012-01'); |
| keyDown('ArrowDown'); |
| keyDown('ArrowDown'); |
| keyDown('ArrowRight'); |
| keyDown('ArrowUp'); |
| keyDown('ArrowUp'); |
| keyDown('ArrowDown'); |
| shouldBeEqualToString('input.value', '2012-11'); |
| |
| beginTest('Up/Down keys on empty value 2', '', undefined, '2012-01'); |
| keyDown('ArrowUp'); |
| keyDown('ArrowUp'); |
| keyDown('ArrowRight'); |
| keyDown('ArrowDown'); |
| keyDown('ArrowDown'); |
| keyDown('ArrowUp'); |
| shouldBeEqualToString('input.value', '2012-02'); |
| |
| beginTest('Tab key', '2012-09'); |
| keyDown('\t'); // -> Sep [2012] |
| keyDown('5'); // -> Sep [0005] |
| shouldBeEqualToString('input.value', '0005-09'); |
| keyDown('\t', ['shiftKey']); // -> [Sep] [0005] |
| keyDown('J'); // -> [Jan] 0005 |
| shouldBeEqualToString('input.value', '0005-01'); |
| keyDown('\t'); // -> Jan [0005] |
| keyDown('\t'); // -> Jan 0005 |
| shouldBeEqualToString('document.activeElement.id', 'another'); |
| |
| beginTest('Shfit+Tab key', '2012-09'); |
| another.focus(); |
| keyDown('\t', ['shiftKey']); |
| keyDown('3'); |
| shouldBeEqualToString('input.value', '0003-09'); |
| keyDown('\t', ['shiftKey']); |
| keyDown('\t', ['shiftKey']); |
| shouldBeEqualToString('document.activeElement.id', 'before'); |
| |
| beginTest('Up key on maximum value', '275760-09'); |
| keyDown('ArrowUp'); |
| keyDown('\t'); |
| keyDown('ArrowUp'); |
| shouldBeEqualToString('input.value', '0001-10'); |
| beginTest('Up key with a maximum attribute', '1999-12', undefined, '1999-12'); |
| keyDown('ArrowUp'); |
| keyDown('\t'); |
| keyDown('ArrowUp'); |
| shouldBeEqualToString('input.value', '0001-01'); |
| |
| beginTest('Down key on minimum value', '0001-01', 'bad min', 'wrong max'); |
| keyDown('ArrowDown'); // -> 0001-12 |
| keyDown('\t'); |
| keyDown('ArrowDown'); // -> 275760-12, which is greater than the hard limit. |
| shouldBeEqualToString('input.value', ''); |
| beginTest('Down key with a minimum attribute', '0001-01', '0001-01'); |
| keyDown('ArrowDown'); // -> 0001-12 |
| keyDown('\t'); |
| keyDown('ArrowDown'); // -> 275760-12, which is greater than the hard limit. |
| shouldBeEqualToString('input.value', ''); |
| |
| beginTest('Inconsistent min-max attributes', '1999-12', '1999-12', '1000-01'); |
| keyDown('\t'); |
| keyDown('ArrowUp'); |
| shouldBeEqualToString('input.value', '1000-12'); |
| keyDown('ArrowDown'); |
| shouldBeEqualToString('input.value', '1999-12'); |
| |
| beginTest('Backspace key', '2012-09'); |
| keyDown("Backspace"); |
| shouldBeEqualToString('input.value', ''); |
| |
| beginTest('Delete key', '2012-09'); |
| keyDown("Delete"); |
| shouldBeEqualToString('input.value', ''); |
| |
| beginTest('Typeahead', '2012-12'); |
| keyDown('ArrowRight'); |
| keyDown('1'); |
| shouldBeEqualToString('input.value', '0001-12'); |
| keyDown('ArrowLeft'); |
| keyDown('ArrowRight'); |
| keyDown('2'); |
| shouldBeEqualToString('input.value', '0002-12'); |
| |
| beginTest('Typeahead cycle first character', '2012-09'); |
| keyDown('j'); // -> [Jan] 2012 |
| shouldBeEqualToString('input.value', '2012-01'); |
| keyDown('j'); // -> [Jun] 2012 |
| shouldBeEqualToString('input.value', '2012-06'); |
| keyDown('j'); // -> [Jul] 2012 |
| shouldBeEqualToString('input.value', '2012-07'); |
| keyDown('j'); // -> [Jan] 2012 |
| shouldBeEqualToString('input.value', '2012-01'); |
| keyDown('x'); // -> [Jan] 2012 |
| shouldBeEqualToString('input.value', '2012-01'); |
| |
| beginTest('Typeahead prefix match', '2012-09'); |
| keyDown('m'); // -> [Mar] 2012 |
| shouldBeEqualToString('input.value', '2012-03'); |
| keyDown('a'); // -> [Mar] 2012 |
| shouldBeEqualToString('input.value', '2012-03'); |
| keyDown('y'); // -> [May] 2012 |
| shouldBeEqualToString('input.value', '2012-05'); |
| keyDown('x'); // -> [May] 2012 |
| shouldBeEqualToString('input.value', '2012-05'); |
| |
| beginTest('Typeahead index match', '2012-09'); |
| keyDown('1'); // -> [Jan] 2012 |
| shouldBeEqualToString('input.value', '2012-01'); |
| keyDown('2'); // -> [Dec] 2012 |
| shouldBeEqualToString('input.value', '2012-12'); |
| keyDown('x'); // -> [Dec] 2012 |
| shouldBeEqualToString('input.value', '2012-12'); |
| |
| beginTest('Typeahead should search from current selection', '2012-01'); |
| keyDown('j'); // -> [Jun] 2012 |
| shouldBeEqualToString('input.value', '2012-06'); |
| |
| input.setAttribute("lang", "he-il"); |
| beginTest('RTL focus navigation', '2012-09'); |
| debug('The tests in this block fail on platforms without the lang-attribute-aware-form-control-UI feature.'); |
| keyDown('ArrowUp'); // -> 2012 [M10] |
| shouldBeEqualToString('input.value', '2012-10'); |
| keyDown('\t'); // -> [2012] M10 |
| keyDown('2'); // -> [0002] M10 |
| shouldBeEqualToString('input.value', '0002-10'); |
| keyDown('\t', ['shiftKey']); // -> 0002 [M10] |
| keyDown('ArrowUp'); // -> 0002 [M11] |
| shouldBeEqualToString('input.value', '0002-11'); |
| input.removeAttribute("lang"); |
| </script> |
| </body> |
| </html> |
