smooth-scrollIntoView-with-unrelated-gesture-scroll.html (2667B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSSOM View - Unrelated scroll gesture while scrollIntoView is ongoing</title> 5 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="/dom/events/scrolling/scroll_support.js"></script> 12 </head> 13 <body> 14 <style> 15 .scroller { 16 overflow-y: scroll; 17 height: 200px; 18 width: 200px; 19 background-color: teal; 20 border: solid 1px black; 21 position: relative; 22 display: inline-block; 23 } 24 .space { 25 height: 200vh; 26 width: 200vw; 27 } 28 .box { 29 height: 50px; 30 width: 50px; 31 background-color: purple; 32 } 33 .target { 34 position: absolute; 35 top: 150%; 36 } 37 </style> 38 <div id="programmatic_scroller" class="scroller"> 39 <div class="space"></div> 40 <div class="box target" id="target"></div> 41 </div> 42 <div id="gesture_scroller" class="scroller"> 43 <div class="space"></div> 44 </div> 45 <script> 46 const programmatic_scroller = 47 document.getElementById("programmatic_scroller"); 48 const gesture_scroller = document.getElementById("gesture_scroller"); 49 const target = document.getElementById("target"); 50 51 promise_test(async (t) => { 52 await waitForCompositorCommit(); 53 54 const scrollend_promises = [ 55 waitForScrollEndFallbackToDelayWithoutScrollEvent(programmatic_scroller), 56 waitForScrollEndFallbackToDelayWithoutScrollEvent(gesture_scroller) 57 ] 58 // As soon as we observe a scroll event, begin a gesture scroll on the 59 // second scroll container. 60 programmatic_scroller.addEventListener("scroll", async () => { 61 await new test_driver.Actions().scroll(0, 0, 0, 100, 62 { origin: gesture_scroller }) 63 .send(); 64 }, { once: true }); 65 66 target.scrollIntoView({ behavior: "smooth" }); 67 68 await Promise.all(scrollend_promises); 69 70 assert_equals(gesture_scroller.scrollTop, 100, 71 "gesture scroll completed"); 72 assert_approx_equals(programmatic_scroller.scrollTop, target.offsetTop, 73 1, "scrollIntoView completed"); 74 }, "scrollIntoView is not interrupted by unrelated gesture scroll"); 75 </script> 76 </body> 77 </html>