helper_scrollby_zoomed_bug1965670.html (2117B)
1 <!DOCTYPE HTML> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width; initial-scale=1.0"> 7 <title>Test that scrollBy() works correctly when zoomed in</title> 8 <script type="application/javascript" src="apz_test_native_event_utils.js"></script> 9 <script type="application/javascript" src="apz_test_utils.js"></script> 10 <script src="/tests/SimpleTest/paint_listener.js"></script> 11 <script type="application/javascript"> 12 13 let utils = SpecialPowers.getDOMWindowUtils(window); 14 15 async function test() { 16 // Scroll the visual viewport within the layout viewport. 17 utils.scrollToVisual(0, 100, utils.UPDATE_TYPE_MAIN_THREAD, 18 utils.SCROLL_MODE_INSTANT); 19 await promiseApzFlushedRepaints(); 20 21 is(window.scrollX, 0, "Layout viewport should be at (0, 0)"); 22 is(window.scrollY, 0, "Layout viewport should be at (0, 0)"); 23 is(visualViewport.pageLeft, 0, "Visual viewport should be at (0, 100)"); 24 is(visualViewport.pageTop, 100, "Visual viewport should be at (0, 100)"); 25 26 // Do a smooth scrollBy() in this state and wait for it 27 // to complete. 28 let scrollendPromise = promiseScrollend(); 29 window.scrollBy({ top: 40, left: 0, behavior: 'smooth' }); 30 await scrollendPromise; 31 32 // Check that it's the layout viewport that scrolled. 33 // The relative offset between the layout and visual viewports 34 // should be preserved. 35 is(window.scrollX, 0, "Layout viewport should be at (0, 0)"); 36 is(window.scrollY, 40, "Layout viewport should be at (0, 40)"); 37 is(visualViewport.pageLeft, 0, "Visual viewport should be at (0, 100)"); 38 is(visualViewport.pageTop, 140, "Visual viewport should be at (0, 140)"); 39 } 40 41 // Zoom in to create room to scroll the visual viewport within the 42 // layout viewport. 43 utils.setResolutionAndScaleTo(2.0); 44 45 waitUntilApzStable() 46 .then(test) 47 .then(subtestDone, subtestFailed); 48 49 </script> 50 <style> 51 body { 52 height: 500vh; 53 background: linear-gradient(red, black); 54 } 55 </style> 56 </head> 57 58 <body> 59 </body> 60 61 </html>