<!doctype html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src='../../../resources/gesture-util.js'></script>
<style>
.scroll {
  overflow: auto;
  width: 100px;
  height: 100px;
  will-change: transform;
}

.scrolled-content {
  width: 50px;
  height: 1000px;
  background-image: linear-gradient(green, red);
}

#animated-overlap {
  height: 100px;
  width: 110px;
  animation: cover 1s infinite;
}

@keyframes cover {
  0% { transform: translateY(0); }
  1% { transform: translateY(-100px); }
  100% { transform: translateY(-100px); }
}
</style>
It should not be possible to scroll this content:<br>
<div id="scroller" class="scroll">
  <div class="scrolled-content"></div>
</div>
<div id="animated-overlap"></div>
<script>
  promise_test(async t => {
    await waitForCompositorCommit();
    await smoothScroll(20, 50, 50, GestureSourceType.MOUSE_INPUT, 'down', SPEED_INSTANT);
    await waitForCompositorCommit();
    assert_equals(document.getElementById('scroller').scrollTop, 0);
  }, 'Invisible composited animation prevents scroll');
</script>