file_coalesce_touchmove_browserchild2.html (8006B)
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 window.oncontextmenu = function(e) { 11 e.preventDefault(); 12 } 13 14 window.addEventListener("touchstart", function(e) { e.preventDefault(); }, 15 { passive: false} ); 16 17 var touchmoveEvents = []; 18 function touchmove(e) { 19 // Make touchmove handling slow 20 var start = performance.now(); 21 while (performance.now() < (start + 5)); 22 touchmoveEvents.push(e); 23 } 24 25 async function fireLotsOfSingleTouchMoves() { 26 var ret = new Promise(function(resolve) { 27 SpecialPowers.loadChromeScript(function() { 28 /* eslint-env mozilla/chrome-script */ 29 var element = this.actorParent.rootFrameLoader.ownerElement; 30 var rect = element.getBoundingClientRect(); 31 var win = element.ownerDocument.defaultView; 32 var utils = win.windowUtils; 33 var x = rect.x + (rect.width / 2); 34 var y = Math.floor(rect.y + (rect.height / 4)); 35 var endY = Math.floor(rect.y + ((rect.height / 4) * 2)); 36 utils.sendTouchEvent("touchstart", [0], [x], [y], [1], [1], [0], [1], 37 [0], [0], [0], 0); 38 while (y != endY) { 39 utils.sendTouchEvent("touchmove", [0], [x], [y], [1], [1], [0], [1], 40 [0], [0], [0], 0); 41 ++y; 42 } 43 utils.sendTouchEvent("touchend", [0], [x], [y], [1], [1], [0], [1], 44 [0], [0], [0], 0); 45 46 }); 47 48 touchmoveEvents = []; 49 window.addEventListener("touchmove", touchmove, true); 50 window.addEventListener("touchend", function(e) { 51 window.removeEventListener("touchmove", touchmove, true); 52 resolve(touchmoveEvents); 53 }, {once: true}); 54 }); 55 56 return ret 57 } 58 59 async function fireTwoSingleTouches() { 60 var ret = new Promise(function(resolve) { 61 SpecialPowers.loadChromeScript(function() { 62 /* eslint-env mozilla/chrome-script */ 63 var element = this.actorParent.rootFrameLoader.ownerElement; 64 var rect = element.getBoundingClientRect(); 65 var win = element.ownerDocument.defaultView; 66 var utils = win.windowUtils; 67 var x = rect.x + (rect.width / 2); 68 var startY = Math.floor(rect.y + (rect.height / 4)); 69 var endY = Math.floor(rect.y + ((rect.height / 4) * 2)); 70 utils.sendTouchEvent("touchstart", [0], [x], [startY], [1], [1], [0], 71 [1], [0], [0], [0], 0); 72 utils.sendTouchEvent("touchmove", [0], [x], [startY], [1], [1], [0], 73 [1], [0], [0], [0], 0); 74 utils.sendTouchEvent("touchmove", [0], [x], [startY + 1], [1], [1], [0], 75 [1], [0], [0], [0], 0); 76 utils.sendTouchEvent("touchend", [0], [x], [endY], [1], [1], [0], 77 [1], [0], [0], [0], 0); 78 }); 79 80 touchmoveEvents = []; 81 window.addEventListener("touchmove", touchmove, true); 82 window.addEventListener("touchend", function(e) { 83 window.removeEventListener("touchmove", touchmove, true); 84 resolve(touchmoveEvents); 85 }, {once: true}); 86 }); 87 88 return ret 89 } 90 91 async function fireLotsOfMultiTouchMoves() { 92 var ret = new Promise(function(resolve) { 93 SpecialPowers.loadChromeScript(function() { 94 /* eslint-env mozilla/chrome-script */ 95 var element = this.actorParent.rootFrameLoader.ownerElement; 96 var rect = element.getBoundingClientRect(); 97 var win = element.ownerDocument.defaultView; 98 var utils = win.windowUtils; 99 var x = rect.x + (rect.width / 2); 100 var startY = Math.floor(rect.y + (rect.height / 4)); 101 var endY = Math.floor(rect.y + ((rect.height / 4) * 2)); 102 utils.sendTouchEvent("touchstart", [0, 1], [x, x + 1], 103 [startY, startY + 1], [1, 1], [1, 1], [0, 0], 104 [1, 1], [0, 0], [0, 0], [0, 0], 0); 105 while (startY != endY) { 106 utils.sendTouchEvent("touchmove", [0, 1], [x, x + 1], 107 [startY, startY + 1], [1, 1], [1, 1], [0, 0], 108 [1, 1], [0, 0], [0, 0], [0, 0], 0); 109 ++startY; 110 } 111 utils.sendTouchEvent("touchend", [0, 1], [x, x + 1], [endY, endY + 1], 112 [1, 1], [1, 1], [0, 0], [1, 1], [0, 0], [0, 0], 113 [0, 0], 0); 114 115 }); 116 117 touchmoveEvents = []; 118 window.addEventListener("touchmove", touchmove, true); 119 window.addEventListener("touchend", function(e) { 120 window.removeEventListener("touchmove", touchmove, true); 121 resolve(touchmoveEvents); 122 }, {once: true}); 123 }); 124 125 return ret 126 } 127 128 function disableCoalescing() { 129 return SpecialPowers.pushPrefEnv({"set": [["dom.events.compress.touchmove", 130 false], 131 ["dom.events.coalesce.touchmove", 132 false]]}); 133 } 134 135 function enableCoalescing() { 136 return SpecialPowers.pushPrefEnv({"set": [["dom.events.compress.touchmove", 137 false], 138 ["dom.events.coalesce.touchmove", 139 true]]}); 140 } 141 142 async function runTests() { 143 document.body.clientTop; // Flush layout 144 145 await disableCoalescing(); 146 var touchMovesWithoutCoalescing = await fireLotsOfSingleTouchMoves(); 147 await enableCoalescing(); 148 var touchMovesWithCoalescing = await fireLotsOfSingleTouchMoves(); 149 opener.ok(touchMovesWithoutCoalescing.length > touchMovesWithCoalescing.length, 150 "Coalescing should reduce the number of touchmove events"); 151 opener.isDeeply(touchMovesWithoutCoalescing.shift().touches, 152 touchMovesWithCoalescing.shift().touches, 153 "Shouldn't have coalesced the initial touchmove"); 154 opener.isDeeply(touchMovesWithoutCoalescing.pop().touches, 155 touchMovesWithCoalescing.pop().touches, 156 "The last touchmove event should be up-to-date"); 157 158 await disableCoalescing(); 159 var twoTouchMovesWithoutCoalescing = await fireTwoSingleTouches(); 160 await enableCoalescing(); 161 var twoTouchMovesWithCoalescing = await fireTwoSingleTouches(); 162 opener.is(twoTouchMovesWithoutCoalescing.length, 2, 163 "Should have got two touchmoves"); 164 opener.is(twoTouchMovesWithoutCoalescing.length, 165 twoTouchMovesWithCoalescing.length, 166 "Shouldn't have coalesced the touchmove."); 167 168 await disableCoalescing(); 169 var multiTouchMovesWithoutCoalescing = await fireLotsOfMultiTouchMoves(); 170 await enableCoalescing(); 171 var multiTouchMovesWithCoalescing = await fireLotsOfMultiTouchMoves(); 172 opener.ok(multiTouchMovesWithoutCoalescing.length > multiTouchMovesWithCoalescing.length, 173 "Coalescing should reduce the number of multitouch touchmove events"); 174 opener.isDeeply(multiTouchMovesWithoutCoalescing.shift().touches, 175 multiTouchMovesWithCoalescing.shift().touches, 176 "Shouldn't have coalesced the initial multitouch touchmove event"); 177 opener.isDeeply(multiTouchMovesWithoutCoalescing.pop().touches, 178 multiTouchMovesWithCoalescing.pop().touches, 179 "The last multitouch touchmove event should be up-to-date"); 180 181 opener.finish(); 182 window.close(); 183 } 184 185 function init() { 186 SpecialPowers.pushPrefEnv({"set": [["dom.w3c_touch_events.enabled", true]]}, 187 runTests); 188 } 189 </script> 190 </head> 191 <body style="height: 100vh;" onload="SimpleTest.waitForFocus(init);"> 192 </body> 193 </html>