helper_bug1462961.html (2208B)
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 transformed scrollframe inside a fixed-pos element</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 remains a little "above" where it's supposed to be, so if the 20 // bug manifests here, then the thumb will remain at the top of the track 21 // and the scroll position will remain at 0. 22 var dragFinisher = await promiseVerticalScrollbarDrag(scrollableDiv, 10, 10); 23 if (!dragFinisher) { 24 ok(true, "No scrollbar, can't do this test"); 25 return; 26 } 27 28 // the events above might be stuck in APZ input queue for a bit until the 29 // layer is activated, so we wait here until the scroll event listener is 30 // triggered. 31 await scrollPromise; 32 33 await dragFinisher(); 34 35 // Flush everything just to be safe 36 await promiseOnlyApzControllerFlushed(); 37 38 // In this case we just want to make sure the scroll position moved from 0 39 // which indicates the thumb dragging worked properly. 40 ok(scrollableDiv.scrollTop > 0, "Scrollbar drag resulted in a scroll position of " + scrollableDiv.scrollTop); 41 } 42 43 waitUntilApzStable() 44 .then(test) 45 .then(subtestDone, subtestFailed); 46 47 </script> 48 <style> 49 #fixed { 50 position: fixed; 51 left: 0; 52 top: 0; 53 width: 300px; 54 height: 100%; 55 } 56 #scrollable { 57 transform: translateY(100px); 58 overflow: scroll; 59 height: 100%; 60 } 61 #content { 62 height: 5000px; 63 background-image: linear-gradient(red,blue); 64 } 65 </style> 66 </head> 67 <body> 68 <div id="fixed"> 69 <div id="scrollable"> 70 <div id="content"></div> 71 </div> 72 </div> 73 </body> 74 </html>