helper_zoomed_pan.html (2636B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width; initial-scale=1.0,minimum-scale=1.0"> 6 <title>Ensure layout viewport responds to panning while pinched</title> 7 <script type="application/javascript" src="apz_test_utils.js"></script> 8 <script type="application/javascript" src="apz_test_native_event_utils.js"></script> 9 <script src="/tests/SimpleTest/paint_listener.js"></script> 10 <style> 11 body { 12 margin: 0; 13 padding: 0; 14 } 15 #content { 16 height: 5000px; 17 width: 5000px; 18 background: repeating-linear-gradient(#EEE, #EEE 100px, #DDD 100px, #DDD 200px); 19 } 20 </style> 21 </head> 22 <body> 23 <div id="content"></div> 24 <script type="application/javascript"> 25 const RESOLUTION = 4; 26 const OFFSET_SCREEN_PX = 50; 27 const OFFSET_CSS_PX = OFFSET_SCREEN_PX / RESOLUTION; 28 29 function computeDelta(visual) { 30 // Compute the distance from the right/bottom edge of the visual 31 // viewport to the same edge of the layout viewport and add the desired 32 // offset to that. 33 // We can ignore scrollbar width here since the scrollbar is layouted at 34 // the right/bottom edge of this content, not of this window in the case 35 // of containerful scrolling. 36 return visual - (visual / RESOLUTION) + OFFSET_CSS_PX; 37 } 38 39 async function test() { 40 const cases = [ 41 { 42 x: 0, 43 y: 0, 44 dx: (width) => -computeDelta(width), 45 dy: () => 0, 46 expected: { 47 x: [OFFSET_CSS_PX, "x-offset was adjusted"], 48 y: [0, "y-offset was not affected"], 49 }, 50 }, 51 { 52 x: OFFSET_CSS_PX, 53 y: 0, 54 dx: () => 0, 55 dy: (height) => -computeDelta(height), 56 expected: { 57 x: [OFFSET_CSS_PX, "x-offset was not affected"], 58 y: [OFFSET_CSS_PX, "y-offset was adjusted"], 59 }, 60 }, 61 ]; 62 63 for (let c of cases) { 64 await promiseNativeTouchDrag(window, 65 c.x, 66 c.y, 67 c.dx(document.documentElement.clientWidth), 68 c.dy(document.documentElement.clientHeight)); 69 await promiseApzFlushedRepaints(); 70 is(window.scrollX, c.expected.x[0], c.expected.x[1]); 71 is(window.scrollY, c.expected.y[0], c.expected.y[1]); 72 } 73 } 74 75 SpecialPowers.getDOMWindowUtils(window).setResolutionAndScaleTo(RESOLUTION); 76 waitUntilApzStable().then(test).then(subtestDone, subtestFailed); 77 </script> 78 </body> 79 </html>