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