third_party/WebKit/LayoutTests/fast/forms/suggestion-picker/date-suggestion-picker-key-operations.html - chromium/src - Git at Google

 <!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=date id=date value="2012-12-24" list=suggestions>
 <datalist id=suggestions>
     <option label="Today">2012-01-01</option>
     <option label="Tomorrow">2012-01-02</option>
     <option>2012-01-03</option>
     <option>2012-01-04</option>
     <option>2012-01-05</option>
     <option>2012-01-06</option>
     <option>2012-01-07</option>
     <option>2012-01-08</option>
     <option>2012-01-09</option>
     <option>2012-01-10</option>
     <option>2012-01-11</option>
     <option>2012-01-12</option>
     <option>2012-01-13</option>
     <option>2012-01-14</option>
     <option>2012-01-15</option>
     <option>2012-01-16</option>
     <option>2012-01-17</option>
     <option>2012-01-18</option>
     <option>2012-01-19</option>
     <option>2012-01-20</option>
     <option>2012-01-21</option>
     <option>2012-01-22</option>
     <option>2012-01-23</option>
     <option>2012-01-24</option>
     <option>2012-01-25</option>
     <option>2012-01-26</option>
     <option>2012-01-27</option>
     <option>2012-01-28</option>
     <option>2012-01-29</option>
     <option>2012-01-30</option>
     <option>2012-01-31</option>
     <option>2012-02-01</option>
     <option>2012-02-02</option>
     <option>2012-02-03</option>
     <option>2012-02-04</option>
     <option>2012-02-05</option>
     <option>2012-02-06</option>
     <option>2012-02-07</option>
     <option>2012-02-08</option>
     <option>2012-02-09</option>
     <option>2012-02-10</option>
     <option>2012-02-11</option>
     <option>2012-02-12</option>
     <option>2012-02-13</option>
     <option>2012-02-14</option>
     <option>2012-02-15</option>
     <option>2012-02-16</option>
     <option>2012-02-17</option>
     <option>2012-02-18</option>
     <option>2012-02-19</option>
     <option>2012-02-20</option>
     <option>2012-02-21</option>
     <option>2012-02-22</option>
     <option>2012-02-23</option>
     <option>2012-02-24</option>
     <option>2012-02-25</option>
     <option>2012-02-26</option>
     <option>2012-02-27</option>
     <option>2012-02-28</option>
     <option>2012-02-29</option>
     <option>2012-03-01</option>
     <option>2012-03-02</option>
     <option>2012-03-03</option>
     <option>2012-03-04</option>
     <option>2012-03-05</option>
     <option>2012-03-06</option>
     <option>2012-03-07</option>
     <option>2012-03-08</option>
     <option>2012-01-00</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('date'), 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-01');
     eventSender.keyDown('downArrow');
     shouldBeEqualToString('highlightedEntry()', '2012-01-02');
     eventSender.keyDown('upArrow');
     shouldBeEqualToString('highlightedEntry()', '2012-01-01');

     debug('Check that up arrow key at top of list does nothing.');
     eventSender.keyDown('upArrow');
     shouldBeEqualToString('highlightedEntry()', '2012-01-01');
     eventSender.keyDown('downArrow');
     shouldBeEqualToString('highlightedEntry()', '2012-01-02');

     debug('Check that page up/down arrow keys work.');
     eventSender.keyDown('pageDown');
     shouldBeEqualToString('highlightedEntry()', '2012-02-09');
     eventSender.keyDown('pageDown');
     shouldBeEqualToString('highlightedEntry()', '2012-02-29');
     eventSender.keyDown('pageUp');
     shouldBeEqualToString('highlightedEntry()', '2012-01-21');
     eventSender.keyDown('pageDown');
     shouldBeEqualToString('highlightedEntry()', '2012-02-29');
     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()', '2012-03-08');
     eventSender.keyDown("\n");
     waitUntilClosing(test1AfterClosing);
 }

 function test1AfterClosing() {
     shouldBeNull('document.getElementById("mock-page-popup")');
     shouldBeEqualToString('document.getElementById("date").value', '2012-03-08');

     debug('Reopen popup.');
     openPicker(document.getElementById('date'), 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("date").value', '2012-03-08');

     eventSender.keyDown('F4');
     if (document.getElementById('mock-page-popup'))
         testPassed("F4 opened picker.");

     finishJSTest();
 }

 </script>
 </body>
 </html>
	<!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=date id=date value="2012-12-24" list=suggestions>
	<datalist id=suggestions>
	<option label="Today">2012-01-01</option>
	<option label="Tomorrow">2012-01-02</option>
	<option>2012-01-03</option>
	<option>2012-01-04</option>
	<option>2012-01-05</option>
	<option>2012-01-06</option>
	<option>2012-01-07</option>
	<option>2012-01-08</option>
	<option>2012-01-09</option>
	<option>2012-01-10</option>
	<option>2012-01-11</option>
	<option>2012-01-12</option>
	<option>2012-01-13</option>
	<option>2012-01-14</option>
	<option>2012-01-15</option>
	<option>2012-01-16</option>
	<option>2012-01-17</option>
	<option>2012-01-18</option>
	<option>2012-01-19</option>
	<option>2012-01-20</option>
	<option>2012-01-21</option>
	<option>2012-01-22</option>
	<option>2012-01-23</option>
	<option>2012-01-24</option>
	<option>2012-01-25</option>
	<option>2012-01-26</option>
	<option>2012-01-27</option>
	<option>2012-01-28</option>
	<option>2012-01-29</option>
	<option>2012-01-30</option>
	<option>2012-01-31</option>
	<option>2012-02-01</option>
	<option>2012-02-02</option>
	<option>2012-02-03</option>
	<option>2012-02-04</option>
	<option>2012-02-05</option>
	<option>2012-02-06</option>
	<option>2012-02-07</option>
	<option>2012-02-08</option>
	<option>2012-02-09</option>
	<option>2012-02-10</option>
	<option>2012-02-11</option>
	<option>2012-02-12</option>
	<option>2012-02-13</option>
	<option>2012-02-14</option>
	<option>2012-02-15</option>
	<option>2012-02-16</option>
	<option>2012-02-17</option>
	<option>2012-02-18</option>
	<option>2012-02-19</option>
	<option>2012-02-20</option>
	<option>2012-02-21</option>
	<option>2012-02-22</option>
	<option>2012-02-23</option>
	<option>2012-02-24</option>
	<option>2012-02-25</option>
	<option>2012-02-26</option>
	<option>2012-02-27</option>
	<option>2012-02-28</option>
	<option>2012-02-29</option>
	<option>2012-03-01</option>
	<option>2012-03-02</option>
	<option>2012-03-03</option>
	<option>2012-03-04</option>
	<option>2012-03-05</option>
	<option>2012-03-06</option>
	<option>2012-03-07</option>
	<option>2012-03-08</option>
	<option>2012-01-00</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('date'), 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-01');
	eventSender.keyDown('downArrow');
	shouldBeEqualToString('highlightedEntry()', '2012-01-02');
	eventSender.keyDown('upArrow');
	shouldBeEqualToString('highlightedEntry()', '2012-01-01');

	debug('Check that up arrow key at top of list does nothing.');
	eventSender.keyDown('upArrow');
	shouldBeEqualToString('highlightedEntry()', '2012-01-01');
	eventSender.keyDown('downArrow');
	shouldBeEqualToString('highlightedEntry()', '2012-01-02');

	debug('Check that page up/down arrow keys work.');
	eventSender.keyDown('pageDown');
	shouldBeEqualToString('highlightedEntry()', '2012-02-09');
	eventSender.keyDown('pageDown');
	shouldBeEqualToString('highlightedEntry()', '2012-02-29');
	eventSender.keyDown('pageUp');
	shouldBeEqualToString('highlightedEntry()', '2012-01-21');
	eventSender.keyDown('pageDown');
	shouldBeEqualToString('highlightedEntry()', '2012-02-29');
	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()', '2012-03-08');
	eventSender.keyDown("\n");
	waitUntilClosing(test1AfterClosing);
	}

	function test1AfterClosing() {
	shouldBeNull('document.getElementById("mock-page-popup")');
	shouldBeEqualToString('document.getElementById("date").value', '2012-03-08');

	debug('Reopen popup.');
	openPicker(document.getElementById('date'), 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("date").value', '2012-03-08');

	eventSender.keyDown('F4');
	if (document.getElementById('mock-page-popup'))
	testPassed("F4 opened picker.");

	finishJSTest();
	}

	</script>
	</body>
	</html>