| <!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="week"> |
| <input id="after"> |
| <div id="console"></div> |
| <script> |
| description('Multiple fields UI of week 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, opt_value, opt_min, opt_max) |
| { |
| debug('== ' + title + ' =='); |
| input.value = opt_value || ''; |
| input.min = opt_min ? opt_min : ''; |
| input.max = opt_max ? opt_max : ''; |
| input.blur(); |
| input.focus(); |
| } |
| |
| // We assume the date format is Week ww, yyyy. |
| |
| beginTest('Digit keys'); |
| keyDown('9'); // -> Week 09, yyyy |
| keyDown('1'); // -> Week 09, [0001] |
| keyDown('2'); // -> Week 09, [0012] |
| keyDown('A'); // Ignored. |
| shouldBeEqualToString('input.value', '0012-W09'); |
| |
| beginTest('Digit keys starting with zero'); |
| keyDown('0'); // -> Week [00], yyyy |
| keyDown('2'); // -> Week 02, [yyyy] |
| keyDown('0'); // -> Week 02, [0000] |
| keyDown('3'); // -> Week 02, [0003] |
| keyDown('0'); // -> Week 02, [0030] |
| keyDown('0'); // -> Week 02, [0300] |
| shouldBeEqualToString('input.value', '0300-W02'); |
| |
| beginTest('Digit keys and backspace key'); |
| keyDown('0'); // -> Week [00], yyyy |
| keyDown('Backspace'); // -> Week [ww], yyyy |
| keyDown('0'); // -> Week [00], yyyy |
| keyDown('0'); // -> Week 01, [yyyy] |
| keyDown('0'); // -> Week 01, [0000] |
| keyDown('6'); // -> Week 05, [0006] |
| shouldBeEqualToString('input.value', '0006-W01'); |
| |
| beginTest('Left/Right keys', '2012-W09'); |
| keyDown('ArrowRight'); // -> Week 09, [2012] |
| keyDown('5'); // -> Week 09, [0005] |
| keyDown('ArrowLeft'); // -> Week [09], 0005 |
| keyDown('6'); // -> Week [06], 0005 |
| shouldBeEqualToString('input.value', '0005-W06'); |
| keyDown('ArrowLeft'); // -> Week 06, [0005] |
| keyDown('ArrowLeft'); // -> Week [06], 0005 |
| keyDown('ArrowLeft'); // -> Week [06], 0005 |
| shouldBeEqualToString('document.activeElement.id', 'input'); |
| |
| beginTest('Up/Down keys', '2012-W09'); |
| keyDown('ArrowUp'); // -> Week [10], 2012 |
| shouldBeEqualToString('input.value', '2012-W10'); |
| keyDown('ArrowDown'); // -> Week [09], 2012 |
| keyDown('ArrowDown'); // -> Week [08], 2012 |
| shouldBeEqualToString('input.value', '2012-W08'); |
| |
| beginTest('Up/Down keys on empty value'); |
| keyDown('ArrowDown'); // -> Week [53], yyyy |
| keyDown('ArrowDown'); // -> Week [52], yyyy |
| keyDown('ArrowUp'); // -> Week [53], yyyy |
| keyDown('ArrowDown'); // -> Week [52], yyyy |
| keyDown('ArrowRight'); // -> Week 52, [yyyy] |
| var currentYear = new Date().getFullYear(); |
| keyDown('ArrowUp'); // -> Week 52, [current year] |
| shouldBe('input.value', 'currentYear + "-W52"'); |
| |
| beginTest('Up/Down keys on empty value 2'); |
| keyDown('ArrowUp'); // -> Week [01], yyyy |
| keyDown('ArrowUp'); // -> Week [02], yyyy |
| keyDown('ArrowRight'); // -> Week 02, [yyyy] |
| currentYear = new Date().getFullYear(); |
| keyDown('ArrowDown'); // -> Week 02, [current year] |
| shouldBe('input.value', 'currentYear + "-W02"'); |
| |
| beginTest('Tab key', '2012-W09'); |
| keyDown('\t'); // -> Week 09, [2012] |
| keyDown('5'); // -> Week 09, [0005] |
| shouldBeEqualToString('input.value', '0005-W09'); |
| keyDown('\t', ['shiftKey']); // -> Week [09], 0005 |
| keyDown('7'); // -> Week [07], 0005 |
| shouldBeEqualToString('input.value', '0005-W07'); |
| keyDown('\t'); // -> Focus out. |
| shouldBeEqualToString('document.activeElement.id', 'after'); |
| |
| beginTest('Shfit+Tab key', '2012-W09'); |
| after.focus(); |
| keyDown('\t', ['shiftKey']); // -> Week 09, [2012] |
| keyDown('3'); // -> Week 09, [0003] |
| shouldBeEqualToString('input.value', '0003-W09'); |
| keyDown('\t', ['shiftKey']); // -> Week [09], 0003 |
| keyDown('\t', ['shiftKey']); // -> Focus out. |
| shouldBeEqualToString('document.activeElement.id', 'before'); |
| |
| beginTest('Up key on maximum value', '275760-W09'); |
| keyDown('ArrowUp'); // -> Week [10], 275760 |
| keyDown('\t'); // -> Week 10, [275760] |
| keyDown('ArrowUp'); // -> Week 10, [0001] |
| shouldBeEqualToString('input.value', '0001-W10'); |
| beginTest('Up key with a maximum attribute', '1999-W12', '1000-W01', '1999-W12'); |
| keyDown('ArrowUp'); // -> Week [13], 1999 |
| keyDown('\t'); // -> Week 13, [1999] |
| keyDown('ArrowUp'); // -> Week 13, [1000] |
| shouldBeEqualToString('input.value', '1000-W13'); |
| |
| beginTest('Down key on minimum value', '0001-W01', 'bad min', 'wrong max'); |
| keyDown('ArrowDown'); // -> Week [53], 0001 |
| keyDown('\t'); // -> Week 01, [0001] |
| keyDown('ArrowDown'); // -> Week 53, [275760], which is greater than the hard limit. |
| shouldBeEqualToString('input.value', ''); |
| beginTest('Down key with a minimum attribute', '1000-W01', '1000-W01'); |
| keyDown('ArrowDown'); // -> Week [53], 1000 |
| keyDown('\t'); // -> Week 53, [1000] |
| keyDown('ArrowDown'); // -> Week 53, [275760], which is greater than the hard limit. |
| shouldBeEqualToString('input.value', ''); |
| |
| beginTest('Inconsistent min-max attributes', '1999-W12', '1999-W12', '1000-W01'); |
| keyDown('ArrowUp'); // -> Week [13], 1999. |
| keyDown('\t'); // -> Week 13, [1999] |
| keyDown('ArrowUp'); // -> Week 13, [1000]. 1000 is the swapped minimum year. |
| shouldBeEqualToString('input.value', '1000-W13'); |
| keyDown('ArrowDown'); // -> Week 01, [1999] |
| shouldBeEqualToString('input.value', '1999-W13'); |
| |
| beginTest('Make an invalid date', '2012-W01'); |
| keyDown('ArrowDown'); // -> Week [53], 2012 |
| shouldBeEqualToString('input.value', ''); // 2012-W53 is not a valid date. |
| |
| beginTest('Backspace key', '2012-W09'); |
| keyDown("Backspace"); // -> Week [ww], 2012 |
| shouldBeEqualToString('input.value', ''); |
| |
| beginTest('Delete key', '2012-W09'); |
| keyDown("Delete"); // -> Week [ww], 2012 |
| shouldBeEqualToString('input.value', ''); |
| |
| beginTest('Typeahead', '2012-W12'); |
| keyDown('ArrowRight'); // -> Week 12, [2012] |
| keyDown('1'); // -> Week 01, [0001] |
| shouldBeEqualToString('input.value', '0001-W12'); |
| keyDown('ArrowLeft'); // -> Week [12], 0001 |
| keyDown('ArrowRight'); // -> Week 12, [0001] |
| keyDown('2'); // -> Week 12, [0002] |
| shouldBeEqualToString('input.value', '0002-W12'); |
| |
| beginTest('Disabled/readonly', '2012-W10'); |
| input.disabled = true; |
| keyDown('ArrowUp'); // Week 10, 2012 |
| shouldBeEqualToString('input.value', '2012-W10'); |
| input.disabled = false; |
| input.focus(); |
| keyDown('ArrowUp'); // Week [11], 2012 |
| shouldBeEqualToString('input.value', '2012-W11'); |
| input.readOnly = true; |
| keyDown('ArrowUp'); // Week [11], 2012 |
| shouldBeEqualToString('input.value', '2012-W11'); |
| input.readOnly = false; |
| input.focus(); |
| keyDown('ArrowUp'); // Week [12], 2012 |
| shouldBeEqualToString('input.value', '2012-W12'); |
| |
| </script> |
| </body> |
| </html> |
