file_coalesce_touchmove_browserchild.html (4246B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> 6 <title>touchmove coalescing</title> 7 <script src="/tests/SimpleTest/SimpleTest.js"></script> 8 <link rel="stylesheet" href="/tests/SimpleTest/test.css"/> 9 <script> 10 var receivedSingleTouch = false; 11 var receivedMultiTouch = false; 12 // This test does three things: 13 // 1. Ensures adding a new touch to existing touchmove events 14 // will not be coalesced with the previous single touch touchmove events 15 // 2. Ensures touchstart flushes the coalesced touchmove events 16 // 3. Ensures touchend flushes the coalesced touchmove event 17 async function testBrowserChildCoalescing() { 18 var ret = new Promise(function(resolve) { 19 SpecialPowers.loadChromeScript(function() { 20 /* eslint-env mozilla/chrome-script */ 21 var element = this.actorParent.rootFrameLoader.ownerElement; 22 var rect = element.getBoundingClientRect(); 23 var win = element.ownerDocument.defaultView; 24 var utils = win.windowUtils; 25 var x = rect.x + (rect.width / 2); 26 var y = Math.floor(rect.y + (rect.height / 4)); 27 var endYForFirstTouch = Math.floor(rect.y + ((rect.height / 4) * 2)); 28 var endYForSecondTouch = Math.floor(rect.y + ((rect.height / 4) * 4)); 29 utils.sendTouchEvent("touchstart", [0], [x], [y], [1], [1], [0], [1], 30 [0], [0], [0], 0); 31 while (y != endYForFirstTouch) { 32 utils.sendTouchEvent("touchmove", [0], [x], [y], [1], [1], [0], [1], 33 [0], [0], [0], 0); 34 ++y; 35 } 36 37 // Add a new touch and move this touch 38 utils.sendTouchEvent("touchstart", [0, 1], [x, x], [endYForFirstTouch, endYForFirstTouch], [1, 1], [1, 1], [0, 0], [1, 1], 39 [0, 0], [0, 0], [0, 0], 0); 40 while (y != endYForSecondTouch) { 41 utils.sendTouchEvent("touchmove", [0, 1], [x, x], [endYForFirstTouch, y], [1, 1], [1, 1], [0, 0], [1, 1], 42 [0, 0], [0, 0], [0, 0], 0); 43 ++y; 44 } 45 46 utils.sendTouchEvent("touchend", [0, 1], [x, x], [endYForFirstTouch, endYForSecondTouch], [1, 1], [1, 1], [0, 0], [1, 1], 47 [0, 0], [0, 0], [0, 0], 0); 48 }); 49 50 let touchStartCount = 0; 51 let shouldReceiveMultiTouch = false; 52 let receivedTouchEnd = false; 53 54 window.addEventListener("touchstart", function() { 55 ++touchStartCount; 56 if (touchStartCount == 2) { 57 shouldReceiveMultiTouch = true; 58 } 59 }, true); 60 61 62 window.addEventListener("touchmove", function(e) { 63 if (receivedTouchEnd) { 64 ok(false, "Shouldn't get any touchmove events after touchend"); 65 } 66 67 // Make touchmove handling slow 68 var start = performance.now(); 69 while (performance.now() < (start + 10)); 70 71 if (shouldReceiveMultiTouch) { 72 is(e.touches.length, 2, "Should get two touches for multi touch"); 73 receivedMultiTouch = true; 74 } else { 75 is(e.touches.length, 1, "Should get one touch for single touch"); 76 receivedSingleTouch = true; 77 } 78 }, true); 79 80 window.addEventListener("touchend", async function(e) { 81 receivedTouchEnd = true; 82 // Request a tick to ensure touchend has successfully flushed 83 // coalesced touchmove events 84 await new Promise(r => { 85 window.requestAnimationFrame(() => { 86 window.requestAnimationFrame(r); 87 }); 88 }); 89 90 resolve(); 91 }, {once: true}); 92 }); 93 94 return ret; 95 } 96 97 async function runTests() { 98 await SpecialPowers.pushPrefEnv({"set": [["dom.events.coalesce.touchmove", true]]}); 99 100 await testBrowserChildCoalescing(); 101 102 ok(receivedSingleTouch, "Should've got single touch"); 103 ok(receivedMultiTouch, "Should've got multi touch"); 104 105 opener.finish(); 106 window.close(); 107 } 108 109 function init() { 110 SpecialPowers.pushPrefEnv({"set": [["dom.w3c_touch_events.enabled", true]]}, 111 runTests); 112 } 113 </script> 114 </head> 115 <body onload="SimpleTest.waitForFocus(init);"> 116 </body> 117 </html>