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