| <!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> |