<!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.runtimeFlags.langAttributeAwareFormControlUIEnabled = 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 drop down button.
keyDown('\t'); // -> Focus out.
shouldBeEqualToString('document.activeElement.id', 'after');
beginTest('Shift+Tab key', '2012-W09');
after.focus();
keyDown('\t', ['shiftKey']); // -> Week 09, 2012 [dropdown-button]
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>
Codebase Browser
chromium