| <!DOCTYPE HTML> |
| <script src="../../../resources/js-test.js"></script> |
| <style> |
| div.box { |
| margin: 10px; |
| padding: 50px; |
| float: left; |
| } |
| </style> |
| |
| <div id="grey" class="box" style="background-color:grey"> |
| <div id="lightgreen" class="box" style="background-color:lightgreen"> |
| <div id="green" class="box" style="background-color:green;"> |
| </div> |
| </div> |
| </div> |
| |
| <div id="console"></div> |
| |
| <script> |
| description("Verifies that tapping on an element fires appropriate pointer events."); |
| |
| var preventDefault; |
| var logAllEvents; |
| var receivedPEsAtTarget = []; |
| |
| function getPhaseString(event) { |
| return event.eventPhase == Event.NONE ? "none" : |
| event.eventPhase == Event.CAPTURING_PHASE ? "capturing" : |
| event.eventPhase == Event.AT_TARGET ? "target" : |
| event.eventPhase == Event.BUBBLING_PHASE ? "bubbling" : |
| "error"; |
| } |
| |
| function init() { |
| ["grey", "lightgreen", "green"].forEach(function(id) { |
| var targetDiv = document.getElementById(id); |
| |
| ["touchstart", "touchend", "touchmove"].forEach(function(eventName) { |
| targetDiv.addEventListener(eventName, function(event) { |
| if (logAllEvents) |
| debug(id + " received " + event.type + " at phase=" + getPhaseString(event)); |
| }); |
| }); |
| |
| ["pointerdown", "pointerup", "pointermove", "pointercancel", "pointerover", "pointerenter", "pointerout", "pointerleave"].forEach(function(eventName) { |
| targetDiv.addEventListener(eventName, function(event) { |
| if (event.eventPhase == Event.AT_TARGET) |
| receivedPEsAtTarget.push(event); |
| if (logAllEvents || event.eventPhase == Event.AT_TARGET) |
| debug(id + " received " + event.type + " at phase=" + getPhaseString(event)); |
| if (preventDefault) |
| event.preventDefault(); |
| }); |
| }); |
| |
| }); |
| } |
| |
| function testEventSequences(x, y) { |
| eventSender.addTouchPoint(x, y); |
| eventSender.touchStart(); |
| |
| eventSender.updateTouchPoint(0, x+20, y+20); |
| eventSender.touchMove(); |
| |
| eventSender.releaseTouchPoint(0); |
| eventSender.touchEnd(); |
| } |
| |
| function testPEParamsSingleTouch(x, y) { |
| receivedPEsAtTarget = []; |
| |
| eventSender.addTouchPoint(x, y); |
| eventSender.touchStart(); |
| var i=0; |
| for(var j=0; j<5; j++,i++) { |
| shouldBeTrue("receivedPEsAtTarget["+i+"].isPrimary"); |
| shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].button", 0); |
| shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].buttons", 1); |
| shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].clientX", x); |
| shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].clientY", y); |
| } |
| shouldBeEqualToNumber("receivedPEsAtTarget.length", i); |
| |
| eventSender.updateTouchPoint(0, x+20, y+20); |
| eventSender.touchMove(); |
| shouldBeTrue("receivedPEsAtTarget["+i+"].isPrimary"); |
| shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].button", -1); |
| shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].buttons", 1); |
| shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].clientX", x+20); |
| shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].clientY", y+20); |
| shouldBeEqualToNumber("receivedPEsAtTarget.length", ++i); |
| |
| eventSender.releaseTouchPoint(0); |
| eventSender.touchEnd(); |
| for(var j=0; j<5; j++,i++) { |
| shouldBeTrue("receivedPEsAtTarget["+i+"].isPrimary"); |
| shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].button", 0); |
| shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].buttons", 0); |
| } |
| |
| shouldBeEqualToNumber("receivedPEsAtTarget.length", i); |
| } |
| |
| function testPEParamsMultiTouch(x, y) { |
| receivedPEsAtTarget = []; |
| |
| eventSender.addTouchPoint(x, y); |
| eventSender.touchStart(); |
| var i=0; |
| var idFirst = -1; |
| for(; i<5; i++) { |
| shouldBeTrue("receivedPEsAtTarget["+i+"].isPrimary"); |
| idFirst = receivedPEsAtTarget[i].pointerId; |
| debug("receivedPEsAtTarget["+i+"].pointerId=" + idFirst) |
| } |
| |
| eventSender.addTouchPoint(x+10, y+10); |
| eventSender.touchStart(); |
| var idSecond = -1; |
| for(var j=0; j<5; j++,i++) { |
| shouldBeFalse("receivedPEsAtTarget["+i+"].isPrimary"); |
| idSecond = receivedPEsAtTarget[i].pointerId; |
| debug("receivedPEsAtTarget["+i+"].pointerId=" + idSecond) |
| } |
| |
| eventSender.updateTouchPoint(1, x+20, y+20); |
| eventSender.touchMove(); |
| shouldBeFalse("receivedPEsAtTarget["+i+"].isPrimary"); |
| shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].pointerId", idSecond); |
| i++; |
| |
| eventSender.releaseTouchPoint(0); |
| eventSender.touchEnd(); |
| for(var j=0; j<5; j++,i++) { |
| shouldBeTrue("receivedPEsAtTarget["+i+"].isPrimary"); |
| shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].pointerId", idFirst); |
| } |
| |
| eventSender.updateTouchPoint(0, x+10, y+10); |
| eventSender.touchMove(); |
| shouldBeFalse("receivedPEsAtTarget["+i+"].isPrimary"); |
| shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].pointerId", idSecond); |
| i++; |
| |
| eventSender.addTouchPoint(x, y); |
| eventSender.touchStart(); |
| var idThird = -1; |
| for(var j=0; j<5; j++,i++) { |
| shouldBeFalse("receivedPEsAtTarget["+i+"].isPrimary"); |
| idThird = receivedPEsAtTarget[i].pointerId; |
| debug("receivedPEsAtTarget["+i+"].pointerId=" + idThird) |
| } |
| |
| eventSender.releaseTouchPoint(0); |
| eventSender.touchEnd(); |
| for(var j=0; j<5; j++,i++) { |
| shouldBeFalse("receivedPEsAtTarget["+i+"].isPrimary"); |
| shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].pointerId", idSecond); |
| } |
| |
| eventSender.releaseTouchPoint(0); |
| eventSender.touchEnd(); |
| for(var j=0; j<5; j++,i++) { |
| shouldBeFalse("receivedPEsAtTarget["+i+"].isPrimary"); |
| shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].pointerId", idThird); |
| } |
| |
| eventSender.addTouchPoint(x, y); |
| eventSender.touchStart(); |
| for(var j=0; j<5; j++,i++) { |
| shouldBeTrue("receivedPEsAtTarget["+i+"].isPrimary"); |
| } |
| |
| shouldBeEqualToNumber("receivedPEsAtTarget.length", i); |
| } |
| |
| function runTests() { |
| var rect = document.getElementById("green").getBoundingClientRect(); |
| var x = rect.left + 10; |
| var y = rect.top + 10; |
| |
| logAllEvents = true; |
| preventDefault = false; |
| |
| debug("--- test PE+TE event sequences without preventDefault ---"); |
| testEventSequences(x, y); |
| debug(""); |
| |
| preventDefault = true; |
| |
| debug("--- test PE+TE event sequences with PE preventDefault ---"); |
| testEventSequences(x, y); |
| debug(""); |
| |
| logAllEvents = false; |
| |
| debug("--- test PE params for single-touch ---"); |
| testPEParamsSingleTouch(x, y); |
| debug(""); |
| |
| debug("--- test PE isPrimary values ---"); |
| testPEParamsMultiTouch(x, y); |
| debug(""); |
| } |
| |
| init(); |
| if (window.eventSender) |
| runTests(); |
| else |
| debug("This test requires eventSender"); |
| |
| </script> |
