Google Git
Sign in
chromium / chromium / src / 03448d3a657609024501bdb7f99ba1a2d20ffc2f / . / third_party / WebKit / LayoutTests / fast / forms / suggestion-picker / month-suggestion-picker-key-operations.html
blob: a9e8aeb8cc80339d42c56375335190cd40d12747 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="../../forms/resources/picker-common.js"></script>
<script src="resources/suggestion-picker-common.js"></script>
</head>
<body style="background-color: #bbbbbb;">
<p id="description"></p>
<div id="console"></div>
<input type=month id=month value="2012-12" list=suggestions>
<datalist id=suggestions>
<option label="This Month">2012-01</option>
<option>2012-02</option>
<option>2012-03</option>
<option>2012-04</option>
<option>2012-05</option>
<option>2012-06</option>
<option>2012-07</option>
<option>2012-08</option>
<option>2012-09</option>
<option>2012-10</option>
<option>2012-11</option>
<option>2012-12</option>
<option>2013-01</option>
<option>2013-02</option>
<option>2013-03</option>
<option>2013-04</option>
<option>2013-05</option>
<option>2013-06</option>
<option>2013-07</option>
<option>2013-08</option>
<option>2013-09</option>
<option>2013-10</option>
<option>2013-11</option>
<option>2013-12</option>
<option>2014-01</option>
<option>2014-02</option>
<option>2014-03</option>
<option>2014-04</option>
<option>2014-05</option>
<option>2014-06</option>
<option>2014-07</option>
<option>2014-08</option>
<option>2014-09</option>
<option>2014-10</option>
<option>2014-11</option>
<option>2014-12</option>
<option>2015-01</option>
<option>2015-02</option>
<option>2015-03</option>
<option>2015-04</option>
<option>2015-05</option>
<option>2015-06</option>
<option>2015-07</option>
<option>2015-08</option>
<option>2015-09</option>
<option>2015-10</option>
<option>2015-11</option>
<option>2015-12</option>
<option>2016-01</option>
<option>2016-02</option>
<option>2016-03</option>
<option>2016-04</option>
<option>2016-05</option>
<option>2016-06</option>
<option>2016-07</option>
<option>2016-08</option>
<option>2016-09</option>
<option>2016-10</option>
<option>2016-11</option>
<option>2016-12</option>
<option>2012-00</option> <!--invalid-->
<option>2012-01-01</option> <!--invalid-->
<option>foo</option> <!--invalid-->
</datalist>
<script>
description("Tests that key bindings work as expected.");
debug('Check that page popup doesn\'t exist at first.');
shouldBeNull('document.getElementById("mock-page-popup")');
openPicker(document.getElementById('month'), test1);
var expectingDidHideEvent = false;
function test1() {
debug('Check that page popup exists.');
shouldBeEqualToString('popupWindow.pagePopupController.toString()', '[object PagePopupController]');
popupWindow.focus();
debug('Check that up/down arrow keys work.');
shouldBeNull('highlightedEntry()');
eventSender.keyDown('downArrow');
shouldBeEqualToString('highlightedEntry()', '2012-01');
eventSender.keyDown('downArrow');
shouldBeEqualToString('highlightedEntry()', '2012-02');
eventSender.keyDown('upArrow');
shouldBeEqualToString('highlightedEntry()', '2012-01');
debug('Check that up arrow key at top of list does nothing.');
eventSender.keyDown('upArrow');
shouldBeEqualToString('highlightedEntry()', '2012-01');
eventSender.keyDown('downArrow');
shouldBeEqualToString('highlightedEntry()', '2012-02');
debug('Check that page up/down arrow keys work.');
eventSender.keyDown('pageDown');
shouldBeEqualToString('highlightedEntry()', '2015-04');
eventSender.keyDown('pageDown');
shouldBeEqualToString('highlightedEntry()', '2016-12');
eventSender.keyDown('pageUp');
shouldBeEqualToString('highlightedEntry()', '2013-09');
eventSender.keyDown('pageDown');
shouldBeEqualToString('highlightedEntry()', '2016-12');
eventSender.keyDown('pageDown');
shouldBeEqualToString('highlightedEntry()', '@openCalendarPicker');
debug('Check that down arrow key at bottom of list does nothing.');
eventSender.keyDown('downArrow');
shouldBeEqualToString('highlightedEntry()', '@openCalendarPicker');
debug('Check that enter key sets the highlighted value.');
eventSender.keyDown('upArrow');
shouldBeEqualToString('highlightedEntry()', '2016-12');
eventSender.keyDown("\n");
waitUntilClosing(test1AfterClosing);
}
function test1AfterClosing() {
shouldBeNull('document.getElementById("mock-page-popup")');
shouldBeEqualToString('document.getElementById("month").value', '2016-12');
debug('Reopen popup.');
openPicker(document.getElementById('month'), test2);
}
function test2() {
popupWindow.focus();
eventSender.keyDown('pageDown');
eventSender.keyDown('pageDown');
eventSender.keyDown('pageDown');
shouldBeEqualToString('highlightedEntry()', '@openCalendarPicker');
debug('Open calendar picker.');
expectingDidHideEvent = true;
popupWindow.addEventListener("didHide", testDidHide, false);
popupWindow.addEventListener("didOpenPicker", test3, false);
eventSender.keyDown('\n');
}
function testDidHide() {
popupWindow.removeEventListener("didHide", testDidHide);
shouldBeTrue('expectingDidHideEvent');
expectingDidHideEvent = false;
}
function test3() {
popupWindow.removeEventListener("didOpenPicker", test3);
shouldBeFalse('expectingDidHideEvent');
debug('Confirm calendar picker did open.');
shouldBeTrue('popupWindow.document.getElementById("main").firstChild.classList.contains("calendar-picker")');
debug('Check that escape key closes the popup.');
eventSender.keyDown('escape');
waitUntilClosing(test3AfterClosing);
}
function test3AfterClosing() {
shouldBeNull('document.getElementById("mock-page-popup")');
shouldBeEqualToString('document.getElementById("month").value', '2016-12');
eventSender.keyDown('F4');
if (document.getElementById('mock-page-popup'))
testPassed("F4 opened picker.");
finishJSTest();
}
</script>
</body>
</html>