src/third_party/WebKit/LayoutTests/fast/forms/suggestion-picker/month-suggestion-picker-mouse-operations.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 <script src="../../forms/resources/common.js"></script>
   6 <script src="../../forms/resources/common-wheel-event.js"></script>
   7 <script src="../../forms/resources/picker-common.js"></script>
   8 <script src="resources/suggestion-picker-common.js"></script>
   9 </head>
  10 <body style="background-color: #bbbbbb;">
  11 <p id="description"></p>
  12 <div id="console"></div>
  13 <input type=month id=month value="2012-12" list=suggestions>
  14 <datalist id=suggestions>
  15     <option label="This Month">2012-01</option>
  16     <option>2012-02</option>
  17     <option>2012-03</option>
  18     <option>2012-04</option>
  19     <option>2012-05</option>
  20     <option>2012-06</option>
  21     <option>2012-07</option>
  22     <option>2012-08</option>
  23     <option>2012-09</option>
  24     <option>2012-10</option>
  25     <option>2012-11</option>
  26     <option>2012-12</option>
  27     <option>2013-01</option>
  28     <option>2013-02</option>
  29     <option>2013-03</option>
  30     <option>2013-04</option>
  31     <option>2013-05</option>
  32     <option>2013-06</option>
  33     <option>2013-07</option>
  34     <option>2013-08</option>
  35     <option>2013-09</option>
  36     <option>2013-10</option>
  37     <option>2013-11</option>
  38     <option>2013-12</option>
  39     <option>2014-01</option>
  40     <option>2014-02</option>
  41     <option>2014-03</option>
  42     <option>2014-04</option>
  43     <option>2014-05</option>
  44     <option>2014-06</option>
  45     <option>2014-07</option>
  46     <option>2014-08</option>
  47     <option>2014-09</option>
  48     <option>2014-10</option>
  49     <option>2014-11</option>
  50     <option>2014-12</option>
  51     <option>2015-01</option>
  52     <option>2015-02</option>
  53     <option>2015-03</option>
  54     <option>2015-04</option>
  55     <option>2015-05</option>
  56     <option>2015-06</option>
  57     <option>2015-07</option>
  58     <option>2015-08</option>
  59     <option>2015-09</option>
  60     <option>2015-10</option>
  61     <option>2015-11</option>
  62     <option>2015-12</option>
  63     <option>2012-00</option> <!--invalid-->
  64     <option>2012-01-01</option> <!--invalid-->
  65     <option>foo</option> <!--invalid-->
  66 </datalist>
  67 <script>
  68 debug('Check that page popup doesn\'t exist at first.');
  69 shouldBeNull('$("mock-page-popup")');
  70
  71 openPicker($('month'), test1);
  72
  73 function test1() {
  74     debug('Check that page popup exists.');
  75     shouldBeEqualToString('popupWindow.pagePopupController.toString()', '[object PagePopupController]');
  76
  77     debug('Check that hovering over an entry highlights it.');
  78     hoverOverElement(popupWindow.document.querySelector(".suggestion-list-entry:nth-child(2)"));
  79     shouldBeEqualToString('highlightedEntry()', '2012-02');
  80
  81     debug('Check that moving the mouse outside the popup de-highlights entries.');
  82     hoverOverElement(document.getElementById('description'));
  83     shouldBeNull('highlightedEntry()');
  84
  85     debug('Check that mouse click closes the popup and sets the value.');
  86     clickElement(popupWindow.document.querySelector(".suggestion-list-entry:nth-child(3)"));
  87     waitUntilClosing(test1AfterClosing);
  88 }
  89
  90 function test1AfterClosing() {
  91     shouldBeNull('$("mock-page-popup")');
  92     shouldBeEqualToString('document.getElementById("month").value', '2012-03');
  93
  94     openPicker($('month'), test2);
  95 }
  96
  97 var scrollTopBeforeWheelEvent = 0;
  98 var scrollTopAfterWheelEvent = 0;
  99
 100 function test2() {
 101     var suggestionList = popupWindow.document.getElementsByClassName("suggestion-list")[0];
 102
 103     debug('Check that you can scroll using the mouse wheel.');
 104
 105     scrollTopBeforeWheelEvent = suggestionList.scrollTop;
 106     dispatchWheelEvent(suggestionList, 0, -100);
 107     scrollTopAfterWheelEvent = suggestionList.scrollTop;
 108     shouldBeTrue('scrollTopBeforeWheelEvent < scrollTopAfterWheelEvent');
 109
 110     scrollTopBeforeWheelEvent = suggestionList.scrollTop;
 111     dispatchWheelEvent(suggestionList, 0, 100);
 112     scrollTopAfterWheelEvent = suggestionList.scrollTop;
 113     shouldBeTrue('scrollTopBeforeWheelEvent > scrollTopAfterWheelEvent');
 114
 115     popupWindow.focus();
 116     eventSender.keyDown('escape');
 117     waitUntilClosing(test2AfterClosing);
 118 }
 119
 120 function test2AfterClosing() {
 121     shouldBeNull('$("mock-page-popup")');
 122
 123     openPicker($('month'), test3);
 124 }
 125
 126 function test3() {
 127     debug('Check that you can scroll using the scroll bar.');
 128
 129     var suggestionList = popupWindow.document.getElementsByClassName("suggestion-list")[0];
 130     var suggestionListOffset = cumulativeOffset(suggestionList);
 131     var scrollbarCenterX = suggestionListOffset[0] + suggestionList.offsetWidth - popupWindow.getScrollbarWidth() / 2;
 132
 133     scrollTopBeforeWheelEvent = suggestionList.scrollTop;
 134     eventSender.mouseMoveTo(scrollbarCenterX, suggestionListOffset[1] + 20); // 20 is the height of the up arrow button plus a few pixels
 135     eventSender.mouseDown();
 136     eventSender.mouseMoveTo(scrollbarCenterX, suggestionListOffset[1] + suggestionList.offsetHeight);
 137     eventSender.mouseUp();
 138     scrollTopAfterWheelEvent = suggestionList.scrollTop;
 139     shouldBeTrue('scrollTopBeforeWheelEvent < scrollTopAfterWheelEvent');
 140
 141     finishJSTest();
 142 }
 143
 144 </script>
 145 </body>
 146 </html>