helper_bug1331693.html (2185B)
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 scrollframe inside an SVGEffects</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 var dragFinisher = await promiseVerticalScrollbarDrag(scrollableDiv); 19 if (!dragFinisher) { 20 ok(true, "No scrollbar, can't do this test"); 21 return; 22 } 23 24 // the events above might be stuck in APZ input queue for a bit until the 25 // layer is activated, so we wait here until the scroll event listener is 26 // triggered. 27 await scrollPromise; 28 29 await dragFinisher(); 30 31 // Flush everything just to be safe 32 await promiseOnlyApzControllerFlushed(); 33 34 // After dragging the scrollbar 20px on a 200px-high scrollable div, we should 35 // have scrolled approx 10% of the 2000px high content. There might have been 36 // scroll arrows and such so let's just have a minimum bound of 50px to be safe. 37 ok(scrollableDiv.scrollTop > 50, "Scrollbar drag resulted in a scroll position of " + scrollableDiv.scrollTop); 38 } 39 40 waitUntilApzStable() 41 .then(test) 42 .then(subtestDone, subtestFailed); 43 44 </script> 45 <style> 46 #svgeffects { 47 background-color: lightgreen; 48 width: 300px; 49 height: 300px; 50 clip-path: circle(200px at 100% 0); /* ensure scrollthumb is in the clip */ 51 } 52 #scrollable { 53 overflow: scroll; 54 height: 200px; 55 width: 200px; 56 } 57 #content { 58 width: 1000px; 59 height: 2000px; 60 background-image: linear-gradient(red,blue); 61 } 62 </style> 63 </head> 64 <body> 65 <div id="svgeffects">A div that generate an svg effects display item 66 <div id="scrollable"> 67 <div id="content">Some content inside the scrollframe</div> 68 </div> 69 </div> 70 </body> 71 </html>