| <!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=time id=time value="01:00" list=suggestions> |
| <datalist id=suggestions> |
| <option label="Now">01:01</option> |
| <option>01:02</option> |
| <option>01:03</option> |
| <option>01:04</option> |
| <option>01:05</option> |
| <option>01:06</option> |
| <option>01:07</option> |
| <option>01:08</option> |
| <option>01:09</option> |
| <option>01:10</option> |
| <option>01:11</option> |
| <option>01:12</option> |
| <option>01:13</option> |
| <option>01:14</option> |
| <option>01:15</option> |
| <option>01:16</option> |
| <option>01:17</option> |
| <option>01:18</option> |
| <option>01:19</option> |
| <option>01:20</option> |
| <option>01:21</option> |
| <option>01:22</option> |
| <option>01:23</option> |
| <option>01:24</option> |
| <option>01:25</option> |
| <option>01:26</option> |
| <option>01:27</option> |
| <option>01:28</option> |
| <option>01:29</option> |
| <option>01:30</option> |
| <option>01:31</option> |
| <option>01:32</option> |
| <option>01:33</option> |
| <option>01:34</option> |
| <option>01:35</option> |
| <option>01:36</option> |
| <option>01:37</option> |
| <option>01:38</option> |
| <option>01:39</option> |
| <option>01:40</option> |
| <option>01:41</option> |
| <option>01:42</option> |
| <option>01:43</option> |
| <option>01:44</option> |
| <option>01:45</option> |
| <option>01:46</option> |
| <option>01:47</option> |
| <option>01:48</option> |
| <option>01:49</option> |
| <option>01:50</option> |
| <option>01:51</option> |
| <option>01:52</option> |
| <option>01:53</option> |
| <option>01:54</option> |
| <option>01:55</option> |
| <option>01:56</option> |
| <option>01:57</option> |
| <option>01:58</option> |
| <option>01:59</option> |
| <option>02:00</option> |
| <option>02:01</option> |
| <option>02:02</option> |
| <option>02:03</option> |
| <option>02:04</option> |
| <option>02:05</option> |
| <option>02:06</option> |
| <option>02:07</option> |
| <option>02:08</option> |
| </datalist> |
| <script> |
| debug('Check that page popup doesn\'t exist at first.'); |
| shouldBeNull('document.getElementById("mock-page-popup")'); |
| |
| openPicker(document.getElementById('time'), test1); |
| shouldBeEqualToString('popupWindow.pagePopupController.toString()', '[object PagePopupController]'); |
| |
| function test1() { |
| debug('Check that page popup exists.'); |
| shouldBeEqualToString('popupWindow.pagePopupController.toString()', '[object PagePopupController]'); |
| popupWindow.focus(); |
| |
| popupWindow.removeEventListener("resize", test1, false); |
| |
| debug('Check that up/down arrow keys work.'); |
| shouldBeNull('highlightedEntry()'); |
| eventSender.keyDown('downArrow'); |
| shouldBeEqualToString('highlightedEntry()', '01:01'); |
| eventSender.keyDown('downArrow'); |
| shouldBeEqualToString('highlightedEntry()', '01:02'); |
| eventSender.keyDown('upArrow'); |
| shouldBeEqualToString('highlightedEntry()', '01:01'); |
| |
| debug('Check that up arrow key at top of list does nothing.'); |
| eventSender.keyDown('upArrow'); |
| shouldBeEqualToString('highlightedEntry()', '01:01'); |
| eventSender.keyDown('downArrow'); |
| shouldBeEqualToString('highlightedEntry()', '01:02'); |
| |
| debug('Check that page up/down arrow keys work.'); |
| eventSender.keyDown('pageDown'); |
| shouldBeEqualToString('highlightedEntry()', '01:40'); |
| eventSender.keyDown('pageDown'); |
| shouldBeEqualToString('highlightedEntry()', '02:00'); |
| eventSender.keyDown('pageUp'); |
| shouldBeEqualToString('highlightedEntry()', '01:21'); |
| eventSender.keyDown('pageDown'); |
| shouldBeEqualToString('highlightedEntry()', '02:00'); |
| eventSender.keyDown('pageDown'); |
| shouldBeEqualToString('highlightedEntry()', '02:08'); |
| |
| debug('Check that down arrow key at bottom of list does nothing.'); |
| eventSender.keyDown('downArrow'); |
| shouldBeEqualToString('highlightedEntry()', '02:08'); |
| |
| debug('Check that enter key sets the highlighted value.'); |
| eventSender.keyDown('upArrow'); |
| shouldBeEqualToString('highlightedEntry()', '02:07'); |
| eventSender.keyDown("\n"); |
| waitUntilClosing(test1AfterClosing); |
| } |
| |
| function test1AfterClosing() { |
| shouldBeNull('document.getElementById("mock-page-popup")'); |
| shouldBeEqualToString('document.getElementById("time").value', '02:07'); |
| |
| debug('Reopen popup.'); |
| openPicker(document.getElementById('time')); |
| popupWindow.addEventListener("resize", test2, false); |
| } |
| |
| function test2() { |
| popupWindow.removeEventListener("resize", test2, false); |
| |
| popupWindow.focus(); |
| |
| debug('Check that escape key closes the popup.'); |
| eventSender.keyDown('escape'); |
| waitUntilClosing(test2AfterClosing); |
| } |
| |
| function test2AfterClosing() { |
| shouldBeNull('document.getElementById("mock-page-popup")'); |
| shouldBeEqualToString('document.getElementById("time").value', '02:07'); |
| |
| eventSender.keyDown('F4'); |
| if (document.getElementById('mock-page-popup')) |
| testPassed("F4 opened picker."); |
| |
| finishJSTest(); |
| } |
| |
| </script> |
| </body> |
| </html> |
