helper_touch_action.html (5251B)
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>Sanity touch-action test</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 type="application/javascript"> 11 12 function checkScroll(x, y, desc) { 13 is(window.scrollX, x, desc + " - x axis"); 14 is(window.scrollY, y, desc + " - y axis"); 15 } 16 17 async function test() { 18 var target = document.getElementById("target"); 19 20 // drag the page up to scroll down by 50px 21 let touchEndPromise = promiseTouchEnd(document.body); 22 ok(await synthesizeNativeTouchDrag(target, 10, 100, 0, -50), 23 "Synthesized native vertical drag (1), waiting for touch-end event..."); 24 await touchEndPromise; 25 await promiseOnlyApzControllerFlushed(); 26 checkScroll(0, 50, "After first vertical drag, with pan-y" ); 27 28 // switch style to pan-x 29 document.body.style.touchAction = "pan-x"; 30 ok(true, "Waiting for pan-x to propagate..."); 31 await promiseAllPaintsDone(null, true); 32 await promiseOnlyApzControllerFlushed(); 33 34 // drag the page up to scroll down by 50px, but it won't happen because pan-x 35 touchEndPromise = promiseTouchEnd(document.body); 36 ok(await synthesizeNativeTouchDrag(target, 10, 100, 0, -50), 37 "Synthesized native vertical drag (2), waiting for touch-end event..."); 38 await touchEndPromise; 39 await promiseOnlyApzControllerFlushed(); 40 checkScroll(0, 50, "After second vertical drag, with pan-x"); 41 42 // drag the page left to scroll right by 50px 43 touchEndPromise = promiseTouchEnd(document.body); 44 ok(await synthesizeNativeTouchDrag(target, 100, 10, -50, 0), 45 "Synthesized horizontal drag (1), waiting for touch-end event..."); 46 await touchEndPromise; 47 await promiseOnlyApzControllerFlushed(); 48 checkScroll(50, 50, "After first horizontal drag, with pan-x"); 49 50 // drag the page diagonally right/down to scroll up/left by 40px each axis; 51 // only the x-axis will actually scroll because pan-x 52 touchEndPromise = promiseTouchEnd(document.body); 53 ok(await synthesizeNativeTouchDrag(target, 10, 10, 40, 40), 54 "Synthesized diagonal drag (1), waiting for touch-end event..."); 55 await touchEndPromise; 56 await promiseOnlyApzControllerFlushed(); 57 checkScroll(10, 50, "After first diagonal drag, with pan-x"); 58 59 // switch style back to pan-y 60 document.body.style.touchAction = "pan-y"; 61 ok(true, "Waiting for pan-y to propagate..."); 62 await promiseAllPaintsDone(null, true); 63 await promiseOnlyApzControllerFlushed(); 64 65 // drag the page diagonally right/down to scroll up/left by 40px each axis; 66 // only the y-axis will actually scroll because pan-y 67 touchEndPromise = promiseTouchEnd(document.body); 68 ok(await synthesizeNativeTouchDrag(target, 10, 10, 40, 40), 69 "Synthesized diagonal drag (2), waiting for touch-end event..."); 70 await touchEndPromise; 71 await promiseOnlyApzControllerFlushed(); 72 checkScroll(10, 10, "After second diagonal drag, with pan-y"); 73 74 // switch style to none 75 document.body.style.touchAction = "none"; 76 ok(true, "Waiting for none to propagate..."); 77 await promiseAllPaintsDone(null, true); 78 await promiseOnlyApzControllerFlushed(); 79 80 // drag the page diagonally up/left to scroll down/right by 40px each axis; 81 // neither will scroll because of touch-action 82 touchEndPromise = promiseTouchEnd(document.body); 83 ok(await synthesizeNativeTouchDrag(target, 100, 100, -40, -40), 84 "Synthesized diagonal drag (3), waiting for touch-end event..."); 85 await touchEndPromise; 86 await promiseOnlyApzControllerFlushed(); 87 checkScroll(10, 10, "After third diagonal drag, with none"); 88 89 document.body.style.touchAction = "manipulation"; 90 ok(true, "Waiting for manipulation to propagate..."); 91 await promiseAllPaintsDone(null, true); 92 await promiseOnlyApzControllerFlushed(); 93 94 // drag the page diagonally up/left to scroll down/right by 40px each axis; 95 // both will scroll because of touch-action 96 touchEndPromise = promiseTouchEnd(document.body); 97 ok(await synthesizeNativeTouchDrag(target, 100, 100, -40, -40), 98 "Synthesized diagonal drag (4), waiting for touch-end event..."); 99 await touchEndPromise; 100 await promiseOnlyApzControllerFlushed(); 101 checkScroll(50, 50, "After fourth diagonal drag, with manipulation"); 102 } 103 104 waitUntilApzStable() 105 .then(test) 106 .then(subtestDone, subtestFailed); 107 108 </script> 109 </head> 110 <body style="touch-action: pan-y"> 111 <div style="width: 5000px; height: 5000px; background-color: lightgreen;"> 112 This div makes the page scrollable on both axes.<br> 113 This is the second line of text.<br> 114 This is the third line of text.<br> 115 This is the fourth line of text. 116 </div> 117 <!-- This fixed-position div remains in the same place relative to the browser chrome, so we 118 can use it as a targeting device for synthetic touch events. The body will move around 119 as we scroll, so we'd have to be constantly adjusting the synthetic drag coordinates 120 if we used that as the target element. --> 121 <div style="position:fixed; left: 10px; top: 10px; width: 1px; height: 1px" id="target"></div> 122 </body> 123 </html>