helper_zoomToFocusedInput_for_position_fixed.html (2185B)
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 zoomToFocuedInput doesn't align position:fixed elements at the center of the visual viewport</title> 7 <script src="apz_test_utils.js"></script> 8 <script src="/tests/SimpleTest/paint_listener.js"></script> 9 </head> 10 <style> 11 @font-face { 12 font-family: Ahem; 13 src: url("/tests/layout/base/tests/Ahem.ttf"); 14 } 15 body { 16 margin: 0px; 17 padding: 0px; 18 } 19 input { 20 width: 100%; 21 height: 40px; 22 border: none; 23 padding: 0px; 24 position: fixed; 25 bottom: 0px; 26 /* 27 * Use the same size of the element height to easily calculate expected 28 position since zoom-to-focused-input tries to align the caret position 29 rather than the input element. 30 */ 31 font: 40px/1 Ahem; 32 } 33 </style> 34 <body> 35 <div style="width: 100vw; height: 100vh; background: blue;"></div> 36 <input id="target" type="text"/> 37 <div style="width: 100vw; height: 200vh; background: green;"></div> 38 <script> 39 async function test() { 40 is(window.scrollY, 0, "The initial scroll offset should be 0"); 41 is(visualViewport.scale, 2.0, "The document should get scaled by 2.0"); 42 is(visualViewport.pageLeft, 0, "The initial visual viewport pageLeft should be 0"); 43 44 const input = document.querySelector("#target"); 45 const inputRect = input.getBoundingClientRect(); 46 47 // Focus to the input element without scrolling. 48 const focusPromise = new Promise(resolve => { 49 input.addEventListener("focus", resolve); 50 }); 51 input.focus({ preventScroll: true }); 52 await focusPromise; 53 54 // Invoke zoom-to-focused-input. 55 const utils = SpecialPowers.getDOMWindowUtils(window); 56 utils.zoomToFocusedInput(); 57 58 await promiseApzFlushedRepaints(); 59 60 // Calculate the expected position. 61 const centerOfTarget = inputRect.y + inputRect.height; 62 const expected = centerOfTarget - visualViewport.height; 63 64 isfuzzy(visualViewport.pageTop, expected, 1.0, 65 "The input element is aligned at the bottom of the visual viewport"); 66 } 67 68 SpecialPowers.getDOMWindowUtils(window).setResolutionAndScaleTo(2.0); 69 waitUntilApzStable() 70 .then(test) 71 .then(subtestDone, subtestFailed); 72 </script> 73 </body> 74 </html>