helper_zoomToFocusedInput_to_cursor.html (2218B)
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 scrolls to show the cursor in input element</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 /* 21 * This document gets scaled by 2.0x so that this `60vw` width element 22 * would be wider than the visual viewport. 23 */ 24 width: 60vw; 25 border: none; 26 padding: 0px; 27 font: 25px/1 Ahem; 28 } 29 </style> 30 <body> 31 <input id="target" type="text" maxlength="2048"/> 32 <script> 33 async function test() { 34 is(window.scrollY, 0, "The initial scroll offset should be 0"); 35 is(visualViewport.scale, 2.0, "The document should get scaled by 2.0"); 36 is(visualViewport.pageLeft, 0, "The initial visual viewport pageLeft should be 0"); 37 38 const input = document.querySelector("#target"); 39 const rect = input.getBoundingClientRect(); 40 ok(rect.width > visualViewport.width, 41 `the input element width: ${rect.width} > the visual viewport width: ${visualViewport.width}`); 42 43 // Fill up the input element with N characters so that the last character should 44 // be outside of the visual viewport. 45 const nCharacters= Math.floor(rect.width / 25) + 1; 46 input.value = "X".repeat(nCharacters); 47 // And put the cursor at the tail of the characters. 48 input.setSelectionRange(nCharacters, nCharacters); 49 50 // Focus to the input element without scrolling. 51 const focusPromise = new Promise(resolve => { 52 input.addEventListener("focus", resolve); 53 }); 54 input.focus({ preventScroll: true }); 55 await focusPromise; 56 57 // Invoke zoom-to-focused-input. 58 const utils = SpecialPowers.getDOMWindowUtils(window); 59 utils.zoomToFocusedInput(); 60 61 await promiseApzFlushedRepaints(); 62 ok(visualViewport.pageLeft > 0, 63 `The visual viewport should have been scrolled: ${visualViewport.pageLeft}`); 64 } 65 66 SpecialPowers.getDOMWindowUtils(window).setResolutionAndScaleTo(2.0); 67 waitUntilApzStable() 68 .then(test) 69 .then(subtestDone, subtestFailed); 70 </script> 71 </body> 72 </html>