helper_click_interrupt_animation.html (3726B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>Clicking on the content (not scrollbar) should interrupt animations</title> 7 <script type="application/javascript" src="apz_test_native_event_utils.js"></script> 8 <script type="application/javascript" src="apz_test_utils.js"></script> 9 <script src="/tests/SimpleTest/paint_listener.js"></script> 10 <script src="/tests/SimpleTest/EventUtils.js"></script> 11 12 <script type="application/javascript"> 13 14 async function test() { 15 var scroller = document.documentElement; 16 var verticalScrollbarWidth = window.innerWidth - scroller.clientWidth; 17 18 if (verticalScrollbarWidth == 0) { 19 ok(true, "Scrollbar width is zero on this platform, test is useless here"); 20 return; 21 } 22 23 // The anchor is the fixed-pos div that we use to calculate coordinates to 24 // click on the scrollbar. That way we don't have to recompute coordinates 25 // as the page scrolls. The anchor is at the bottom-right corner of the 26 // content area. 27 var anchor = document.getElementById('anchor'); 28 29 var xoffset = (verticalScrollbarWidth / 2); 30 // Get a y-coord near the bottom of the vertical scrollbar track. Assume the 31 // vertical thumb is near the top of the scrollback track (since scroll 32 // position starts off at zero) and won't get in the way. Also assume the 33 // down arrow button, if there is one, is square. 34 var yoffset = 0 - verticalScrollbarWidth - 5; 35 36 // Take control of the refresh driver 37 let utils = SpecialPowers.getDOMWindowUtils(window); 38 utils.advanceTimeAndRefresh(0); 39 40 // Waiting for stability before starting the test 41 for (let i = 0; i < 5; i++) { 42 utils.advanceTimeAndRefresh(16); 43 } 44 45 // Click at the bottom of the scrollbar track to trigger a page-down kind of 46 // scroll. This should use "desktop zooming" scrollbar code which should 47 // trigger an APZ scroll animation. 48 await promiseNativeMouseEventWithAPZAndWaitForEvent({ 49 type: "click", 50 target: anchor, 51 offsetX: xoffset, 52 offsetY: yoffset, 53 eventTypeToWait: "mouseup" 54 }); 55 56 // Run a few frames, that should be enough to let the scroll animation 57 // start. We check to make sure the scroll position has changed. 58 for (let i = 0; i < 5; i++) { 59 utils.advanceTimeAndRefresh(16); 60 } 61 await promiseOnlyApzControllerFlushed(); 62 63 let curPos = scroller.scrollTop; 64 ok(curPos > 0, 65 `Scroll offset has moved down some, to ${curPos}`); 66 67 // Now we click on the content, which should cancel the animation. Run 68 // everything to reach a stable state. 69 await promiseNativeMouseEventWithAPZAndWaitForEvent({ 70 type: "click", 71 target: anchor, 72 offsetX: -5, 73 offsetY: -5, 74 }); 75 for (let i = 0; i < 1000; i++) { 76 utils.advanceTimeAndRefresh(16); 77 } 78 await promiseOnlyApzControllerFlushed(); 79 80 // Ensure the scroll position hasn't changed since the last time we checked, 81 // which indicates the animation got interrupted. 82 is(scroller.scrollTop, curPos, `Scroll position hasn't changed again`); 83 84 utils.restoreNormalRefresh(); 85 } 86 87 waitUntilApzStable() 88 .then(test) 89 .then(subtestDone, subtestFailed); 90 91 </script> 92 </head> 93 <body> 94 <div style="position:fixed; bottom: 0; right: 0; width: 1px; height: 1px" id="anchor"></div> 95 <div style="height: 300vh; margin-bottom: 10000px; background-image: linear-gradient(red,blue)"></div> 96 The above div is sized to 3x screen height so the linear gradient is more steep in terms of 97 color/pixel. We only scroll a few pages worth so we don't need the gradient all the way down. 98 And then we use a bottom-margin to make the page really big so the scrollthumb is 99 relatively small, giving us lots of space to click on the scrolltrack. 100 </body> 101 </html>