| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test.js"></script> |
| <script src="../../forms/resources/common.js"></script> |
| <script src="../../forms/resources/common-wheel-event.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=month id=month value="2012-12" list=suggestions> |
| <datalist id=suggestions> |
| <option label="This Month">2012-01</option> |
| <option>2012-02</option> |
| <option>2012-03</option> |
| <option>2012-04</option> |
| <option>2012-05</option> |
| <option>2012-06</option> |
| <option>2012-07</option> |
| <option>2012-08</option> |
| <option>2012-09</option> |
| <option>2012-10</option> |
| <option>2012-11</option> |
| <option>2012-12</option> |
| <option>2013-01</option> |
| <option>2013-02</option> |
| <option>2013-03</option> |
| <option>2013-04</option> |
| <option>2013-05</option> |
| <option>2013-06</option> |
| <option>2013-07</option> |
| <option>2013-08</option> |
| <option>2013-09</option> |
| <option>2013-10</option> |
| <option>2013-11</option> |
| <option>2013-12</option> |
| <option>2014-01</option> |
| <option>2014-02</option> |
| <option>2014-03</option> |
| <option>2014-04</option> |
| <option>2014-05</option> |
| <option>2014-06</option> |
| <option>2014-07</option> |
| <option>2014-08</option> |
| <option>2014-09</option> |
| <option>2014-10</option> |
| <option>2014-11</option> |
| <option>2014-12</option> |
| <option>2015-01</option> |
| <option>2015-02</option> |
| <option>2015-03</option> |
| <option>2015-04</option> |
| <option>2015-05</option> |
| <option>2015-06</option> |
| <option>2015-07</option> |
| <option>2015-08</option> |
| <option>2015-09</option> |
| <option>2015-10</option> |
| <option>2015-11</option> |
| <option>2015-12</option> |
| <option>2012-00</option> <!--invalid--> |
| <option>2012-01-01</option> <!--invalid--> |
| <option>foo</option> <!--invalid--> |
| </datalist> |
| <script> |
| debug('Check that page popup doesn\'t exist at first.'); |
| shouldBeNull('$("mock-page-popup")'); |
| |
| openPicker($('month'), test1); |
| |
| function test1() { |
| debug('Check that page popup exists.'); |
| shouldBeEqualToString('popupWindow.pagePopupController.toString()', '[object PagePopupController]'); |
| |
| debug('Check that hovering over an entry highlights it.'); |
| hoverOverElement(popupWindow.document.querySelector(".suggestion-list-entry:nth-child(2)")); |
| shouldBeEqualToString('highlightedEntry()', '2012-02'); |
| |
| debug('Check that moving the mouse outside the popup de-highlights entries.'); |
| hoverOverElement(document.getElementById('description')); |
| shouldBeNull('highlightedEntry()'); |
| |
| debug('Check that mouse click closes the popup and sets the value.'); |
| clickElement(popupWindow.document.querySelector(".suggestion-list-entry:nth-child(3)")); |
| waitUntilClosing(test1AfterClosing); |
| } |
| |
| function test1AfterClosing() { |
| shouldBeNull('$("mock-page-popup")'); |
| shouldBeEqualToString('document.getElementById("month").value', '2012-03'); |
| |
| openPicker($('month'), test2); |
| } |
| |
| var scrollTopBeforeWheelEvent = 0; |
| var scrollTopAfterWheelEvent = 0; |
| var suggestionList; |
| |
| function test2() { |
| suggestionList = popupWindow.document.getElementsByClassName("suggestion-list")[0]; |
| |
| debug('Check that you can scroll using the mouse wheel.'); |
| |
| function finishTest() { |
| popupWindow.focus(); |
| eventSender.keyDown('escape'); |
| waitUntilClosing(test2AfterClosing); |
| } |
| |
| function scrollUp() { |
| scrollTopBeforeWheelEvent = suggestionList.scrollTop; |
| dispatchWheelEvent(suggestionList, 0, 100); |
| shouldBecomeEqual('scrollTopBeforeWheelEvent > suggestionList.scrollTop', 'true', finishTest) |
| } |
| |
| function scrollDown() { |
| scrollTopBeforeWheelEvent = suggestionList.scrollTop; |
| dispatchWheelEvent(suggestionList, 0, -100); |
| shouldBecomeEqual('scrollTopBeforeWheelEvent < suggestionList.scrollTop', 'true', scrollUp); |
| } |
| |
| scrollDown(); |
| } |
| |
| function test2AfterClosing() { |
| shouldBeNull('$("mock-page-popup")'); |
| |
| openPicker($('month'), test3); |
| } |
| |
| function test3() { |
| debug('Check that you can scroll using the scroll bar.'); |
| |
| var suggestionList = popupWindow.document.getElementsByClassName("suggestion-list")[0]; |
| var suggestionListOffset = cumulativeOffset(suggestionList); |
| var scrollbarCenterX = suggestionListOffset[0] + suggestionList.offsetWidth - popupWindow.getScrollbarWidth() / 2; |
| |
| scrollTopBeforeWheelEvent = suggestionList.scrollTop; |
| eventSender.mouseMoveTo(scrollbarCenterX, suggestionListOffset[1] + 20); // 20 is the height of the up arrow button plus a few pixels |
| eventSender.mouseDown(); |
| eventSender.mouseMoveTo(scrollbarCenterX, suggestionListOffset[1] + suggestionList.offsetHeight); |
| eventSender.mouseUp(); |
| scrollTopAfterWheelEvent = suggestionList.scrollTop; |
| shouldBeTrue('scrollTopBeforeWheelEvent < scrollTopAfterWheelEvent'); |
| |
| finishJSTest(); |
| } |
| |
| </script> |
| </body> |
| </html> |
