117 lines
4.2 KiB
HTML
117 lines
4.2 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
|
<title>touchmove coalescing</title>
|
|
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
|
|
<script>
|
|
var receivedSingleTouch = false;
|
|
var receivedMultiTouch = false;
|
|
// This test does three things:
|
|
// 1. Ensures adding a new touch to existing touchmove events
|
|
// will not be coalesced with the previous single touch touchmove events
|
|
// 2. Ensures touchstart flushes the coalesced touchmove events
|
|
// 3. Ensures touchend flushes the coalesced touchmove event
|
|
async function testBrowserChildCoalescing() {
|
|
var ret = new Promise(function(resolve) {
|
|
SpecialPowers.loadChromeScript(function() {
|
|
/* eslint-env mozilla/chrome-script */
|
|
var element = this.actorParent.rootFrameLoader.ownerElement;
|
|
var rect = element.getBoundingClientRect();
|
|
var win = element.ownerDocument.defaultView;
|
|
var utils = win.windowUtils;
|
|
var x = rect.x + (rect.width / 2);
|
|
var y = Math.floor(rect.y + (rect.height / 4));
|
|
var endYForFirstTouch = Math.floor(rect.y + ((rect.height / 4) * 2));
|
|
var endYForSecondTouch = Math.floor(rect.y + ((rect.height / 4) * 4));
|
|
utils.sendTouchEvent("touchstart", [0], [x], [y], [1], [1], [0], [1],
|
|
[0], [0], [0], 0, false);
|
|
while (y != endYForFirstTouch) {
|
|
utils.sendTouchEvent("touchmove", [0], [x], [y], [1], [1], [0], [1],
|
|
[0], [0], [0], 0, false);
|
|
++y;
|
|
}
|
|
|
|
// Add a new touch and move this touch
|
|
utils.sendTouchEvent("touchstart", [0, 1], [x, x], [endYForFirstTouch, endYForFirstTouch], [1, 1], [1, 1], [0, 0], [1, 1],
|
|
[0, 0], [0, 0], [0, 0], 0, false);
|
|
while (y != endYForSecondTouch) {
|
|
utils.sendTouchEvent("touchmove", [0, 1], [x, x], [endYForFirstTouch, y], [1, 1], [1, 1], [0, 0], [1, 1],
|
|
[0, 0], [0, 0], [0, 0], 0, false);
|
|
++y;
|
|
}
|
|
|
|
utils.sendTouchEvent("touchend", [0, 1], [x, x], [endYForFirstTouch, endYForSecondTouch], [1, 1], [1, 1], [0, 0], [1, 1],
|
|
[0, 0], [0, 0], [0, 0], 0, false);
|
|
});
|
|
|
|
let touchStartCount = 0;
|
|
let shouldReceiveMultiTouch = false;
|
|
let receivedTouchEnd = false;
|
|
|
|
window.addEventListener("touchstart", function() {
|
|
++touchStartCount;
|
|
if (touchStartCount == 2) {
|
|
shouldReceiveMultiTouch = true;
|
|
}
|
|
}, true);
|
|
|
|
|
|
window.addEventListener("touchmove", function(e) {
|
|
if (receivedTouchEnd) {
|
|
ok(false, "Shouldn't get any touchmove events after touchend");
|
|
}
|
|
|
|
// Make touchmove handling slow
|
|
var start = performance.now();
|
|
while (performance.now() < (start + 10));
|
|
|
|
if (shouldReceiveMultiTouch) {
|
|
is(e.touches.length, 2, "Should get two touches for multi touch");
|
|
receivedMultiTouch = true;
|
|
} else {
|
|
is(e.touches.length, 1, "Should get one touch for single touch");
|
|
receivedSingleTouch = true;
|
|
}
|
|
}, true);
|
|
|
|
window.addEventListener("touchend", async function(e) {
|
|
receivedTouchEnd = true;
|
|
// Request a tick to ensure touchend has successfully flushed
|
|
// coalesced touchmove events
|
|
await new Promise(r => {
|
|
window.requestAnimationFrame(() => {
|
|
window.requestAnimationFrame(r);
|
|
});
|
|
});
|
|
|
|
resolve();
|
|
}, {once: true});
|
|
});
|
|
|
|
return ret;
|
|
}
|
|
|
|
async function runTests() {
|
|
await SpecialPowers.pushPrefEnv({"set": [["dom.events.coalesce.touchmove", true]]});
|
|
|
|
await testBrowserChildCoalescing();
|
|
|
|
ok(receivedSingleTouch, "Should've got single touch");
|
|
ok(receivedMultiTouch, "Should've got multi touch");
|
|
|
|
opener.finish();
|
|
window.close();
|
|
}
|
|
|
|
function init() {
|
|
SpecialPowers.pushPrefEnv({"set": [["dom.w3c_touch_events.enabled", true]]},
|
|
runTests);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="SimpleTest.waitForFocus(init);">
|
|
</body>
|
|
</html>
|