blob: f41427498ee38961c3355c5a19d1efbb5285b5df [file] [log] [blame]
<!DOCTYPE HTML>
<script src="../../../resources/js-test.js"></script>
<style>
div.box {
margin: 5px;
padding: 20px;
float: left;
}
#grey {
width: 50px;
height: 50px;
}
</style>
<div id="grey" class="box" style="background-color:grey">
<div id="green" class="box" style="background-color:green;">
</div>
</div>
<div id="blue" class="box" style="background-color:blue;">
</div>
<div id="console"></div>
<script>
description("Verifies that pointer capture works for touch.");
var ACTION_NONE = 0;
var ACTION_RELEASE = 1;
var ACTION_RESET = 2;
document.captureAction = ACTION_NONE;
document.movecount = 0;
var rect = document.getElementById("green").getBoundingClientRect();
var x1 = rect.left + 5;
var y1 = rect.top + 5;
var rect = document.getElementById("blue").getBoundingClientRect();
var x2 = rect.left + 5;
var y2 = rect.top + 5;
function init() {
var eventList = ["touchstart", "touchmove", "touchend", "touchcancel",
"pointerenter", "pointerleave", "pointerover", "pointerout", "pointermove", "pointerdown", "pointerup", "pointercancel",
"gotpointercapture", "lostpointercapture"];
document.addEventListener("lostpointercapture", function(event) {
if (event.eventPhase == Event.AT_TARGET) {
debug("document received " + event.type + " " + event.pointerId);
}
});
["grey", "green", "blue"].forEach(function(id) {
var targetDiv = document.getElementById(id);
eventList.forEach(function(eventName) {
targetDiv.addEventListener(eventName, function(event) {
if (event.eventPhase == Event.AT_TARGET) {
if (event.type.includes("pointer")) {
debug(id + " received " + event.type + " " + event.pointerId);
if (document.captureAction == ACTION_RESET && event.type == "pointerdown") {
debug(" --- Set pointer capture to blue " + event.pointerId + " ---");
document.getElementById('blue').setPointerCapture(event.pointerId);
document.captureAction = ACTION_NONE;
}
if (document.captureAction == ACTION_RELEASE && event.type == "pointermove" && ++document.movecount > 1) {
debug(" &&& Releasing pointer capture for " + event.pointerId + " &&&");
event.target.releasePointerCapture(event.pointerId);
document.captureAction = ACTION_NONE;
}
} else
debug(id + " received " + event.type);
}
});
});
});
}
function singleTouchTestScenario(touchCancel, captureAction) {
var captureName = captureAction == ACTION_RELEASE ? " with capture release" :
captureAction == ACTION_RESET ? " with capture reset" : "";
debug(" ======= Touch and " + (touchCancel ? "cancel" : "release") + captureName + " =======");
document.captureAction = captureAction;
document.movecount = 0;
debug(" **** First touch on green box & jiggle ****");
eventSender.addTouchPoint(x1, y1)
eventSender.touchStart();
eventSender.updateTouchPoint(0, x1+1, y1+1);
eventSender.touchMove();
debug(" **** Move to blue box & jiggle ****");
eventSender.updateTouchPoint(0, x2, y2);
eventSender.touchMove();
eventSender.updateTouchPoint(0, x2+1, y2+1);
eventSender.touchMove();
if (touchCancel) {
debug(" **** Cancel touch ****");
eventSender.cancelTouchPoint(0);
eventSender.touchCancel();
} else {
debug(" **** Release touch ****");
eventSender.releaseTouchPoint(0);
eventSender.touchEnd();
}
debug("");
}
function multiTouchTestScenario(touchCancel, captureAction) {
var captureName = captureAction == ACTION_RELEASE ? " with capture release" :
captureAction == ACTION_RESET ? " with capture reset" : "";
debug(" ======= Multitouch and " + (touchCancel ? "cancel" : "release") + captureName + " =======");
document.captureAction = captureAction;
document.movecount = 0;
debug(" **** First touch on green & second touch on blue & jiggle ****");
eventSender.addTouchPoint(x1, y1)
eventSender.touchStart();
eventSender.addTouchPoint(x2, y2)
eventSender.touchStart();
eventSender.updateTouchPoint(0, x1+1, y1+1);
eventSender.touchMove();
eventSender.updateTouchPoint(1, x2+1, y2+1);
eventSender.touchMove();
debug(" **** Move first touch to blue & second touch to green ****");
eventSender.updateTouchPoint(0, x2, y2);
eventSender.touchMove();
eventSender.updateTouchPoint(1, x1, y1);
eventSender.touchMove();
if (touchCancel) {
debug(" **** Cancel first touch ****");
eventSender.cancelTouchPoint(0);
eventSender.touchCancel();
} else {
debug(" **** Release first touch ****");
eventSender.releaseTouchPoint(0);
eventSender.touchEnd();
}
debug(" **** Jiggle second touch on green ****");
eventSender.updateTouchPoint(0, x1+1, y1+1);
eventSender.touchMove();
if (touchCancel) {
debug(" **** Cancel second touch ****");
eventSender.cancelTouchPoint(0);
eventSender.touchCancel();
} else {
debug(" **** Release second touch ****");
eventSender.releaseTouchPoint(0);
eventSender.touchEnd();
}
debug("");
}
function runTests() {
[ACTION_NONE, ACTION_RELEASE, ACTION_RESET].forEach(function(action) {
singleTouchTestScenario(false, action);
singleTouchTestScenario(true, action);
multiTouchTestScenario(false, action);
multiTouchTestScenario(true, action);
});
}
init();
if (window.eventSender)
runTests();
else
debug("This test requires eventSender");
</script>