| <!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%; |
| text-align: center; |
| } |
| |
| #scroller { |
| position: absolute; |
| border: 5px solid salmon; |
| clip: rect(0px, 1000px, 500px, 0px); |
| width: 90%; |
| height: 150px; |
| 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"> |
| <p> |
| This turquoise box is a position: fixed box. The black-and-white scroller |
| beelow has a clip region so should be non-composited. The document has |
| scrolling of its own. |
| </p> |
| <p> |
| Scroll the document down (nothing will move since this box is position: |
| fixed). Now attempt to scroll over the black-and-white scroller with |
| wheel or touch. If the box scrolls, the test passes. The document must |
| not scroll. |
| </p> |
| </div> |
| <div id="scroller"> |
| <div class="spacer"></div> |
| </div> |
| <div style="height:1000px"></div> |
| </div> |
| <div style="height:1000px"></div> |
| |
| <script> |
| window.onload = async () => { |
| await waitForCompositorCommit(); |
| |
| const scroller = document.getElementById('scroller'); |
| |
| promise_test(async () => { |
| assert_equals(scroller.scrollTop, 0, "Scroller starts off unscrolled."); |
| assert_equals(window.scrollY, 0, "Window starts off unscrolled."); |
| |
| // Scroll over the document so that the page gets scrolled down. |
| { |
| const delta = 1000; |
| const location = { x: 5, y: 5 }; |
| await smoothScroll(delta, |
| location.x, |
| location.y, |
| GestureSourceType.TOUCH_INPUT, |
| 'down', |
| SPEED_INSTANT); |
| |
| // Ensure we've scrolled more than the scroller height to ensure a |
| // NonFastScrollableRect bug related to scroll would be reproducible |
| // over the entire scroller. |
| assert_greater_than(window.scrollY, 150, |
| "Document should have been scrolled."); |
| } |
| |
| // Now perform a scroll over the scroller rect. Ensure we targetted the |
| // correct scroller. |
| { |
| 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."); |
| } |
| |
| // Now mutate the scroller so that we force a recompute of its non-fast |
| // scrollable region. |
| { |
| scroller.style.height = "151px"; |
| await waitForCompositorCommit(); |
| } |
| |
| // Perform another scroll to ensure the recalculated region is still |
| // correct after the scroll. |
| { |
| const delta = 100; |
| const location = elementCenter(scroller); |
| await smoothScroll(delta, |
| location.x, |
| location.y, |
| GestureSourceType.TOUCH_INPUT, |
| 'up', |
| SPEED_INSTANT); |
| |
| assert_equals(scroller.scrollTop, 0, |
| "Scroller should be scrolled to the top."); |
| } |
| |
| }, 'Scrolling over an uncomposited scroller inside a composited position' + |
| ': fixed element.'); |
| } |
| |
| </script> |
