src/third_party/WebKit/LayoutTests/fast/forms/suggestion-picker/date-suggestion-picker-key-operations.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 <script src="../../forms/resources/picker-common.js"></script>
   6 <script src="resources/suggestion-picker-common.js"></script>
   7 </head>
   8 <body style="background-color: #bbbbbb;">
   9 <p id="description"></p>
  10 <div id="console"></div>
  11 <input type=date id=date value="2012-12-24" list=suggestions>
  12 <datalist id=suggestions>
  13     <option label="Today">2012-01-01</option>
  14     <option label="Tomorrow">2012-01-02</option>
  15     <option>2012-01-03</option>
  16     <option>2012-01-04</option>
  17     <option>2012-01-05</option>
  18     <option>2012-01-06</option>
  19     <option>2012-01-07</option>
  20     <option>2012-01-08</option>
  21     <option>2012-01-09</option>
  22     <option>2012-01-10</option>
  23     <option>2012-01-11</option>
  24     <option>2012-01-12</option>
  25     <option>2012-01-13</option>
  26     <option>2012-01-14</option>
  27     <option>2012-01-15</option>
  28     <option>2012-01-16</option>
  29     <option>2012-01-17</option>
  30     <option>2012-01-18</option>
  31     <option>2012-01-19</option>
  32     <option>2012-01-20</option>
  33     <option>2012-01-21</option>
  34     <option>2012-01-22</option>
  35     <option>2012-01-23</option>
  36     <option>2012-01-24</option>
  37     <option>2012-01-25</option>
  38     <option>2012-01-26</option>
  39     <option>2012-01-27</option>
  40     <option>2012-01-28</option>
  41     <option>2012-01-29</option>
  42     <option>2012-01-30</option>
  43     <option>2012-01-31</option>
  44     <option>2012-02-01</option>
  45     <option>2012-02-02</option>
  46     <option>2012-02-03</option>
  47     <option>2012-02-04</option>
  48     <option>2012-02-05</option>
  49     <option>2012-02-06</option>
  50     <option>2012-02-07</option>
  51     <option>2012-02-08</option>
  52     <option>2012-02-09</option>
  53     <option>2012-02-10</option>
  54     <option>2012-02-11</option>
  55     <option>2012-02-12</option>
  56     <option>2012-02-13</option>
  57     <option>2012-02-14</option>
  58     <option>2012-02-15</option>
  59     <option>2012-02-16</option>
  60     <option>2012-02-17</option>
  61     <option>2012-02-18</option>
  62     <option>2012-02-19</option>
  63     <option>2012-02-20</option>
  64     <option>2012-02-21</option>
  65     <option>2012-02-22</option>
  66     <option>2012-02-23</option>
  67     <option>2012-02-24</option>
  68     <option>2012-02-25</option>
  69     <option>2012-02-26</option>
  70     <option>2012-02-27</option>
  71     <option>2012-02-28</option>
  72     <option>2012-02-29</option>
  73     <option>2012-03-01</option>
  74     <option>2012-03-02</option>
  75     <option>2012-03-03</option>
  76     <option>2012-03-04</option>
  77     <option>2012-03-05</option>
  78     <option>2012-03-06</option>
  79     <option>2012-03-07</option>
  80     <option>2012-03-08</option>
  81     <option>2012-01-00</option> <!--invalid-->
  82     <option>foo</option> <!--invalid-->
  83 </datalist>
  84 <script>
  85 description("Tests that key bindings work as expected.");
  86
  87 debug('Check that page popup doesn\'t exist at first.');
  88 shouldBeNull('document.getElementById("mock-page-popup")');
  89
  90 openPicker(document.getElementById('date'), test1);
  91
  92 var expectingDidHideEvent = false;
  93
  94 function test1() {
  95     debug('Check that page popup exists.');
  96     shouldBeEqualToString('popupWindow.pagePopupController.toString()', '[object PagePopupController]');
  97     popupWindow.focus();
  98
  99     debug('Check that up/down arrow keys work.');
 100     shouldBeNull('highlightedEntry()');
 101     eventSender.keyDown('downArrow');
 102     shouldBeEqualToString('highlightedEntry()', '2012-01-01');
 103     eventSender.keyDown('downArrow');
 104     shouldBeEqualToString('highlightedEntry()', '2012-01-02');
 105     eventSender.keyDown('upArrow');
 106     shouldBeEqualToString('highlightedEntry()', '2012-01-01');
 107
 108     debug('Check that up arrow key at top of list does nothing.');
 109     eventSender.keyDown('upArrow');
 110     shouldBeEqualToString('highlightedEntry()', '2012-01-01');
 111     eventSender.keyDown('downArrow');
 112     shouldBeEqualToString('highlightedEntry()', '2012-01-02');
 113
 114     debug('Check that page up/down arrow keys work.');
 115     eventSender.keyDown('pageDown');
 116     shouldBeEqualToString('highlightedEntry()', '2012-02-09');
 117     eventSender.keyDown('pageDown');
 118     shouldBeEqualToString('highlightedEntry()', '2012-02-29');
 119     eventSender.keyDown('pageUp');
 120     shouldBeEqualToString('highlightedEntry()', '2012-01-21');
 121     eventSender.keyDown('pageDown');
 122     shouldBeEqualToString('highlightedEntry()', '2012-02-29');
 123     eventSender.keyDown('pageDown');
 124     shouldBeEqualToString('highlightedEntry()', '@openCalendarPicker');
 125
 126     debug('Check that down arrow key at bottom of list does nothing.');
 127     eventSender.keyDown('downArrow');
 128     shouldBeEqualToString('highlightedEntry()', '@openCalendarPicker');
 129
 130     debug('Check that enter key sets the highlighted value.');
 131     eventSender.keyDown('upArrow');
 132     shouldBeEqualToString('highlightedEntry()', '2012-03-08');
 133     eventSender.keyDown("\n");
 134     waitUntilClosing(test1AfterClosing);
 135 }
 136
 137 function test1AfterClosing() {
 138     shouldBeNull('document.getElementById("mock-page-popup")');
 139     shouldBeEqualToString('document.getElementById("date").value', '2012-03-08');
 140
 141     debug('Reopen popup.');
 142     openPicker(document.getElementById('date'), test2);
 143 }
 144
 145 function test2() {
 146     popupWindow.focus();
 147
 148     eventSender.keyDown('pageDown');
 149     eventSender.keyDown('pageDown');
 150     eventSender.keyDown('pageDown');
 151     shouldBeEqualToString('highlightedEntry()', '@openCalendarPicker');
 152
 153     debug('Open calendar picker.');
 154     expectingDidHideEvent = true;
 155     popupWindow.addEventListener("didHide", testDidHide, false);
 156     popupWindow.addEventListener("didOpenPicker", test3, false);
 157     eventSender.keyDown('\n');
 158 }
 159
 160 function testDidHide() {
 161     popupWindow.removeEventListener("didHide", testDidHide);
 162
 163     shouldBeTrue('expectingDidHideEvent');
 164     expectingDidHideEvent = false;
 165 }
 166
 167 function test3() {
 168     popupWindow.removeEventListener("didOpenPicker", test3);
 169
 170     shouldBeFalse('expectingDidHideEvent');
 171
 172     debug('Confirm calendar picker did open.');
 173     shouldBeTrue('popupWindow.document.getElementById("main").firstChild.classList.contains("calendar-picker")');
 174
 175     debug('Check that escape key closes the popup.');
 176     eventSender.keyDown('escape');
 177     waitUntilClosing(test3AfterClosing);
 178 }
 179
 180 function test3AfterClosing() {
 181     shouldBeNull('document.getElementById("mock-page-popup")');
 182     shouldBeEqualToString('document.getElementById("date").value', '2012-03-08');
 183
 184     sendKey(document.getElementById('date'), "F4");
 185     if (document.getElementById('mock-page-popup'))
 186         testPassed("F4 opened picker.");
 187
 188     finishJSTest();
 189 }
 190
 191 </script>
 192 </body>
 193 </html>