scrollbar-occluded-by-div.html | Explore in Territory

<!DOCTYPE html>
<title>Tests scrollbar hit testing when it is occluded.</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>
<style>
.appearance {
  width: 100px;
  height: 100px;
  overflow: scroll;
  border: 1px solid black;
}
.location {
  position: absolute;
  top: 100px;
  left: 100px;
}
.space {
  height: 2000px;
  width: 2000px;
}
.occlude {
  background: red;
  left: 150px;
  top: 150px;
  opacity: 0.2;
  position: absolute;
}
</style>

<!-- Composited non-custom scroller -->
<div id="scroller" class="appearance location">
  <div id="divContent" class="space"></div>
</div>

<!-- Add a div that partially occludes the composited scrollbar. -->
<div id="occlusion_div" class="occlude appearance">
</div>

<script>
  if (window.internals)
    internals.settings.setScrollAnimatorEnabled(false);

  const scroller = document.getElementById("scroller");
  const scrollerRect = scroller.getBoundingClientRect();

  const TRACK_WIDTH = calculateScrollbarThickness();
  const BUTTON_WIDTH = TRACK_WIDTH;
  const SCROLL_CORNER = TRACK_WIDTH;
  const onMacPlatform =  navigator.userAgent.search(/\bMac OS X\b/) != -1;

  // This tests that interacting with a composited scrollbar that is
  // occluded by another layer doesn't cause a scroll.
  promise_test (async () => {
    scroller.scrollTop = 0;

    // Click on the down arrow (which should now be occluded by the div).
    const down_arrow_x = scrollerRect.right - BUTTON_WIDTH / 2;
    const down_arrow_y = scrollerRect.bottom - SCROLL_CORNER - BUTTON_WIDTH / 2;
    await mouseClickOn(down_arrow_x, down_arrow_y);

    // Expect that the scrolling doesn't happen.
    assert_equals(scroller.scrollTop, 0, "Clicking on an occluded scrollbar shouldn't scroll");

    // Remove the div and verify that scrolling takes place as expected.
    document.body.removeChild(occlusion_div);
    await mouseClickOn(down_arrow_x, down_arrow_y);
    const EXPECTED_BUTTON_SCROLL_AMOUNT = getScrollbarButtonScrollDelta(scroller).y;
    const expected = onMacPlatform ? 74 : EXPECTED_BUTTON_SCROLL_AMOUNT;
    const pressedPart = onMacPlatform ? "track" : "down arrow";
    await waitForAnimationEndTimeBased(() => {return scroller.scrollTop;});
    assert_approx_equals(scroller.scrollTop, expected, 1, "Pressing the " + pressedPart + " didn't scroll.");
  },"Test hit-testing when scrollbar is occluded.");
</script>
chromium/third_party/blink/web_tests/fast/scrolling/scrollbars/scrollbar-occluded-by-div.html
