| <html> |
| <head> |
| <title>Listbox scrollbar hit testing</title> |
| <style type="text/css" media="screen"> |
| select { |
| border: 20px inset gray; |
| padding: 10px; |
| } |
| |
| #results { |
| margin-top: 50px; |
| } |
| </style> |
| <script type="text/javascript" charset="utf-8"> |
| function sendClick(element, clientX, clientY) |
| { |
| if (window.eventSender) { |
| eventSender.mouseMoveTo(clientX, clientY); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| } |
| } |
| |
| function mouseDownOnSelect(selId, translateX, translateY) |
| { |
| log('Testing clicks on ' + selId); |
| |
| var selectElement = document.getElementById(selId); |
| var itemHeight = 14; |
| var border = 20; |
| var scrollbarWidth = 10; |
| var scrollbarButtonHeight = 12; |
| |
| var scrollbarMidX = translateX + selectElement.offsetLeft + selectElement.offsetWidth - border - scrollbarWidth / 2; |
| // Recall that DRT runs with both scroll arrows at the end of the scrollbar |
| var scrollbarTopArrowY = translateY + selectElement.offsetTop + selectElement.offsetHeight - border - scrollbarButtonHeight - 3; |
| var scrollbarBottomArrowY = translateY + selectElement.offsetTop + selectElement.offsetHeight - border - 3; |
| |
| sendClick(selectElement, scrollbarMidX, scrollbarBottomArrowY); |
| sendClick(selectElement, scrollbarMidX, scrollbarBottomArrowY); |
| if (selectElement.scrollTop == 2 * itemHeight) |
| log('Scrolled down by itemHeight on down arrow click: PASS'); |
| else |
| log('Failed to scroll down - scrollTop is ' + selectElement.scrollTop + ': FAIL'); |
| |
| sendClick(selectElement, scrollbarMidX, scrollbarTopArrowY); |
| if (selectElement.scrollTop == itemHeight) |
| log('Scrolled up by itemHeight on up arrow click: PASS'); |
| else |
| log('Failed to scroll up - scrollTop is ' + selectElement.scrollTop + ': FAIL'); |
| |
| log(''); |
| } |
| |
| function log(msg) |
| { |
| var results = document.getElementById('results'); |
| results.innerHTML += msg + '<br>'; |
| } |
| |
| function test() |
| { |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| if (!window.eventSender) { |
| log('This test only runs in DRT'); |
| } |
| |
| // Have to wait for the select to be painted before the |
| // scrollbar is sized correctly. |
| setTimeout(function() { |
| mouseDownOnSelect('select1', 0, 0); |
| mouseDownOnSelect('select2', 50, 50); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }, 0); |
| } |
| </script> |
| </head> |
| <body onload="test()"> |
| |
| <select id="select1" size="5"> |
| <option selected value="0">item 0</option> |
| <option value="1">item 1</option> |
| <option value="2">item 2</option> |
| <option value="3">item 3</option> |
| <option value="4">item 4</option> |
| <option value="5">item 5</option> |
| <option value="6">item 6</option> |
| <option value="7">item 7</option> |
| <option value="8">item 8</option> |
| </select> |
| |
| <select id="select2" size="5" style="-webkit-transform: translate(50px, 50px);"> |
| <option selected value="0">item 0</option> |
| <option value="1">item 1</option> |
| <option value="2">item 2</option> |
| <option value="3">item 3</option> |
| <option value="4">item 4</option> |
| <option value="5">item 5</option> |
| <option value="6">item 6</option> |
| <option value="7">item 7</option> |
| <option value="8">item 8</option> |
| </select> |
| |
| <div id="results"> |
| </div> |
| </body> |
| </html> |
