helper_doubletap_zoom_fixedpos_overflow.html (4955B)
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 elements with large overflow inside 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(25, 25, "scrollertarget"); 37 38 let target = document.getElementById("target"); 39 40 // Check that double-tapping once zooms in 41 // Coords outside of the main rect but inside the overflow to trigger the 42 // bug we are testing. 43 await doubleTapOn(target, 25, 120, useTouchpad); 44 let prev_resolution = resolution; 45 resolution = await getResolution(); 46 ok(resolution > prev_resolution, "The first double-tap has increased the resolution to " + resolution); 47 48 // Check that double-tapping again on the same spot zooms out 49 await doubleTapOn(target, 25, 120, useTouchpad); 50 prev_resolution = resolution; 51 resolution = await getResolution(); 52 ok(resolution < prev_resolution, "The second double-tap has decreased the resolution to " + resolution); 53 } 54 55 waitUntilApzStable() 56 .then(test) 57 .then(subtestDone, subtestFailed); 58 59 </script> 60 <style> 61 .fixed { 62 top: 100px; 63 width: 500px; 64 height: 300px; 65 background: blue; 66 position: fixed; 67 } 68 .abox { 69 width: 200px; 70 height: 200px; 71 background: yellow; 72 overflow: auto; 73 } 74 .spacer { 75 height: 400vh; 76 background: lightgrey; 77 } 78 </style> 79 </head> 80 <body> 81 82 <div class="fixed"> 83 <div id="scrollertarget" class="abox"> 84 <div class="spacer" style="width: 150px;"> 85 <div id="target" style="background-color: #eee; width: 145px; height: 50px; border: 1px dotted black; overflow: visible;"> 86 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 87 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 88 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 89 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 90 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 91 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 92 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 93 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 94 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 95 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 96 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 97 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 98 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 99 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 100 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 101 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 102 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 103 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 104 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 105 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 106 </div> 107 </div> 108 </div> 109 </div> 110 <div class="spacer" style="width: 100px;"></div> 111 112 </body> 113 </html>