helper_bug1490393.html (2508B)
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</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" by an additional 40 pixels (height of the "gap" div) 20 // and the scrollframe scrolls by a corresponding amount. So after doing this 21 // drag we check the scroll position to make sure it hasn't scrolled by 22 // too much. 23 // Given the scrollable height of 2000px and scrollframe height of 400px, 24 // the scrollthumb should be approximately 80px tall, and dragging it 10px 25 // should scroll approximately 50 pixels. If the bug manifests, it will get 26 // dragged 50px and scroll approximately 250px. 27 var dragFinisher = await promiseVerticalScrollbarDrag(scrollableDiv, 10, 10); 28 if (!dragFinisher) { 29 ok(true, "No scrollbar, can't do this test"); 30 return; 31 } 32 33 // the events above might be stuck in APZ input queue for a bit until the 34 // layer is activated, so we wait here until the scroll event listener is 35 // triggered. 36 await scrollPromise; 37 38 await dragFinisher(); 39 40 // Flush everything just to be safe 41 await promiseOnlyApzControllerFlushed(); 42 43 // In this case we just want to make sure the scroll position moved from 0 44 // which indicates the thumb dragging worked properly. 45 ok(scrollableDiv.scrollTop < 100, "Scrollbar drag resulted in a scroll position of " + scrollableDiv.scrollTop); 46 } 47 48 waitUntilApzStable() 49 .then(test) 50 .then(subtestDone, subtestFailed); 51 52 </script> 53 </head> 54 <body> 55 <div id="gap" style="min-height: 40px"></div> 56 <div style="height: 400px; transform: translateZ(0)"> 57 <div style="height: 100%; opacity: 0.9; will-change: opacity"> 58 <div id="scrollable" style="height: 100%; overflow-y: auto; transform: translateZ(0)"> 59 <div style="min-height: 2000px">Yay text</div> 60 </div> 61 </div> 62 </div> 63 </body> 64 </html>