dom/events/test/file_coalesce_touchmove_ipc.html

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