helper_scrollIntoView_bug2002407.html (2653B)
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 moving the caret scrolls the content editable box even if the box is not scrollable</title> 7 <script src="apz_test_utils.js"></script> 8 <script src="/tests/SimpleTest/EventUtils.js"></script> 9 <script src="/tests/SimpleTest/paint_listener.js"></script> 10 </head> 11 <style> 12 @font-face { 13 font-family: Ahem; 14 src: url("/tests/layout/base/tests/Ahem.ttf"); 15 } 16 17 body { 18 margin: 0px; 19 padding: 0px; 20 } 21 #target { 22 width: 100%; 23 font: 14px/1 Ahem; 24 } 25 </style> 26 <body> 27 <div style="height: 80vh;"></div> 28 <div id="target" contenteditable>1234567890</div> 29 <script> 30 async function test() { 31 const utils = SpecialPowers.getDOMWindowUtils(window); 32 33 is(window.scrollY, 0, "The initial scroll offset should be 0"); 34 is(visualViewport.scale, 2.0, "The document should get scaled by 2.0"); 35 is(visualViewport.pageTop, 0, "The initial visual viewport pageTop should be 0"); 36 37 const target = document.querySelector("#target"); 38 39 // Focus to the contenteditable element without scrolling. 40 const focusPromise = new Promise(resolve => { 41 target.addEventListener("focus", resolve, { once: true }); 42 }); 43 target.focus({ preventScroll: true }); 44 await focusPromise; 45 46 let visualScrollPromise = new Promise(resolve => { 47 visualViewport.addEventListener("scroll", resolve, { once: true }); 48 }); 49 target.scrollIntoView({ block: "nearest" }); 50 await visualScrollPromise; 51 ok(visualViewport.offsetTop > 0, 52 `visualViewport.offsetTop: ${visualViewport.offsetTop} should be greater than 0`); 53 const offsetTop = visualViewport.offsetTop; 54 55 // Visualy scroll back to (0, 0). 56 // Now the contentediable element is out of view. 57 utils.scrollToVisual(0, 0, 58 utils.UPDATE_TYPE_MAIN_THREAD, 59 utils.SCROLL_MODE_INSTANT); 60 await promiseApzFlushedRepaints(); 61 is(visualViewport.offsetTop, 0); 62 63 visualScrollPromise = new Promise(resolve => { 64 visualViewport.addEventListener("scroll", resolve, { once: true }); 65 }); 66 const selection = window.getSelection(); 67 selection.collapse(target.firstChild, 1); 68 // Now move the caret and then see whether the contenteditable element 69 // scrolled into the visual viewport. 70 synthesizeKey("KEY_ArrowLeft"); 71 await visualScrollPromise; 72 73 isfuzzy(visualViewport.offsetTop, offsetTop, 1.0, 74 "The content editable box should be inside the visual viewport"); 75 } 76 77 SpecialPowers.getDOMWindowUtils(window).setResolutionAndScaleTo(2.0); 78 waitUntilApzStable() 79 .then(test) 80 .then(subtestDone, subtestFailed); 81 </script> 82 </body> 83 </html>