week-suggestion-picker-mouse-operations.html

<!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=week value="2012-W52" list=suggestions>
<datalist id=suggestions>
  <option label="This Week">2012-W01</option>
  <option>2012-W02</option>
  <option>2012-W03</option>
  <option>2012-W04</option>
  <option>2012-W05</option>
  <option>2012-W06</option>
  <option>2012-W07</option>
  <option>2012-W08</option>
  <option>2012-W09</option>
  <option>2012-W10</option>
  <option>2012-W11</option>
  <option>2012-W12</option>
  <option>2012-W13</option>
  <option>2012-W14</option>
  <option>2012-W15</option>
  <option>2012-W16</option>
  <option>2012-W17</option>
  <option>2012-W18</option>
  <option>2012-W19</option>
  <option>2012-W20</option>
  <option>2012-W21</option>
  <option>2012-W22</option>
  <option>2012-W23</option>
  <option>2012-W24</option>
  <option>2012-W25</option>
  <option>2012-W26</option>
  <option>2012-W27</option>
  <option>2012-W28</option>
  <option>2012-W29</option>
  <option>2012-W30</option>
  <option>2012-W31</option>
  <option>2012-W32</option>
  <option>2012-W33</option>
  <option>2012-W34</option>
  <option>2012-W35</option>
  <option>2012-W36</option>
  <option>2012-W37</option>
  <option>2012-W38</option>
  <option>2012-W39</option>
  <option>2012-W40</option>
  <option>2012-W41</option>
  <option>2012-W42</option>
  <option>2012-W43</option>
  <option>2012-W44</option>
  <option>2012-W45</option>
  <option>2012-W46</option>
  <option>2012-W47</option>
  <option>2012-W48</option>
  <option>2012-W49</option>
  <option>2012-W50</option>
  <option>2012-W51</option>
  <option>2012-W52</option>
  <option>2013-W01</option>
  <option>2013-W02</option>
  <option>2013-W03</option>
  <option>2013-W04</option>
  <option>2013-W05</option>
  <option>2013-W06</option>
  <option>2013-W07</option>
  <option>2013-W08</option>
  <option>2013-W09</option>
  <option>2013-W10</option>
  <option>2013-W11</option>
  <option>2013-W12</option>
  <option>2013-W13</option>
  <option>2013-W14</option>
  <option>2013-W15</option>
  <option>2012-W00</option> <!--invalid-->
  <option>2012-01-01</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>
chromium/third_party/blink/web_tests/fast/forms/suggestion-picker/week-suggestion-picker-mouse-operations.html
