non-composited-scroller-in-position-fixed-scrolled-document.html

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

<style>
  body, html {
    margin: 0;
  }

  #fixed {
    position: fixed;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    padding: 20px;
    box-sizing: border-box;
    background-color: PaleTurquoise;
  }

  #instructions {
    width: 100%;
    text-align: center;
  }

  #scroller {
    position: absolute;
    border: 5px solid salmon;
    clip: rect(0px, 1000px, 500px, 0px);
    width: 90%;
    height: 150px;
    overflow-y: scroll;
  }

  .spacer {
    height: 400%;
    background:repeating-linear-gradient(#FFF 0%, #FFF 10%, #000 10%, #000 20%);
  }
</style>

<div id="fixed">
  <div id="instructions">
    <p>
      This turquoise box is a position: fixed box. The black-and-white scroller
      beelow has a clip region so should be non-composited. The document has
      scrolling of its own.
    </p>
    <p>
      Scroll the document down (nothing will move since this box is position:
      fixed).  Now attempt to scroll over the black-and-white scroller with
      wheel or touch. If the box scrolls, the test passes. The document must
      not scroll.
    </p>
  </div>
  <div id="scroller">
    <div class="spacer"></div>
  </div>
</div>
<div style="height:1000px"></div>

<script>
  window.onload = async () => {
    await waitForCompositorCommit();

    const scroller = document.getElementById('scroller');

    promise_test(async () => {
      assert_equals(scroller.scrollTop, 0, "Scroller starts off unscrolled.");
      assert_equals(window.scrollY, 0, "Window starts off unscrolled.");

      // Scroll over the document so that the page gets scrolled down.
      {
        const delta = 1000;
        const location = { x: 5, y: 5 };
        await smoothScroll(delta,
                           location.x,
                           location.y,
                           GestureSourceType.TOUCH_INPUT,
                           'down',
                           SPEED_INSTANT);

        // Ensure we've scrolled more than the scroller height to ensure a
        // NonFastScrollableRect bug related to scroll would be reproducible
        // over the entire scroller.
        assert_greater_than(window.scrollY, 150,
                            "Document should have been scrolled.");
      }

      // Now perform a scroll over the scroller rect. Ensure we targetted the
      // correct scroller.
      {
        const delta = 100;
        const location = elementCenter(scroller);
        await smoothScroll(delta,
                           location.x,
                           location.y,
                           GestureSourceType.TOUCH_INPUT,
                           'down',
                           SPEED_INSTANT);

        assert_greater_than(scroller.scrollTop, 0,
                            "Scroller should be scrolled.");
      }

      // Now mutate the scroller so that we force a recompute of its non-fast
      // scrollable region.
      {
        scroller.style.height = "151px";
        await waitForCompositorCommit();
      }

      // Again perform a scroll over the scroller rect. Ensure we targetted the
      // correct scroller.
      {
        const delta = 100;
        const location = elementCenter(scroller);
        await smoothScroll(delta,
                           location.x,
                           location.y,
                           GestureSourceType.TOUCH_INPUT,
                           'up',
                           SPEED_INSTANT);

        assert_equals(scroller.scrollTop, 0,
                      "Scroller should be scrolled to the top.");
      }

    }, 'Scrolling over an uncomposited scroller inside a composited position' +
       ': fixed element.');
  }

</script>
chromium/third_party/blink/web_tests/fast/scrolling/non-composited-scroller-in-position-fixed-scrolled-document.html
