helper_drag_scrollbar_hittest.html (4470B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width; initial-scale=1.0"> 6 <title>Test that the scrollbar thumb remains under the cursor during scrollbar dragging</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 type="text/javascript"> 11 12 const utils = SpecialPowers.getDOMWindowUtils(window); 13 14 async function test() { 15 // This test largely attempts to replicate the STR from bug 1826947 16 // (which demonstrates the same issue as bug 1818721 but with a more 17 // reduced test case). 18 19 is(await getResolution(), 1.0, "should not be zoomed"); 20 21 // Zoom in. This is part of the bug 1826947 STR. 22 let resolution = 5.0; 23 utils.setResolutionAndScaleTo(resolution); 24 await promiseApzFlushedRepaints(); 25 26 // Scroll horizontally to the middle of the visual viewport. This was 27 // determined empirically to be needed to reproduce the bug (and also 28 // is what happens automatically if you pinch-zoom in using an actual 29 // gesture rather than setResolutionAndScaleTo()). 30 utils.scrollToVisual(document.scrollingElement.clientWidth / 2, 31 0, 32 utils.UPDATE_TYPE_MAIN_THREAD, 33 utils.SCROLL_MODE_INSTANT); 34 await promiseApzFlushedRepaints(); 35 36 // Install a scroll event listener. This is part of the usage of 37 // promiseVerticalScrollbarDrag(), we need to wait for a scroll event 38 // before awaiting dragFinisher(). 39 // In this test, since the scroll range comes from zooming in, we need 40 // to listen for a *visual viewport* scroll event. 41 let visualScrollPromise = new Promise(resolve => { 42 window.visualViewport.addEventListener("scroll", resolve, {once: true}); 43 }); 44 45 // Start the animation in the SVG document. This is needed to reproduce 46 // the bug. (See below for why we do it dynamically.) 47 document.getElementsByTagName("animateTransform")[0].setAttribute("repeatCount", "indefinite"); 48 document.getElementsByTagName("animateTransform")[0].beginElement(); 49 50 // Drag the vertical scrollbar thumb downward. 51 // Do the scroll in one increment so that when the scroll event fires 52 // we're done all the scrolling we're going to do. 53 let distance = 20; 54 let increment = distance; 55 var dragFinisher = await promiseVerticalScrollbarDrag(window, distance, increment); 56 await visualScrollPromise; 57 await dragFinisher(); 58 59 // Check that at the end of the drag, the thumb is still under the cursor. 60 // This is done using hitTest(). To compute the point to pass to hitTest(), 61 // use scrollbarDragStart() to compute the ending mouse position of the 62 // drag the way promiseVerticalScrollbarDrag() does. 63 // However, since we are passing the point to hitTest() which expects 64 // coordinates relative to the layout viewport (whereas scrollbarDragStart() 65 // returns coordinates relative to the visual viewport), we need to translate 66 // by the relative offset. 67 let dragStartPoint = await scrollbarDragStart(window, 1); 68 let hitTestPoint = {x: dragStartPoint.x, y: dragStartPoint.y + distance}; 69 const relativeOffset = getRelativeViewportOffset(window); 70 hitTestPoint.x += relativeOffset.x; 71 hitTestPoint.y += relativeOffset.y; 72 let result = hitTest(hitTestPoint); 73 ok((result.hitInfo & APZHitResultFlags.SCROLLBAR_THUMB) != 0, 74 "Thumb should be under the cursor"); 75 } 76 77 waitUntilApzStable() 78 .then(test) 79 .then(subtestDone, subtestFailed); 80 81 </script> 82 </head> 83 <body> 84 <!-- 85 This is the testcase from bug 1826947 comment 0, except that the animation's 86 repeatCount is initially set to 0, and only changed to "indefinite" dynamically 87 during the test. This is to prevent an issue where the promiseAllPaintsDone() 88 call in waitUntilApzStable() can get into an infinite loop if we schedule 89 new frames of the animation faster than we paint them. 90 --> 91 <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 100 100"> 92 <filter id="THE_FILTER" x="0" y="0" width="10" height="100"> 93 <feTurbulence id="turbulence" baseFrequency="10" numOctaves="5"/> 94 </filter> 95 <rect x="0" y="0" width="1" height="1" style="filter: url(#THE_FILTER);"> 96 <animateTransform attributeName="transform" type="rotate" from="360" to="340" dur="5s" repeatCount="0"/> 97 </rect> 98 </svg> 99 </body> 100 </html>