third_party/WebKit/LayoutTests/fast/css/pseudo-element-selector-scrollbar-hover.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>Scrollbar thumb re-rendering on hover</title>
   5 <style>
   6     #scrollable {
   7         height: 200px;
   8         width: 200px;
   9         overflow: auto;
  10         background-color: red;
  11         -webkit-appearance: none;
  12     }
  13
  14     #scrollable::-webkit-scrollbar {
  15         width: 10px;
  16         background-color: red;
  17     }
  18
  19     #scrollable::-webkit-scrollbar-thumb {
  20         background-color: red;
  21     }
  22
  23     #scrollable:hover {
  24         background-color: green;
  25     }
  26
  27     #scrollable:hover::-webkit-scrollbar {
  28         background-color: green;
  29     }
  30
  31     #scrollable:hover::-webkit-scrollbar-thumb {
  32         background-color: green;
  33     }
  34
  35     #content {
  36         height: 400px;
  37         width: 100px;
  38     }
  39 </style>
  40 </head>
  41 <body>
  42 <p>Bug <a href="http://webkit.org/b/109230">109230</a>: REGRESSION(r130089): Scrollbar thumb no longer re-rendered on hover</p>
  43 <p>For this test to pass, the below box should be green (in DumpRenderTree).<br>
  44 Interactively, the whole box should turn green on mouseover, even if not over the scrollbar thumb.</p>
  45 <div id="scrollable">
  46     <div id="content"></div>
  47 </div>
  48 <script>
  49     function hoverOverScrollable()
  50     {
  51         if (!window.testRunner)
  52             return;
  53
  54         var scrollable = document.getElementById('scrollable');
  55         var scrollBox = scrollable.getBoundingClientRect();
  56         var scrollableCenterX = (scrollBox.left + scrollBox.right) / 2;
  57         var scrollableCenterY = (scrollBox.top + scrollBox.bottom) / 2;
  58
  59         eventSender.mouseMoveTo(scrollableCenterX, scrollableCenterY);
  60     }
  61     window.addEventListener('load', hoverOverScrollable);
  62 </script>
  63 </body>
  64 </html>