<!DOCTYPE html>
<meta name=fuzzy content="maxDifference=0-3; totalPixels=0-1000">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../resources/testdriver.js"></script>
<script src="../../../resources/testdriver-vendor.js"></script>
<script src="../../../resources/gesture-util.js"></script>
<script src="../resources/common.js"></script>
<script src="../resources/common-wheel-event.js"></script>
<script src="../resources/picker-common.js"></script>
<script src="resources/suggestion-picker-common.js"></script>
<body style="background-color: #bbbbbb;">
<div id=otherelement></div>
<input type=date value="2012-12-24" list=suggestions>
<datalist id=suggestions>
<option label="Today">2012-01-01</option>
<option label="Tomorrow">2012-01-02</option>
<option>2012-01-03</option>
<option>2012-01-04</option>
<option>2012-01-05</option>
<option>2012-01-06</option>
<option>2012-01-07</option>
<option>2012-01-08</option>
<option>2012-01-09</option>
<option>2012-01-10</option>
<option>2012-01-11</option>
<option>2012-01-12</option>
<option>2012-01-13</option>
<option>2012-01-14</option>
<option>2012-01-15</option>
<option>2012-01-16</option>
<option>2012-01-17</option>
<option>2012-01-18</option>
<option>2012-01-19</option>
<option>2012-01-20</option>
<option label="-">2012-01-21</option>
<option>2012-01-22</option>
<option>2012-01-23</option>
<option>2012-01-24</option>
<option>2012-01-25</option>
<option>2012-01-26</option>
<option>2012-01-27</option>
<option>2012-01-28</option>
<option>2012-01-29</option>
<option>2012-01-30</option>
<option>2012-01-31</option>
<option>2012-02-01</option>
<option>2012-02-02</option>
<option>2012-02-03</option>
<option>2012-02-04</option>
<option>2012-02-05</option>
<option>2012-02-06</option>
<option>2012-02-07</option>
<option>2012-02-08</option>
<option>2012-02-09</option>
<option label="-">2012-02-10</option>
<option>2012-02-11</option>
<option>2012-02-12</option>
<option>2012-02-13</option>
<option>2012-02-14</option>
<option>2012-02-15</option>
<option>2012-02-16</option>
<option>2012-02-17</option>
<option>2012-02-18</option>
<option>2012-02-19</option>
<option>2012-02-20</option>
<option>2012-02-21</option>
<option>2012-02-22</option>
<option>2012-02-23</option>
<option>2012-02-24</option>
<option>2012-02-25</option>
<option>2012-02-26</option>
<option>2012-02-27</option>
<option>2012-02-28</option>
<option>2012-02-29</option>
<option>2012-03-01</option>
<option>2012-03-02</option>
<option>2012-03-03</option>
<option>2012-03-04</option>
<option>2012-03-05</option>
<option>2012-03-06</option>
<option>2012-03-07</option>
<option>2012-03-08</option>
<option>2012-01-00</option> <!--invalid-->
<option>foo</option> <!--invalid-->
</datalist>
<script>
window.onload = () => {
if (window.internals)
internals.settings.setScrollAnimatorEnabled(false);
const element = document.querySelector('input');
promise_test(() => {
return openPicker(element)
.then(() => {
hoverOverElement(internals.pagePopupWindow.document.querySelector(".suggestion-list-entry:nth-child(2)"));
assert_equals(highlightedEntry(), '2012-01-02');
hoverOverElement(document.getElementById('otherelement'));
assert_true(!highlightedEntry());
clickElement(internals.pagePopupWindow.document.querySelector(".suggestion-list-entry:nth-child(3)"));
return attemptToClosePicker(element);
})
.then(() => {
assert_true(!internals.pagePopupWindow);
});
},'Check basic hover operation');
promise_test(() => {
let suggestionList;
let savedScrollTop;
return openPicker(element)
.then(() => {
suggestionList = internals.pagePopupWindow.document.getElementsByClassName("suggestion-list")[0];
savedScrollTop = suggestionList.scrollTop;
return dispatchWheelEvent(suggestionList, 0, 3);
})
.then(() => {
return waitFor(() => savedScrollTop < suggestionList.scrollTop);
})
.then(() => {
savedScrollTop = suggestionList.scrollTop;
return dispatchWheelEvent(suggestionList, 0, -3);
})
.then(() => {
return waitFor(() => savedScrollTop > suggestionList.scrollTop);
})
.then(() => {
internals.pagePopupWindow.focus();
return attemptToClosePicker(element);
});
},'Scroll using the mouse wheel');
promise_test(() => {
let suggestionList;
return openPicker(element)
.then(() => {
suggestionList = internals.pagePopupWindow.document.getElementsByClassName("suggestion-list")[0];
var suggestionListOffset = cumulativeOffset(suggestionList);
var scrollbarCenterX = suggestionListOffset[0] + suggestionList.offsetWidth - internals.pagePopupWindow.getScrollbarWidth() / 2;
savedScrollTop = 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();
})
.then(() => requestAnimationFramePromise())
.then(() => {
scrollTopAfterWheelEvent = suggestionList.scrollTop;
assert_true(savedScrollTop < scrollTopAfterWheelEvent);
return attemptToClosePicker(element);
})
},'Scroll using the scroll bar');
};
</script>
Codebase Browser
chromium