| <!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; |
| } |
| |
| #sticky { |
| position: sticky; |
| width: 80%; |
| height: 400px; |
| top: 5px; |
| left: 10%; |
| padding: 20px; |
| box-sizing: border-box; |
| background-color: PaleTurquoise; |
| } |
| |
| #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 style="height:300px"></div> |
| <div id="sticky"> |
| <div id="instructions"> |
| <p> |
| This turquoise box is a position: sticky 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 so the turquoise box is not quite aligned with |
| the viewport top but enough that the scroller below no longer overlaps |
| its original position. Now attempt to scroll over the black-and-white |
| scroller with wheel or touch. If box must scroll; the document must not |
| scroll. |
| </p> |
| <p> |
| Continue to scroll the document down so the turquoise box becomes fixed |
| to the viewport top. Now attempt to scroll over the black-and-white |
| scroller with wheel or touch. It should scroll as before, the document |
| must not scroll. |
| </p> |
| </div> |
| <div id="scroller"> |
| <div class="spacer"></div> |
| </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. Scroll |
| // far enough that the scroller no longer overlaps its original position, |
| // but not so far that the sticky box has become fixed. |
| { |
| const delta = scroller.clientHeight * 1.5; |
| 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, scroller.clientHeight, |
| "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 while sticky box is " + |
| "unfixed."); |
| } |
| |
| // Scroll the document down now until the sticky box becomes fixed. |
| { |
| const delta = scroller.clientHeight * 2; |
| 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, 300, |
| "Document should have been scrolled until sticky " + |
| "box is fixed."); |
| } |
| |
| // Again perform a scroll over the scroller rect. Ensure we targetted the |
| // correct scroller. |
| { |
| const delta = 1000; |
| 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 when sticky box is fixed."); |
| } |
| |
| }, 'Scrolling over an uncomposited scroller inside a composited position' + |
| ': sticky element.'); |
| } |
| |
| </script> |
