non-composited-scroller-in-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;
    border: 5px solid salmon;
    clip: rect(0px, 1000px, 500px, 0px);
    width: 90%;
    height: 300px;
    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">
    This turquoise box is a position: fixed scroller. The black-and-white
    scroller beelow has a clip region so should be non-composited. 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.
  </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 starts off unscrolled.");
      assert_equals(fixed.scrollTop, 0, "Fixed starts off unscrolled.");

      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 by events over it.");
      assert_equals(fixed.scrollTop, 0, "Fixed must not have scrolled.");

    }, 'Scrolling over an uncomposited scrolling inside a fixed-composited ' +
       'scroller.');
  }

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