helper_bug1550510.html (2593B)
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 transformed, filtered scrollframe</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 (10px). The bug in this case is that the 19 // scrollthumb "jumps" most of the way down the scroll track because with 20 // WR enabled the filter and transform display items combine to generate an 21 // incorrect APZC tree, and the mouse position gets untransformed incorrectly. 22 // Given the scrollable height of 2000px and scrollframe height of 400px, 23 // the scrollthumb should be approximately 80px tall, and dragging it 10px 24 // should scroll approximately 50 pixels. If the bug manifests, it will get 25 // dragged an extra ~150px and scroll to approximately 1250px. 26 var dragFinisher = await promiseVerticalScrollbarDrag(scrollableDiv, 10, 10); 27 if (!dragFinisher) { 28 ok(true, "No scrollbar, can't do this test"); 29 return; 30 } 31 32 // the events above might be stuck in APZ input queue for a bit until the 33 // layer is activated, so we wait here until the scroll event listener is 34 // triggered. 35 await scrollPromise; 36 37 await dragFinisher(); 38 39 // Flush everything just to be safe 40 await promiseOnlyApzControllerFlushed(); 41 42 // In this case we just want to make sure the scroll position moved from 0 43 // which indicates the thumb dragging worked properly. 44 ok(scrollableDiv.scrollTop < 100, "Scrollbar drag resulted in a scroll position of " + scrollableDiv.scrollTop); 45 } 46 47 waitUntilApzStable() 48 .then(test) 49 .then(subtestDone, subtestFailed); 50 51 </script> 52 </head> 53 <body> 54 <div style="position: fixed; left: 100px; top: 100px; width: 400px; height: 600px"> 55 <div style="transform: translateY(150px); will-change: transform"> 56 <div style="filter: grayscale(80%)"> 57 <div id="scrollable" style="height: 400px; overflow-y: auto"> 58 <div style="min-height: 2000px"> 59 yay text 60 </div> 61 </div> 62 </div> 63 </div> 64 </div> 65 </body> 66 </html>