scrollbar-rtl-manipulation.html | Explore in Territory

<!DOCTYPE html>
<title>Tests mouse interactions for rtl scrollbars.</title>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../resources/gesture-util.js"></script>
<script src="../../../resources/blink-coordinates-util.js"></script>
<script src="../../../resources/scrollbar-util.js"></script>
<script src="../../../resources/testdriver.js"></script>
<script src="../../../resources/testdriver-actions.js"></script>
<script src="../../../resources/testdriver-vendor.js"></script>
<style>
  /*
    Keep the ratio of the scroll width/height to client width/height small
    enough to avoid hitting a theme dependent minimum thumb length for the
    scrollbar.
  */
  .rtl_container {
    overflow: scroll;
    border: 1px solid black;
    width: 300px;
    height: 300px;
    direction: rtl;
  }
  .space {
    width:  1000px;
    height: 1000px;
  }
</style>

<div class="rtl_container" id="standard">
  <div class="space">Text</div>
</div>

<script>
window.onload = () => {
  const standardDiv = document.getElementById("standard");
  const standardRect = standardDiv.getBoundingClientRect();

  const TRACK_WIDTH = calculateScrollbarThickness();
  const BUTTON_WIDTH = TRACK_WIDTH;
  const SCROLL_CORNER = BUTTON_WIDTH;

  promise_test (async () => {
    await waitForCompositorCommit();

    if (!hasScrollbarArrows()) {
      // This test simulates clicking on an arrow button on the scrollbar.
      // Mac scrollbars do not have arrow buttons. Also skip if testing in
      // an environment with overlay scrollbars.
      return;
    }

    await waitForScrollReset(standardDiv);
    const SCROLL_AMOUNT = getScrollbarButtonScrollDelta(standardDiv);

    // Testing vertical scroll.
    let buttonPos = downArrow(standardDiv);
    await clickScroll(buttonPos.x, buttonPos.y, standardDiv);
    // TODO(arakeri): Replace with assert_equals once crbug.com/1056083 is fixed.
    assert_approx_equals(standardDiv.scrollTop, SCROLL_AMOUNT.y, 1,
                         "Vertical click scrolling failed.");

    await raf();

    // Testing horizontal scroll.
    buttonPos = leftArrow(standardDiv);
    await clickScroll(buttonPos.x, buttonPos.y, standardDiv);
    assert_approx_equals(standardDiv.scrollLeft, -SCROLL_AMOUNT.x, 1,
                         "Horizontal click scrolling failed.");
  }, "Test click on rtl scrollbar arrows.");

  promise_test (async () => {
    await waitForCompositorCommit();
    await waitForScrollReset(standardDiv);

    const deltaX = -15;
    const deltaY = 15;
    const expectedScrollAmount =
        thumbDragScrollAmount(deltaX, deltaY, standardDiv);

    // Testing vertical scroll.
    let thumbPos = verticalThumb(standardDiv);
    await mouseDragScroll(thumbPos.x, thumbPos.y, 0, deltaY, standardDiv);
    assert_approx_equals(standardDiv.scrollTop, expectedScrollAmount.dy, 1,
                         "Vertical thumb drag failed.");

    await raf();

    // Testing horizontal scroll.
    thumbPos = horizontalThumb(standardDiv);

    await mouseDragScroll(thumbPos.x, thumbPos.y, deltaX, 0, standardDiv);
    assert_approx_equals(standardDiv.scrollLeft, expectedScrollAmount.dx, 1,
                         "Horizontal thumb drag failed.");
  }, "Test thumb drag on rtl scrollbar.");
}

</script>
chromium/third_party/blink/web_tests/fast/scrolling/scrollbars/scrollbar-rtl-manipulation.html
