helper_doubletap_zoom_fixedpos.html (2300B)
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 active scrollable elements in fixed pos work</title> 7 <script src="apz_test_native_event_utils.js"></script> 8 <script src="apz_test_utils.js"></script> 9 <script src="/tests/SimpleTest/paint_listener.js"></script> 10 <script> 11 12 async function makeActive(x, y, targetId) { 13 let theTarget = document.getElementById(targetId); 14 await promiseNativeMouseEventWithAPZAndWaitForEvent({ 15 type: "click", 16 target: theTarget, 17 offsetX: x, 18 offsetY: y, 19 }); 20 21 await promiseApzFlushedRepaints(); 22 23 ok(isLayerized(targetId), "target should be layerized at this point"); 24 let utils = SpecialPowers.getDOMWindowUtils(window); 25 let targetScrollId = utils.getViewId(theTarget); 26 ok(targetScrollId > 0, "target should have a scroll id"); 27 } 28 29 async function test() { 30 let useTouchpad = (location.search == "?touchpad"); 31 32 let resolution = await getResolution(); 33 ok(resolution > 0, 34 "The initial_resolution is " + resolution + ", which is some sane value"); 35 36 await makeActive(100, 50, "target"); 37 38 let target = document.getElementById("target"); 39 40 // Check that double-tapping once zooms in 41 await doubleTapOn(target, 100, 50, useTouchpad); 42 let prev_resolution = resolution; 43 resolution = await getResolution(); 44 ok(resolution > prev_resolution, "The first double-tap has increased the resolution to " + resolution); 45 46 // Check that double-tapping again on the same spot zooms out 47 await doubleTapOn(target, 100, 50, useTouchpad); 48 prev_resolution = resolution; 49 resolution = await getResolution(); 50 ok(resolution < prev_resolution, "The second double-tap has decreased the resolution to " + resolution); 51 } 52 53 waitUntilApzStable() 54 .then(test) 55 .then(subtestDone, subtestFailed); 56 57 </script> 58 <style> 59 .fixed { 60 top: 100px; 61 width: 500px; 62 height: 300px; 63 background: blue; 64 position: fixed; 65 } 66 .abox { 67 width: 200px; 68 height: 100px; 69 background: yellow; 70 overflow: auto; 71 } 72 .spacer { 73 height: 400vh; 74 background: lightgrey; 75 } 76 </style> 77 </head> 78 <body> 79 80 <div class="fixed"> 81 <div class="abox" id="target"> 82 <div class="spacer" style="width: 50px;"></div> 83 </div> 84 </div> 85 <div class="spacer" style="width: 100px;"></div> 86 87 </body> 88 </html>