helper_doubletap_zoom_tallwide.html (2580B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=2100"/> 6 <title>Check that double tapping on a tall element that is >90% width of viewport doesn't scroll to the top of it when scrolled down</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 var resolution = await getResolution(); 16 ok(resolution > 0, 17 "The initial_resolution is " + resolution + ", which is some sane value"); 18 19 // Check that double-tapping once on a small element zooms in 20 await doubleTapOn(document.getElementById("target2"), 10, 10, useTouchpad); 21 let prev_resolution = resolution; 22 resolution = await getResolution(); 23 ok(resolution > prev_resolution, "The first double-tap has increased the resolution to " + resolution); 24 25 // instant scroll to the bottom of the page 26 window.scrollTo({ 27 top: 40000, 28 left: 0, 29 behavior: 'auto' 30 }); 31 32 await promiseApzFlushedRepaints(); 33 34 let scrollPos = window.scrollY; 35 ok(scrollPos > 1500, "window scrolled down (1)"); 36 ok(scrollPos > window.innerHeight * 2, "window scrolled down (2)") 37 38 info("window.scrollY " + window.scrollY); 39 info("window.innerHeight " + window.innerHeight); 40 info("visualViewport.pageTop " + visualViewport.pageTop); 41 42 let target = document.getElementById("target"); 43 44 let x = 20; 45 let y = visualViewport.pageTop + 20; 46 47 // Check that double-tapping on the big element zooms out 48 await doubleTapOn(target, x, y, useTouchpad); 49 prev_resolution = resolution; 50 resolution = await getResolution(); 51 ok(resolution < prev_resolution, "The second double-tap has decreased the resolution to " + resolution); 52 53 info("scrollPos " + scrollPos); 54 info("window.scrollY " + window.scrollY); 55 ok(window.scrollY > 1500, "window is still scrolled down (1)"); 56 ok(window.scrollY >= scrollPos - window.innerHeight, "window is still scrolled down (2)"); 57 } 58 59 waitUntilApzStable() 60 .then(test) 61 .then(subtestDone, subtestFailed); 62 63 </script> 64 <style> 65 .container { 66 background-color: #eee; 67 width: 95vw; 68 height: 400vh; 69 } 70 .smallcontainer { 71 background-color: #aaa; 72 width: 40px; 73 height: 40px; 74 } 75 </style> 76 </head> 77 <body> 78 79 <div id="target" class="container"> 80 <div id="target2" class="smallcontainer"> 81 </div> 82 </div> 83 84 </body> 85 </html>