overflow-scrollability.html | Explore in Territory

<!DOCTYPE html>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<script src='../../resources/gesture-util.js'></script>
<script src="../../resources/percent-based-util.js"></script>

<style>
  body,
  html {
    margin: 0;
  }
  .container {
    width: 100px;
    height: 100px;
  }
  .content-big {
    width: 200px;
    height: 200px;
  }
  .content-small {
    width: 20px;
    height: 20px;
  }
</style>

scroll with overflow
<div id='overflow-1' class='container' style='overflow-x: scroll; overflow-y: scroll'>
  <div class='content-big'>Content</div>
</div>

auto with overflow
<div id='overflow-2' class='container' style='overflow-x: auto; overflow-y: auto'>
  <div class='content-big'>Content</div>
</div>

hidden with overflow
<div id='overflow-3' class='container' style='overflow-x: hidden; overflow-y: hidden'>
  <div class='content-big'>Content</div>
</div>

overlay with overflow
<div id='overflow-4' class='container' style='overflow-x: overlay; overflow-y: overlay'>
  <div class='content-big'>Content</div>
</div>

scroll without overflow
<div id='no-overflow-1' class='container' style='overflow-x: scroll; overflow-y: scroll'>
  <div class='content-small'>Content</div>
</div>

auto without overflow
<div id='no-overflow-2' class='container' style='overflow-x: auto; overflow-y: auto'>
  <div class='content-small'>Content</div>
</div>

hidden without overflow
<div id='no-overflow-3' class='container' style='overflow-x: hidden; overflow-y: hidden'>
  <div class='content-small'>Content</div>
</div>

overlay without overflow
<div id='no-overflow-4' class='container' style='overflow-x: overlay; overflow-y: overlay'>
  <div class='content-small'>Content</div>
</div>

<script>
  const mouse = GestureSourceType.MOUSE_INPUT;
  const pixelsToScroll = pixelsPerTick();

  async function testScrollable(div_id, scroll_expected) {
    let div = document.getElementById(div_id);
    div.scrollIntoView({ block: 'start', inline: 'start', behavior: 'instant' });
    await waitForCompositorCommit();

    let x = div.offsetLeft - window.scrollX + 5;
    let y = div.offsetTop - window.scrollY + 5
    await mouseMoveTo(x, y);

    await smoothScroll(pixelsToScroll, x, y, mouse, 'down',
                       SPEED_INSTANT, false /* precise_scrolling_deltas */);
    let assertDescription = `${div_id} vertical scroll failed`;
    if (scroll_expected) {
      waitFor(() => div.scrollTop > 0, assertDescription);
    } else {
      await raf();
      await raf();
      assert_equals(div.scrollTop, 0, assertDescription);
    }

    await smoothScroll(pixelsToScroll, x, y, mouse, 'right',
                       SPEED_INSTANT, false /* precise_scrolling_deltas */);
    assertDescription = `${div_id} horizontal scroll failed`;
    if (scroll_expected) {
      waitFor(() => div.scrollLeft > 0, assertDescription);
    } else {
      await raf();
      await raf();
      assert_equals(div.scrollLeft, 0, assertDescription);
    }
  }

  window.onload = async () => {
    if (window.internals)
      internals.settings.setScrollAnimatorEnabled(false);
    await waitForCompositorCommit();

    promise_test(async () => {
      await testScrollable('overflow-1', true);
      await testScrollable('overflow-2', true);
      await testScrollable('overflow-3', false);
      await testScrollable('overflow-4', true);
      await testScrollable('no-overflow-1', false);
      await testScrollable('no-overflow-2', false);
      await testScrollable('no-overflow-3', false);
      await testScrollable('no-overflow-4', false);
    }, 'This tests that scrollable areas with the appropriate overflow mode set'
      + ' are in fact scrollable by the user.');
  };
</script>
chromium/third_party/blink/web_tests/fast/scrolling/overflow-scrollability.html
