<!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>