| <!DOCTYPE html> |
| <title>Tests mouse interactions 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; |
| } |
| .standardLocation { |
| position: absolute; |
| top: 100px; |
| left: 100px; |
| } |
| .customLocation { |
| position: absolute; |
| top: 250px; |
| left: 100px; |
| } |
| .fast { |
| will-change: transform; |
| } |
| .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 non-custom fast scroller --> |
| <div id="standard" class="appearance standardLocation fast"> |
| <div class="space"></div> |
| </div> |
| |
| <!-- Composited custom fast scroller --> |
| <div id="custom" class="appearance customLocation fast"> |
| <div class="space"></div> |
| </div> |
| |
| <script> |
| if (window.internals) |
| internals.settings.setScrollAnimatorEnabled(false); |
| |
| window.onload = () => { |
| const standardDivFast = document.getElementById("standard"); |
| const standardRectFast = standardDivFast.getBoundingClientRect(); |
| |
| const TRACK_WIDTH = calculateScrollbarThickness(); |
| const BUTTON_WIDTH = TRACK_WIDTH; |
| const SCROLL_CORNER = TRACK_WIDTH; |
| const SCROLL_DELTA = 50; |
| |
| promise_test (async () => { |
| await waitForCompositorCommit(); |
| resetScrollOffset(standardDivFast); |
| |
| // Click on the Down arrow for standardRectFast. |
| let x = standardRectFast.right - BUTTON_WIDTH / 2; |
| let y = standardRectFast.bottom - SCROLL_CORNER - BUTTON_WIDTH / 2; |
| await mouseClickOn(x, y); |
| assert_equals(standardDivFast.scrollTop, 40, "Pressing the down arrow didn't scroll."); |
| |
| // Click on the Up arrow for standardRectFast. |
| x = standardRectFast.right - BUTTON_WIDTH / 2; |
| y = standardRectFast.top + BUTTON_WIDTH / 2; |
| await mouseClickOn(x, y); |
| assert_equals(standardDivFast.scrollTop, 0, "Pressing the up arrow didn't scroll."); |
| |
| // Click on the Right arrow for standardRectFast. |
| x = standardRectFast.right - SCROLL_CORNER - BUTTON_WIDTH / 2; |
| y = standardRectFast.bottom - BUTTON_WIDTH / 2; |
| await mouseClickOn(x, y); |
| assert_equals(standardDivFast.scrollLeft, 40, "Pressing the right arrow didn't scroll."); |
| |
| // Click on the Left arrow for standardRectFast. |
| x = standardRectFast.left + BUTTON_WIDTH / 2; |
| y = standardRectFast.bottom - BUTTON_WIDTH / 2; |
| await mouseClickOn(x, y); |
| assert_equals(standardDivFast.scrollLeft, 0, "Pressing the left arrow didn't scroll."); |
| }, "Test mouse click on non-custom composited div scrollbar arrows."); |
| |
| promise_test (async () => { |
| await waitForCompositorCommit(); |
| resetScrollOffset(standardDivFast); |
| |
| // Click on the track part just above the down arrow. |
| let x = standardRectFast.right - BUTTON_WIDTH / 2; |
| let y = standardRectFast.bottom - SCROLL_CORNER - BUTTON_WIDTH - 2; |
| await mouseClickOn(x, y); |
| assert_equals(standardDivFast.scrollTop, 74, "Pressing the down trackpart didn't scroll."); |
| |
| // Click on the track part just below the up arrow. |
| x = standardRectFast.right - BUTTON_WIDTH / 2; |
| y = standardRectFast.top + BUTTON_WIDTH + 2; |
| await mouseClickOn(x, y); |
| assert_equals(standardDivFast.scrollTop, 0, "Pressing the up trackpart didn't scroll."); |
| |
| // Click on the track part just to the left of the right arrow. |
| x = standardRectFast.right - SCROLL_CORNER - BUTTON_WIDTH - 2; |
| y = standardRectFast.bottom - BUTTON_WIDTH / 2; |
| await mouseClickOn(x, y); |
| assert_equals(standardDivFast.scrollLeft, 74, "Pressing the right trackpart didn't scroll."); |
| |
| // Click on the track part just to the right of the left arrow. |
| x = standardRectFast.left + BUTTON_WIDTH + 2; |
| y = standardRectFast.bottom - BUTTON_WIDTH / 2; |
| await mouseClickOn(x, y); |
| assert_equals(standardDivFast.scrollLeft, 0, "Pressing the left trackpart didn't scroll."); |
| }, "Test mouse click on non-custom composited div scrollbar empty trackparts."); |
| |
| promise_test (async () => { |
| await waitForCompositorCommit(); |
| resetScrollOffset(standardDivFast); |
| |
| // Testing forward scroll on vertical scrollbar. |
| let x = standardRectFast.right - BUTTON_WIDTH / 2; |
| let y = standardRectFast.top + 50; |
| await mouseClickOn(x, y, /*left_click*/0, /*modifier*/ "Shift"); |
| assert_equals(standardDivFast.scrollTop, 617, "Shift + click forward didn't scroll."); |
| |
| // Testing backward scroll on vertical scrollbar. |
| x = standardRectFast.right - BUTTON_WIDTH / 2; |
| y = standardRectFast.top + 30; |
| await mouseClickOn(x, y, /*left_click*/0, /*modifier*/ "Shift"); |
| assert_equals(standardDivFast.scrollTop, 160, "Shift + click backward didn't scroll."); |
| |
| // Testing forward scroll on horizontal scrollbar. |
| x = standardRectFast.left + 50; |
| y = standardRectFast.bottom - BUTTON_WIDTH / 2; |
| await mouseClickOn(x, y, /*left_click*/0, /*modifier*/ "Shift"); |
| assert_equals(standardDivFast.scrollLeft, 617, "Shift + click forward didn't scroll."); |
| |
| // Testing backward scroll on horizontal scrollbar. |
| x = standardRectFast.left + 30; |
| y = standardRectFast.bottom - BUTTON_WIDTH / 2; |
| await mouseClickOn(x, y, /*left_click*/0, /*modifier*/ "Shift"); |
| assert_equals(standardDivFast.scrollLeft, 160, "Shift + click backward didn't scroll."); |
| }, "Test shift + click on non-custom composited scrollbars."); |
| |
| promise_test (async () => { |
| await waitForCompositorCommit(); |
| resetScrollOffset(standardDivFast); |
| |
| // Testing the vertical scrollbar thumb. |
| let x = standardRectFast.right - TRACK_WIDTH / 2; |
| let y = standardRectFast.top + BUTTON_WIDTH + 5; |
| |
| await mouseMoveTo(x, y); |
| await mouseDownAt(x, y); |
| assert_equals(standardDivFast.scrollTop, 0, "Mousedown on vertical scrollbar thumb is not expected to scroll."); |
| |
| await mouseMoveTo(x, y-10); |
| assert_equals(standardDivFast.scrollTop, 0, "Vertical thumb drag beyond the track should not cause a scroll."); |
| |
| await mouseMoveTo(x, y); |
| assert_equals(standardDivFast.scrollTop, 0, "Vertical thumb drag beyond the track and back should not cause a scroll."); |
| |
| y += SCROLL_DELTA; |
| await mouseMoveTo(x, y); |
| assert_equals(standardDivFast.scrollTop, 915, "Vertical thumb drag downwards did not scroll as expected."); |
| |
| y -= SCROLL_DELTA; |
| await mouseMoveTo(x, y); |
| assert_equals(standardDivFast.scrollTop, 0, "Vertical thumb drag upwards did not scroll as expected."); |
| |
| await mouseUpAt(x, y); |
| assert_equals(standardDivFast.scrollTop, 0, "Mouseup on vertical scrollbar thumb is not expected to scroll."); |
| |
| // Testing the horizontal scrollbar thumb. |
| x = standardRectFast.left + BUTTON_WIDTH + 5; |
| y = standardRectFast.bottom - TRACK_WIDTH / 2; |
| |
| await mouseMoveTo(x, y); |
| await mouseDownAt(x, y); |
| assert_equals(standardDivFast.scrollLeft, 0, "Mousedown on horizontal scrollbar thumb is not expected to scroll."); |
| |
| await mouseMoveTo(x-10, y); |
| assert_equals(standardDivFast.scrollLeft, 0, "Horizontal thumb drag beyond the track should not cause a scroll."); |
| |
| await mouseMoveTo(x, y); |
| assert_equals(standardDivFast.scrollLeft, 0, "Horizontal thumb drag beyond the track and back should not cause a scroll."); |
| |
| x += SCROLL_DELTA; |
| await mouseMoveTo(x, y); |
| assert_equals(standardDivFast.scrollLeft, 915, "Horizontal thumb drag towards the right did not scroll as expected."); |
| |
| x -= SCROLL_DELTA; |
| await mouseMoveTo(x, y); |
| assert_equals(standardDivFast.scrollLeft, 0, "Horizontal thumb drag towards the left did not scroll as expected."); |
| |
| await mouseUpAt(x, y); |
| assert_equals(standardDivFast.scrollLeft, 0, "Mouseup on horizontal scrollbar thumb is not expected to scroll."); |
| }, "Test mouse drags on non-custom composited div scrollbar thumb."); |
| |
| promise_test (async () => { |
| await waitForCompositorCommit(); |
| resetScrollOffset(standardDivFast); |
| |
| // Testing the vertical scrollbar thumb. |
| let x = standardRectFast.right - TRACK_WIDTH / 2; |
| let y = standardRectFast.top + BUTTON_WIDTH + 5; |
| let asc_increments = [15, 10, 7, 6, 2]; |
| let asc_offsets = [343, 571, 732, 869, 915]; |
| let desc_increments = [3, 2, 5, 9, 21]; |
| let desc_offsets = [846, 800, 686, 480, 0]; |
| |
| await mouseMoveTo(x, y); |
| await mouseDownAt(x, y); |
| |
| // Scroll down |
| for (var i = 0; i < 5; i++){ |
| y += asc_increments[i]; |
| await mouseMoveTo(x, y); |
| assert_equals(standardDivFast.scrollTop, asc_offsets[i], "Vertical thumb drag downwards did not scroll as expected at "+asc_increments[i]+" - "); |
| }; |
| |
| // Scroll up |
| for (var i = 0; i < 5; i++){ |
| y -= desc_increments[i]; |
| await mouseMoveTo(x, y); |
| assert_equals(standardDivFast.scrollTop, desc_offsets[i], "Vertical thumb drag upwards did not scroll as expected at "+desc_increments[i]+" - "); |
| }; |
| |
| await mouseUpAt(x, y); |
| assert_equals(standardDivFast.scrollTop, 0, "Mouseup on vertical scrollbar thumb is not expected to scroll."); |
| |
| // Testing the horizontal scrollbar thumb. |
| resetScrollOffset(standardDivFast); |
| x = standardRectFast.left + BUTTON_WIDTH + 5; |
| y = standardRectFast.bottom - TRACK_WIDTH / 2; |
| await mouseMoveTo(x, y); |
| await mouseDownAt(x, y); |
| |
| // Scroll right |
| for (var i = 0; i < 5; i++){ |
| x += asc_increments[i]; |
| await mouseMoveTo(x, y); |
| assert_equals(standardDivFast.scrollLeft, asc_offsets[i], "Horizontal thumb drag to the right did not scroll as expected at "+asc_increments[i]+" - "); |
| }; |
| |
| // Scroll left |
| for (var i = 0; i < 5; i++){ |
| x -= desc_increments[i]; |
| await mouseMoveTo(x, y); |
| assert_equals(standardDivFast.scrollLeft, desc_offsets[i], "Horizontal thumb drag to the left did not scroll as expected at "+desc_increments[i]+" - "); |
| }; |
| |
| await mouseUpAt(x, y); |
| assert_equals(standardDivFast.scrollLeft, 0, "Mouseup on horizontal scrollbar thumb is not expected to scroll."); |
| |
| }, "Test mouse drags in intervals on non-custom composited div scrollbar thumb."); |
| |
| 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); |
| |
| // 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); |
| |
| // Test passes if renderer did not crash. |
| |
| }, "Test mouse click on custom composited div scrollbars."); |
| } |
| </script> |
