scrollbar-thumb-snapping.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/fast/scrolling/scrollbars/scrollbar-thumb-snapping.html
