| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Scrollbar thumb re-rendering on hover</title> |
| <style> |
| #scrollable { |
| height: 200px; |
| width: 200px; |
| overflow: auto; |
| background-color: red; |
| -webkit-appearance: none; |
| } |
| |
| #scrollable::-webkit-scrollbar { |
| width: 10px; |
| background-color: red; |
| } |
| |
| #scrollable::-webkit-scrollbar-thumb { |
| background-color: red; |
| } |
| |
| #scrollable:hover { |
| background-color: green; |
| } |
| |
| #scrollable:hover::-webkit-scrollbar { |
| background-color: green; |
| } |
| |
| #scrollable:hover::-webkit-scrollbar-thumb { |
| background-color: green; |
| } |
| |
| #content { |
| height: 400px; |
| width: 100px; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Bug <a href="http://webkit.org/b/109230">109230</a>: REGRESSION(r130089): Scrollbar thumb no longer re-rendered on hover</p> |
| <p>For this test to pass, the below box should be green (in DumpRenderTree).<br> |
| Interactively, the whole box should turn green on mouseover, even if not over the scrollbar thumb.</p> |
| <div id="scrollable"> |
| <div id="content"></div> |
| </div> |
| <script> |
| function hoverOverScrollable() |
| { |
| if (!window.testRunner) |
| return; |
| |
| var scrollable = document.getElementById('scrollable'); |
| var scrollBox = scrollable.getBoundingClientRect(); |
| var scrollableCenterX = (scrollBox.left + scrollBox.right) / 2; |
| var scrollableCenterY = (scrollBox.top + scrollBox.bottom) / 2; |
| |
| eventSender.mouseMoveTo(scrollableCenterX, scrollableCenterY); |
| } |
| window.addEventListener('load', hoverOverScrollable); |
| </script> |
| </body> |
| </html> |
