| <!DOCTYPE html> |
| <title>Tests mouse interactions on a custom composited div scrollbar.</title> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <script src="../../../resources/gesture-util.js"></script> |
| <script src="../../../resources/scrollbar-util.js"></script> |
| <style> |
| .appearance { |
| width: 100px; |
| height: 100px; |
| overflow: scroll; |
| border: 1px solid black; |
| } |
| .customLocation { |
| position: absolute; |
| top: 250px; |
| left: 100px; |
| } |
| .space { |
| height: 1000px; |
| width: 1000px; |
| } |
| |
| #custom::-webkit-scrollbar { |
| height: 10px; |
| width: 10px; |
| } |
| |
| #custom::-webkit-scrollbar-track { |
| background: #f5f5f5; |
| } |
| |
| #custom::-webkit-scrollbar-thumb { |
| background: #ababab; |
| } |
| |
| #custom::-webkit-scrollbar-thumb:hover { |
| background: #cdcdcd; |
| } |
| </style> |
| |
| <!-- Composited custom scroller --> |
| <div id="custom" class="appearance customLocation"> |
| <div class="space"></div> |
| </div> |
| |
| <script> |
| window.onload = () => { |
| promise_test (async () => { |
| await waitForCompositorCommit(); |
| const customDivFast = document.getElementById("custom"); |
| const customRectFast = customDivFast.getBoundingClientRect(); |
| |
| // Testing the vertical custom scrollbar click. |
| let x = customRectFast.right - 5; |
| let y = customRectFast.top + customRectFast.height / 2; |
| |
| await mouseMoveTo(x, y); |
| await mouseDownAt(x, y); |
| await mouseMoveTo(x, y); |
| await mouseUpAt(x, y); |
| |
| // Testing the horizontal custom scrollbar click. |
| x = customRectFast.left + customRectFast.width / 2; |
| y = customRectFast.bottom - 5; |
| |
| await mouseMoveTo(x, y); |
| await mouseDownAt(x, y); |
| await mouseMoveTo(x, y); |
| await mouseUpAt(x, y); |
| |
| // Test passes if renderer did not crash. |
| |
| }, "Test mouse click on custom composited div scrollbars."); |
| } |
| </script> |
