| <!DOCTYPE html> |
| <html> |
| <head> |
| <style type="text/css" media="screen"> |
| body { overflow: hidden; } |
| html { |
| zoom: 120%; |
| } |
| #sl1 option { |
| font-size: 15px; |
| padding: 0; |
| } |
| </style> |
| <script> |
| var sl; |
| window.jsTestIsAsync = true; |
| |
| function test() { |
| description("Make sure mouse operations on listbox SELECT element work well even if it is zoomed."); |
| sl = document.getElementById("sl1"); |
| |
| mouseDownOnSelect(1); |
| shouldBe("sl.selectedIndex", "1"); |
| |
| mouseDownOnSelect(6); |
| shouldBe("sl.selectedIndex", "6"); |
| |
| finishJSTest(); |
| } |
| |
| function mouseDownOnSelect(index) { |
| var itemHeight = (sl.scrollHeight - 20) * 1.2 / sl.length; |
| var borderPaddingTop = 20 * 1.2; |
| var borderPaddingLeft = 20 * 1.2; |
| var y = index * itemHeight - window.pageYOffset + borderPaddingTop + itemHeight / 2; |
| |
| var clickX = sl.offsetLeft * 1.2 + borderPaddingLeft + 5; |
| var clickY = sl.offsetTop * 1.2 + y; |
| eventSender.mouseMoveTo(clickX, clickY); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| } |
| </script> |
| <script src="../../../resources/js-test.js"></script> |
| </head> |
| <body onload="test()"> |
| |
| <select id="sl1" multiple style="height: 160px; border: 10px solid; padding: 10px;"> |
| <option>one</option> |
| <option>two</option> |
| <option>three</option> |
| <option>four</option> |
| <option>five</option> |
| <option>six</option> |
| <option>seven</option> |
| <option>eight</option> |
| <option>nine</option> |
| <option>ten</option> |
| <option>eleven</option> |
| <option>twelve</option> |
| <option>thirteen</option> |
| <option>fourteen</option> |
| <option>fifteen</option> |
| <option>sixteen</option> |
| <option>seventeen</option> |
| </select> |
| |
| </body> |
| </html> |
