helper_bug1682170_pointercancel_on_touchaction_pinchzoom.html (2581B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width; initial-scale=1.0"> 6 <script type="application/javascript" src="apz_test_native_event_utils.js"></script> 7 <script type="application/javascript" src="apz_test_utils.js"></script> 8 <script src="/tests/SimpleTest/paint_listener.js"></script> 9 <script src="/tests/SimpleTest/EventUtils.js"></script> 10 <script type="application/javascript"> 11 12 async function test() { 13 var body = document.body; 14 15 // Event listeners just for logging/debugging purposes 16 body.addEventListener("pointerdown", function(e) { 17 dump(`Got pointerdown, pointer id ${e.pointerId}\n`); 18 }); 19 body.addEventListener("touchstart", function(e) { 20 dump(`Got touchstart with ${e.touches.length} touches\n`); 21 }, {passive: true}); 22 23 24 // Event listeners relevant to the test. We want to make sure that a 25 // pointercancel event is dispatched to web content, so we listen for that. 26 // Also we want to ensure the main thread TouchActionHelper code is run and 27 // used, so we add a non-passive touchmove listener that ensures the body has 28 // a d-t-c region. 29 var gotPointerCancel = false; 30 body.addEventListener("pointercancel", function(e) { 31 dump(`Got pointercancel, pointer id ${e.pointerId}\n`); 32 gotPointerCancel = true; 33 }); 34 body.addEventListener("touchmove", function(e) { 35 dump(`Got touchmove with ${e.touches.length} touches\n`); 36 }, {passive: false}); 37 38 let touchEndPromise = new Promise(resolve => { 39 // This listener is just to catch the end of the touch sequence so we can 40 // end the test at the right time. 41 body.addEventListener("touchend", function(e) { 42 dump(`Got touchend with ${e.touches.length} touches\n`); 43 if (!e.touches.length) { 44 resolve(); 45 } 46 }); 47 }); 48 49 // We can't await this call, because this pinch action doesn't generate a 50 // APZ:TransformEnd. Instead we await the touchend. 51 pinchZoomOutWithTouchAtCenter(); 52 await touchEndPromise; 53 54 ok(gotPointerCancel, "Checking that we definitely cancelled the pointerevents"); 55 } 56 57 waitUntilApzStable() 58 .then(test) 59 .then(subtestDone, subtestFailed); 60 61 </script> 62 <style> 63 body { 64 height: 5000px; 65 touch-action: pinch-zoom; 66 } 67 </style> 68 </head> 69 <body> 70 A two-finger pinch action here should trigger browser zoom and trigger a pointercancel to content. 71 Note that the code does a zoom-out and the page is already at min zoom, so 72 the zoom doesn't produce any visual effect. But the DOM events should be the 73 same either way. 74 </body> 75 </html>