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