helper_scroll_into_view_bug1516056.html (2420B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>Test for bug 1516056: "scroll into view" respects bounds on layout scroll position</title> 7 <script type="application/javascript" src="apz_test_utils.js"></script> 8 <script src="/tests/SimpleTest/paint_listener.js"></script> 9 <style> 10 #target { 11 width: 100px; 12 height: 100px; 13 margin-left: 50%; 14 margin-right: 50%; 15 background: cyan; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="target"></div> 21 <script> 22 let vv = window.visualViewport; 23 function getVisualScrollRange() { 24 let rootScroller = document.scrollingElement; 25 return { 26 width: rootScroller.scrollWidth - vv.width, 27 height: rootScroller.scrollHeight - vv.height, 28 }; 29 } 30 async function test() { 31 is(window.scrollMaxX, 0, "page should have a zero horizontal layout scroll range"); 32 is(window.scrollMaxY, 0, "page should have a zero vertical layout scroll range"); 33 let visualScrollRange = getVisualScrollRange(); 34 ok(visualScrollRange.width > 0, "page should have a nonzero horizontal visual scroll range"); 35 ok(visualScrollRange.height > 0, "page should have a nonzero vertical visual scroll range"); 36 let target = document.getElementById("target"); 37 38 // Scroll target element into view. Wait until any visual scrolling is done before doing checks. 39 let scrollPromise = new Promise(resolve => { 40 vv.addEventListener("scroll", resolve, { once: true }); 41 }); 42 target.scrollIntoView(); 43 await scrollPromise; // wait for visual viewport "scroll" event 44 await promiseApzFlushedRepaints(); 45 46 // Test that scrollIntoView() respected the layout scroll range. 47 is(window.scrollX, 0, "page should not layout-scroll with a zero layout scroll range"); 48 is(window.scrollY, 0, "page should not layout-scroll with a zero layout scroll range"); 49 50 // Test that scrollIntoView() did perform visual scrolling. 51 let vvRect = getVisualViewportRect(vv); 52 let targetBounds = target.getBoundingClientRect(); 53 assertRectContainment(vvRect, "visual viewport", targetBounds, "target element bounding rect"); 54 } 55 SpecialPowers.getDOMWindowUtils(window).setResolutionAndScaleTo(2.0); 56 57 waitUntilApzStable() 58 .then(test) 59 .then(subtestDone, subtestFailed); 60 </script> 61 </body> 62 </html>