non-composited-scroller-in-scrolled-position-fixed-scroller.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;
    overflow-y: scroll;
  }

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

  #scroller {
    position: absolute;
    top: 300px;
    border: 5px solid salmon;
    clip: rect(0px, 1000px, 500px, 0px);
    width: 90%;
    height: 100px;
    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 scroller. The black-and-white
      scroller beelow has a clip region so should be non-composited.
    </p>
    <p>
      Scroll the turquoise box so the black-and-white scroller appears near its
      top edge. Now attempt to scroll over the black-and-white scroller with
      wheel or touch.  If the box scrolls, the test passes. This turquoise
      scroller must not scroll.
    </p>
  </div>
  <div id="scroller">
    <div class="spacer"></div>
  </div>
  <div style="height:1000px"></div>
</div>

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

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

    promise_test(async () => {
      assert_equals(scroller.scrollTop, 0, "Scroller must start off unscrolled.");
      assert_equals(fixed.scrollTop, 0, "Fixed must start off unscrolled.");

      // Scroll the fixed so that the scroller box doesn't overlap at all with
      // where it used to be.
      {
        const delta = scroller.clientHeight * 2;
        const location = elementCenter(fixed);
        await smoothScroll(delta,
                           location.x,
                           location.y,
                           GestureSourceType.TOUCH_INPUT,
                           'down',
                           SPEED_INSTANT);
        assert_greater_than(fixed.scrollTop, scroller.clientHeight,
                            "Fixed must be scrolled.");
        assert_equals(scroller.scrollTop, 0,
                      "Scroller must remain unscrolled.");
      }

      // Now attempt to scroll over the scroller box. Ensure it scrolls, rather
      // than the fixed box.
      {
        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 must be scrolled by events over it.");
      }
    }, 'Scrolling over an uncomposited scrolling inside a scrolled, fixed, ' +
       'composited scroller.');
  }

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