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