helper_zoomToFocusedInput_multiline.html (3700B)
1 <!DOCTYPE> 2 <html> 3 <head> 4 <title>Checking zoomToFocusedInput scrolls that focused non-input element is visible position</title> 5 <script type="application/javascript" src="apz_test_utils.js"></script> 6 <script type="application/javascript" src="apz_test_native_event_utils.js"></script> 7 <script src="/tests/SimpleTest/paint_listener.js"></script> 8 </head> 9 <body> 10 <div style="height: 8000px;">ABC</div> 11 <div id="content"> 12 </div> 13 <!-- Leave additional room below the element so it can be scrolled to the center --> 14 <div style="height: 1000px;">ABC</div> 15 <script type="application/javascript"> 16 async function test() { 17 let utils = SpecialPowers.getDOMWindowUtils(window); 18 19 // contenteditable 20 let div = document.createElement("div"); 21 div.setAttribute("contenteditable", "true"); 22 for (let i = 0; i < 200; i++) { 23 div.innerHTML += "foo<br>"; 24 } 25 div.innerHTML += "<span id=last>bar</span>"; 26 document.getElementById("content").appendChild(div); 27 28 let selection = window.getSelection(); 29 selection.collapse(div.firstChild, 0); 30 window.scrollTo(0, 0); 31 await waitToClearOutAnyPotentialScrolls(window); 32 is(0, window.scrollY, "scroll position is reset"); 33 let scrollendPromise = promiseScrollend(); 34 utils.zoomToFocusedInput(); 35 await scrollendPromise; 36 await promiseApzFlushedRepaints(); 37 ok(window.scrollY > 0, "scroll position isn't top"); 38 39 let prevY = window.scrollY; 40 41 selection.collapse(document.getElementById("last").firstChild, 0); 42 window.scrollTo(0, 0); 43 await waitToClearOutAnyPotentialScrolls(window); 44 is(0, window.scrollY, "scroll position is reset"); 45 scrollendPromise = promiseScrollend(); 46 utils.zoomToFocusedInput(); 47 await scrollendPromise; 48 await promiseApzFlushedRepaints(); 49 ok(prevY < window.scrollY, "scroll position is visibile position of caret"); 50 51 document.getElementById("content").removeChild(div); 52 53 // Create a scrollable and overflowed in the viewport <textarea> element 54 let textarea = document.createElement("textarea"); 55 textarea.style.overflow = "scroll"; 56 textarea.style.height = "150vh"; 57 // The textarea row is 200 so that "150vh / 100" is a reasonable font-size 58 // to overflow the area. 59 textarea.style.fontSize = "calc(150vh / 100)"; 60 textarea.rows = 200; 61 for (let i = 0; i < 200; i++) { 62 textarea.value += "foo\n"; 63 } 64 document.getElementById("content").appendChild(textarea); 65 textarea.focus(); 66 67 await waitToClearOutAnyPotentialScrolls(window); 68 69 textarea.setSelectionRange(0, 0); 70 window.scrollTo(0, 0); 71 await waitToClearOutAnyPotentialScrolls(window); 72 is(0, window.scrollY, "scroll position is reset"); 73 scrollendPromise = promiseScrollend(); 74 utils.zoomToFocusedInput(); 75 await scrollendPromise; 76 await promiseApzFlushedRepaints(); 77 ok(window.scrollY > 0, "scroll position isn't top"); 78 prevY = window.scrollY; 79 80 textarea.setSelectionRange(textarea.value.length, textarea.value.length); 81 window.scrollTo(0, 0); 82 await waitToClearOutAnyPotentialScrolls(window); 83 is(0, window.scrollY, "scroll position is reset"); 84 const scrollTopInTextArea = textarea.scrollTop; 85 const scrollLeftInTextArea = textarea.scrollLeft; 86 scrollendPromise = promiseScrollend(); 87 utils.zoomToFocusedInput(); 88 await scrollendPromise; 89 await promiseApzFlushedRepaints(); 90 ok(prevY < window.scrollY, "scroll position is visibile position of caret"); 91 isfuzzy(textarea.scrollTop, scrollTopInTextArea, 2, 92 "textarea's scrollTop is unchanged"); 93 isfuzzy(textarea.scrollLeft, scrollLeftInTextArea, 2, 94 "textarea's scrollLeft is unchanged"); 95 96 document.getElementById("content").removeChild(textarea); 97 } 98 99 waitUntilApzStable().then(test).then(subtestDone, subtestFailed); 100 </script> 101 </body> 102 </html>