helper_scrollIntoView_block_center.html (1633B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <title>Tests that Element.scrollIntoView respects block option for visual scroll</title> 7 <script src="apz_test_native_event_utils.js"></script> 8 <script src="apz_test_utils.js"></script> 9 <script src="/tests/SimpleTest/paint_listener.js"></script> 10 </head> 11 <style> 12 body { 13 margin: 0px; 14 padding: 0px; 15 } 16 #target { 17 position: fixed; 18 width: 100%; 19 height: 10px; 20 top: 50%; 21 bottom: 50%; 22 background-color: green; 23 } 24 </style> 25 <body> 26 <div id="target"></div> 27 <script> 28 async function test() { 29 is(window.scrollY, 0, "The initial scroll offset should be 0"); 30 is(visualViewport.scale, 2.0, "The document should get scaled by 2.0"); 31 is(visualViewport.pageTop, 0, "The initial visual viewport pageTop should be 0"); 32 33 const target = document.querySelector("#target"); 34 const targetRect = target.getBoundingClientRect(); 35 36 const scrollPromise = 37 new Promise(resolve => visualViewport.addEventListener("scroll", resolve)); 38 target.scrollIntoView({ block: "center" }); 39 await scrollPromise; 40 41 await promiseApzFlushedRepaints(); 42 43 // Calculate the expected position. 44 const centerOfTarget = targetRect.y + targetRect.height * 0.5; 45 const expected = centerOfTarget - visualViewport.height * 0.5; 46 47 isfuzzy(visualViewport.offsetTop, expected, 1.0, 48 "The position:fixed element is aligned at the center of visual viewport"); 49 } 50 51 SpecialPowers.getDOMWindowUtils(window).setResolutionAndScaleTo(2.0); 52 waitUntilApzStable() 53 .then(test) 54 .then(subtestDone, subtestFailed); 55 </script> 56 </body> 57 </html>