helper_bug1662800.html (2461B)
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>Dragging the mouse on a scrollbar for a scrollframe inside nested transforms with a scale component</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 async function test() { 13 var scrollableDiv = document.getElementById("scrollable"); 14 let scrollPromise = new Promise(resolve => { 15 scrollableDiv.addEventListener("scroll", resolve, {once: true}); 16 }); 17 18 // Scroll down a small amount (7px). The bug in this case is that the 19 // scrollthumb "jumps" most of the way down the scroll track because with 20 // the bug, the code was incorrectly combining the transforms. 21 // Given the scrollable height of 0.7*2000px and scrollframe height of 0.7*400px, 22 // the scrollthumb should be approximately 0.7*80px = 56px tall. Dragging it 7px 23 // should scroll approximately 50 (unscaled) pixels. If the bug manifests, it will get 24 // dragged by a lot more and scroll to approximately 1300px. 25 var dragFinisher = await promiseVerticalScrollbarDrag(scrollableDiv, 7, 7, 0.7); 26 if (!dragFinisher) { 27 ok(true, "No scrollbar, can't do this test"); 28 return; 29 } 30 31 // the events above might be stuck in APZ input queue for a bit until the 32 // layer is activated, so we wait here until the scroll event listener is 33 // triggered. 34 await scrollPromise; 35 36 await dragFinisher(); 37 38 // Flush everything just to be safe 39 await promiseOnlyApzControllerFlushed(); 40 41 // Ensure the scroll position ended up roughly where we wanted it (around 42 // 50px, but definitely less than 1300px). 43 ok(scrollableDiv.scrollTop < 100, "Scrollbar drag resulted in a scroll position of " + scrollableDiv.scrollTop); 44 } 45 46 waitUntilApzStable() 47 .then(test) 48 .then(subtestDone, subtestFailed); 49 50 </script> 51 </head> 52 <body> 53 <div style="width: 500px; height: 300px; transform: translate(500px, 500px) scale(0.7)"> 54 <div id="scrollable" style="transform: translate(-600px, -600px); overflow: scroll"> 55 <div style="width: 600px; height: 400px"> 56 <div style="width: 600px; height: 2000px; background-image: linear-gradient(red,blue)"></div> 57 </div> 58 </div> 59 </div> 60 </body> 61 </html>