<!DOCTYPE html>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<script src='../../resources/gesture-util.js'></script>
<style>
  #scroller {
    width: 300px;
    height: 300px;
    overflow: auto;
  }
  #spacer {
    width: 1000px;
    height: 1000px;
    /* clip-path to force the scroller non-composited when live testing. */
    clip-path: inset(1px 1px);
    background-image: linear-gradient(red, yellow);
  }
</style>
<div id="scroller">
  <div id="spacer"></div>
</div>

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

  window.onload = async () => {
    // Wait until layer information has gone from Blink to CC's active tree.
    await waitForCompositorCommit();

    // Try scrolling the uncomposited #scroller div.
    promise_test(async () => {
      const distance = 500;
      const x = 200;
      const y = 200;
      await smoothScroll(distance,
                         x, y,
                         GestureSourceType.MOUSE_INPUT,
                         'down',
                         SPEED_INSTANT,
                         true /* precise scrolling deltas */);

      const scroller = document.getElementById('scroller');
      await waitFor(() => { return scroller.scrollTop > 0; },
          "Scroller wasn't scrolled by scroll gesture.");
    }, 'Scrolling over non-composited scroller.');
  }
</script>