helper_doubletap_zoom_hscrollable2.html (3599B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=2100"/> 6 <title>Check that tall element wider than the viewport after zooming in doesn't scroll up</title> 7 <script type="application/javascript" src="apz_test_native_event_utils.js"></script> 8 <script type="application/javascript" src="apz_test_utils.js"></script> 9 <script src="/tests/SimpleTest/paint_listener.js"></script> 10 <script type="application/javascript"> 11 12 async function test() { 13 let useTouchpad = (location.search == "?touchpad"); 14 15 let resolution = await getResolution(); 16 ok(resolution > 0, 17 "The initial_resolution is " + resolution + ", which is some sane value"); 18 19 // instant scroll down so the rect is roughly halfway down 20 const scrollDistance = document.documentElement.clientHeight * 3.5; 21 window.scrollTo({ 22 top: scrollDistance, 23 left: 0, 24 behavior: 'auto' 25 }); 26 27 await promiseApzFlushedRepaints(); 28 29 let scrollPos = window.scrollY; 30 ok(scrollPos > scrollDistance - 50, "window scrolled down"); 31 32 info("window.scrollY " + window.scrollY); 33 34 info("scrollDistance " + scrollDistance); 35 36 info("document.documentElement.scrollHeight " + document.documentElement.scrollHeight); 37 38 let target = document.getElementById("target"); 39 40 // Check that first double tap does not scroll up 41 info("sending first double tap"); 42 await doubleTapOn(target, 15, 15, useTouchpad); 43 let prev_resolution = resolution; 44 resolution = await getResolution(); 45 ok(resolution > prev_resolution, "After double-tap the resolution increased to " + resolution); 46 47 // These values were determined experimentally, have not investigated the 48 // reason for the difference between platforms or the large tolerance needed. 49 let tolerance = 2; 50 if (getPlatform() == "mac") { 51 tolerance = 24; 52 } 53 54 ok(window.scrollY > scrollDistance - tolerance, "window is still scrolled down"); 55 ok(Math.abs(window.scrollY - scrollPos) < tolerance, "window didnt scroll: " + Math.abs(window.scrollY - scrollPos)); 56 info("window.scrollY " + window.scrollY); 57 58 // Check that second double tap does not scroll up 59 // Intentionally miss the target and hit the large spacer div, which 60 // should cause us to zoom out, but not scroll up (too much). 61 info("sending second double tap"); 62 await doubleTapOn(target, -10, 15, useTouchpad); 63 prev_resolution = resolution; 64 resolution = await getResolution(); 65 ok(resolution < prev_resolution, "After double-tap the resolution decreased to " + resolution); 66 67 // These values were determined experimentally, have not investigated the 68 // reason for the difference between platforms or the large tolerance needed. 69 let amountToExpectScrollUp = 0; 70 if (getPlatform() == "android") { 71 amountToExpectScrollUp = 767; 72 tolerance = 4.6; 73 } 74 scrollPos -= amountToExpectScrollUp; 75 76 ok(window.scrollY > scrollDistance - tolerance - amountToExpectScrollUp, "window is still scrolled down"); 77 ok(Math.abs(window.scrollY - scrollPos) < tolerance, "window didnt scroll: " + Math.abs(window.scrollY - scrollPos)); 78 info("window.scrollY " + window.scrollY); 79 } 80 81 waitUntilApzStable() 82 .then(test) 83 .then(subtestDone, subtestFailed); 84 85 </script> 86 <style> 87 html { 88 scrollbar-width: none; 89 } 90 .spacer { 91 background-color: #eee; 92 height: 800vh; 93 width: 1600vw; 94 } 95 .rect { 96 position: absolute; 97 width: 30px; 98 height: 30px; 99 background-color: #aaa; 100 top: 400vh; 101 right: 0; 102 } 103 </style> 104 </head> 105 <body> 106 <div id="target" class="rect"> 107 </div> 108 109 <div class="spacer"> 110 </div> 111 112 </body> 113 </html>