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