helper_visualscroll_clamp_restore.html (2335B)
1 <!DOCTYPE HTML> 2 <meta charset="utf-8"> 3 <meta name="viewport" content="width=device-width, minimum-scale=1.0"> 4 <title>Tests scroll position is properly synchronized when visual position is temporarily clamped on the main thread</title> 5 <script src="apz_test_utils.js"></script> 6 <script src="/tests/SimpleTest/paint_listener.js"></script> 7 <style> 8 .hoverthingy, button { 9 width: 100%; 10 height: 200px; 11 text-align: center; 12 border: solid 1px black; 13 background-color: white; 14 } 15 16 .hoverthingy:hover { 17 background-color: lightgray; 18 } 19 </style> 20 <div id="filler" style="height: 5000px">This test runs automatically in automation. To run manually, follow the steps: 1. scroll all the way down</div> 21 <div class="hoverthingy">3. move the mouse. this div should have a hover effect exactly when the mouse is on top of it</div> 22 <button onclick="clampRestore()">2. click this button</div> 23 <script> 24 /* eslint-disable no-unused-vars */ 25 function clampRestore() { 26 // Shorten doc to clamp scroll position 27 let filler = document.getElementById('filler'); 28 filler.style.height = '4800px'; 29 // Force scroll position update 30 let scrollPos = document.scrollingElement.scrollTop; 31 // Restore height 32 filler.style.height = '5000px'; 33 } 34 35 function getAsyncScrollOffset() { 36 let apzcTree = getLastApzcTree(); 37 let rcd = findRcdNode(apzcTree); 38 if (rcd == null) { 39 return {x: -1, y: -1}; 40 } 41 return parsePoint(rcd.asyncScrollOffset); 42 } 43 44 async function test() { 45 document.scrollingElement.scrollTop = document.scrollingElement.scrollTopMax; 46 await promiseApzFlushedRepaints(); 47 clampRestore(); 48 await promiseApzFlushedRepaints(); 49 let apzScrollOffset = getAsyncScrollOffset(); 50 dump(`Got apzScrollOffset ${JSON.stringify(apzScrollOffset)}\n`); 51 // The bug this test is exercising resulted in a situation where the 52 // main-thread scroll offset and the APZ scroll offset remained out of sync 53 // while in the steady state. This resulted mouse hover effects and clicks 54 // being offset from where the user visually saw the content/mouse. We 55 // check to make sure the scroll offset is in sync to ensure the bug is fixed. 56 is(apzScrollOffset.y, document.scrollingElement.scrollTop, 57 "RCD y-scroll should match between APZ and main thread"); 58 } 59 60 waitUntilApzStable() 61 .then(test) 62 .then(subtestDone, subtestFailed); 63 </script>