| <!DOCTYPE html> |
| <title>Tests "thumb snap back" on a non-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; |
| } |
| .ltrLocation { |
| position: absolute; |
| top: 100px; |
| left: 100px; |
| } |
| .space { |
| height: 1000px; |
| width: 1000px; |
| } |
| |
| .rtlLocation { |
| position: absolute; |
| top: 100px; |
| left: 300px; |
| } |
| .direction_rtl { |
| direction: rtl; |
| } |
| </style> |
| |
| <!-- Non-custom ltr scroller --> |
| <div id="standard_ltr" class="appearance ltrLocation"> |
| <div class="space"></div> |
| </div> |
| |
| <!-- Non-custom rtl scroller --> |
| <div id="standard_rtl" class="appearance rtlLocation direction_rtl"> |
| <div class="space"></div> |
| </div> |
| |
| <script> |
| window.onload = () => { |
| const TRACK_WIDTH = calculateScrollbarThickness(); |
| const BUTTON_WIDTH = TRACK_WIDTH; |
| const MSG = "Horizontal thumb drag beyond the gutter (around the track)" + |
| " should cause the thumb to snap back to the drag origin."; |
| |
| promise_test (async () => { |
| // Scrollbar thumb snapping is a Windows only feature. |
| if(!navigator.userAgent.includes("Windows")) |
| return; |
| |
| const ltrDiv = document.getElementById("standard_ltr"); |
| const ltrRect = ltrDiv.getBoundingClientRect(); |
| await waitForCompositorCommit(); |
| const DRAG_ORIGIN = 10; |
| ltrDiv.scrollLeft = DRAG_ORIGIN; |
| |
| // Testing the horizontal scrollbar thumb. |
| const x = ltrRect.left + BUTTON_WIDTH + 2; |
| const y = ltrRect.bottom - TRACK_WIDTH / 2; |
| |
| await mouseMoveTo(x, y); |
| await mouseDownAt(x, y); |
| await mouseMoveTo(x + 10, y); |
| assert_true(ltrDiv.scrollLeft > 200, "Thumb drag should cause a scroll."); |
| |
| await mouseMoveTo(x + 10, y + 200); |
| assert_equals(ltrDiv.scrollLeft, DRAG_ORIGIN, MSG); |
| await mouseUpAt(x + 10, y + 200); |
| }, "Tests that the thumb snaps back for ltr direction."); |
| |
| promise_test (async () => { |
| // Scrollbar thumb snapping is a Windows only feature. |
| if(!navigator.userAgent.includes("Windows")) |
| return; |
| |
| const rtlDiv = document.getElementById("standard_rtl"); |
| const rtlRect = rtlDiv.getBoundingClientRect(); |
| await waitForCompositorCommit(); |
| const DRAG_ORIGIN = -40; |
| rtlDiv.scrollLeft = DRAG_ORIGIN; |
| |
| // Testing the horizontal scrollbar thumb. |
| const x = rtlRect.right - BUTTON_WIDTH - 5; |
| const y = rtlRect.bottom - TRACK_WIDTH / 2; |
| |
| await mouseMoveTo(x, y); |
| await mouseDownAt(x, y); |
| await mouseMoveTo(x - 10, y); |
| assert_true(rtlDiv.scrollLeft < -200, "Thumb drag should cause a scroll."); |
| |
| await mouseMoveTo(x - 10, y + 200); |
| assert_equals(rtlDiv.scrollLeft, DRAG_ORIGIN, MSG); |
| await mouseUpAt(x - 10, y + 200); |
| }, "Tests that the thumb snaps back for rtl direction."); |
| } |
| </script> |
