helper_onetouchpinch_nested.html (3355B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>One-touch pinch zooming while on a non-root scroller</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 src="/tests/SimpleTest/EventUtils.js"></script> 11 <script type="application/javascript"> 12 13 async function test_onetouchpinch() { 14 // layerize the scroller so it gets an APZC and GestureEventListener 15 var scroller = document.getElementById("scroller"); 16 SpecialPowers.getDOMWindowUtils(window).setDisplayPortForElement(0, 0, 400, 1000, scroller, 1); 17 await promiseApzFlushedRepaints(); 18 19 ok(isLayerized("scroller"), "scroller has been successfully layerized"); 20 21 var initial_resolution = await getResolution(); 22 ok(initial_resolution > 0, 23 "The initial_resolution is " + initial_resolution + ", which is some sane value"); 24 25 let transformEndPromise = promiseTransformEnd(); 26 27 function translateY(point, dy) { 28 return {x: point.x, y: point.y + dy}; 29 } 30 31 var zoom_point = centerOf(scroller); 32 var zoom_in = [ 33 [ zoom_point ], 34 [ null ], 35 [ zoom_point ], 36 [ translateY(zoom_point, 5) ], 37 [ translateY(zoom_point, 10) ], 38 [ translateY(zoom_point, 15) ], 39 [ translateY(zoom_point, 20) ], 40 [ translateY(zoom_point, 25) ], 41 ]; 42 43 var touchIds = [0]; 44 await synthesizeNativeTouchSequences(scroller, zoom_in, null, touchIds); 45 46 // Wait for the APZ:TransformEnd to be fired after touch events are processed. 47 await transformEndPromise; 48 49 // Flush state and get the resolution we're at now 50 await promiseApzFlushedRepaints(); 51 let final_resolution = await getResolution(); 52 ok(final_resolution > initial_resolution, "The final resolution (" + final_resolution + ") is greater after zooming in"); 53 54 // Also check that the scroller didn't get scrolled. 55 is(scroller.scrollTop, 0, "scroller didn't y-scroll"); 56 is(scroller.scrollLeft, 0, "scroller didn't x-scroll"); 57 } 58 59 async function test() { 60 // Run the test with the scrollable div 61 await test_onetouchpinch(); 62 dump("Wrapping scroller in fixed-pos div...\n"); 63 // Now wrap the scrollable div inside a fixed-pos div 64 var fixedElement = document.createElement("div"); 65 fixedElement.id = "fixed"; 66 document.body.appendChild(fixedElement); 67 fixedElement.appendChild(document.getElementById("scroller")); 68 dump("Done wrapping scroller in fixed-pos div.\n"); 69 // Now run the test again, with the scrollable div inside a fixed-pos div 70 await test_onetouchpinch(); 71 } 72 73 waitUntilApzStable() 74 .then(test) 75 .then(subtestDone, subtestFailed); 76 77 </script> 78 <style> 79 #scroller { 80 width: 300px; 81 height: 300px; 82 overflow: scroll; 83 } 84 85 #fixed { 86 background-color: green; 87 position: fixed; 88 width: 300px; 89 height: 300px; 90 left: 100px; 91 top: 100px; 92 } 93 </style> 94 </head> 95 <body> 96 Here is some text outside the scrollable div. 97 <div id="scroller"> 98 Here is some text inside the scrollable div. 99 <div style="height: 2000px">This div actually makes it overflow.</div> 100 </div> 101 <div style="height: 2000px">This div makes the body scrollable.</div> 102 </body> 103 </html>