| <!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> |
