helper_drag_bug1719913.html (2648B)
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>Test for bug 1719913</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 subframe = document.getElementById("scroller"); 14 let scrollPromise = new Promise(resolve => { 15 subframe.addEventListener("scroll", resolve, {once: true}); 16 }); 17 18 // Scroll down a small amount (5px). The bug in this case is that the 19 // scrollthumb "jumps" further down the scroll track because with the bug, 20 // incorrect location of a transform in the WebRender scroll nodes results 21 // in a miscalculation of the scroll position corresponding to a mouse event 22 // position during dragging. 23 var dragFinisher = await promiseVerticalScrollbarDrag(subframe, 5, 5); 24 if (!dragFinisher) { 25 ok(true, "No scrollbar, can't do this test"); 26 return; 27 } 28 29 // the events above might be stuck in APZ input queue for a bit until the 30 // layer is activated, so we wait here until the scroll event listener is 31 // triggered. 32 await scrollPromise; 33 34 await dragFinisher(); 35 36 // Flush everything just to be safe 37 await promiseOnlyApzControllerFlushed(); 38 39 // The expected scroll position from the 5px of dragging, based on local 40 // testing, is 49px. With the bug, it's 1038px. We check that it's < 100 41 // which should rule out the bug while allowing for minor variations in 42 // scrollbar sizing etc. 43 ok(subframe.scrollTop < 100, "Scrollbar drag resulted in a scroll position of " + subframe.scrollTop); 44 } 45 46 waitUntilApzStable() 47 .then(test) 48 .then(subtestDone, subtestFailed); 49 50 </script> 51 <style> 52 .columns { 53 position: absolute; 54 top: 0; 55 right: 0; 56 bottom: 0; 57 left: 0; 58 overflow: auto; 59 } 60 .column { 61 position: relative; 62 width: 50%; 63 height: 500px; 64 } 65 .header { 66 height: 100px; 67 } 68 .scroller { 69 overflow: auto; 70 will-change: transform; 71 height: 100%; 72 } 73 .content { 74 height: 5000px; 75 width: 100%; 76 background: linear-gradient(green, blue); 77 } 78 </style> 79 </head> 80 <body> 81 <div class="columns"> 82 <div class="column"> 83 <div class="header"></div> 84 <div class="scroller" id="scroller"> 85 <div class="content"></div> 86 </div> 87 </div> 88 <div class="column"></div> 89 </div> 90 </body> 91 </html>