OLD | NEW |
| (Empty) |
1 <!DOCTYPE HTML> | |
2 <script src="../../../resources/js-test.js"></script> | |
3 <style> | |
4 div.box { | |
5 margin: 10px; | |
6 padding: 50px; | |
7 float: left; | |
8 } | |
9 </style> | |
10 | |
11 <div id="grey" class="box" style="background-color:grey"> | |
12 <div id="lightgreen" class="box" style="background-color:lightgreen"> | |
13 <div id="green" class="box" style="background-color:green;"> | |
14 </div> | |
15 </div> | |
16 </div> | |
17 | |
18 <div id="console"></div> | |
19 | |
20 <script> | |
21 description("Verifies that tapping on an element fires appropriate pointer event
s."); | |
22 | |
23 var preventDefault; | |
24 var logAllEvents; | |
25 var receivedPEsAtTarget = []; | |
26 | |
27 function getPhaseString(event) { | |
28 return event.eventPhase == Event.NONE ? "none" : | |
29 event.eventPhase == Event.CAPTURING_PHASE ? "capturing" : | |
30 event.eventPhase == Event.AT_TARGET ? "target" : | |
31 event.eventPhase == Event.BUBBLING_PHASE ? "bubbling" : | |
32 "error"; | |
33 } | |
34 | |
35 function init() { | |
36 ["grey", "lightgreen", "green"].forEach(function(id) { | |
37 var targetDiv = document.getElementById(id); | |
38 | |
39 ["touchstart", "touchend", "touchmove"].forEach(function(eventName) { | |
40 targetDiv.addEventListener(eventName, function(event) { | |
41 if (logAllEvents) | |
42 debug(id + " received " + event.type + " at phase=" + getPhaseString(e
vent)); | |
43 }); | |
44 }); | |
45 | |
46 ["pointerdown", "pointerup", "pointermove", "pointercancel"].forEach(functio
n(eventName) { | |
47 targetDiv.addEventListener(eventName, function(event) { | |
48 if (event.eventPhase == Event.AT_TARGET) | |
49 receivedPEsAtTarget.push(event); | |
50 if (logAllEvents || event.eventPhase == Event.AT_TARGET) | |
51 debug(id + " received " + event.type + " at phase=" + getPhaseString(e
vent)); | |
52 if (preventDefault) | |
53 event.preventDefault(); | |
54 }); | |
55 }); | |
56 | |
57 }); | |
58 } | |
59 | |
60 function testEventSequences(x, y) { | |
61 eventSender.addTouchPoint(x, y); | |
62 eventSender.touchStart(); | |
63 | |
64 eventSender.updateTouchPoint(0, x+20, y+20); | |
65 eventSender.touchMove(); | |
66 | |
67 eventSender.releaseTouchPoint(0); | |
68 eventSender.touchEnd(); | |
69 } | |
70 | |
71 function testPEParamsSingleTouch(x, y) { | |
72 receivedPEsAtTarget = []; | |
73 | |
74 eventSender.addTouchPoint(x, y); | |
75 eventSender.touchStart(); | |
76 shouldBeTrue("receivedPEsAtTarget[0].isPrimary"); | |
77 shouldBeEqualToNumber("receivedPEsAtTarget[0].button", 0); | |
78 shouldBeEqualToNumber("receivedPEsAtTarget[0].buttons", 1); | |
79 shouldBeEqualToNumber("receivedPEsAtTarget[0].clientX", x); | |
80 shouldBeEqualToNumber("receivedPEsAtTarget[0].clientY", y); | |
81 | |
82 eventSender.updateTouchPoint(0, x+20, y+20); | |
83 eventSender.touchMove(); | |
84 shouldBeTrue("receivedPEsAtTarget[1].isPrimary"); | |
85 shouldBeEqualToNumber("receivedPEsAtTarget[1].button", 0); | |
86 shouldBeEqualToNumber("receivedPEsAtTarget[1].buttons", 1); | |
87 shouldBeEqualToNumber("receivedPEsAtTarget[1].clientX", x+20); | |
88 shouldBeEqualToNumber("receivedPEsAtTarget[1].clientY", y+20); | |
89 | |
90 eventSender.releaseTouchPoint(0); | |
91 eventSender.touchEnd(); | |
92 shouldBeTrue("receivedPEsAtTarget[2].isPrimary"); | |
93 shouldBeEqualToNumber("receivedPEsAtTarget[2].button", 0); | |
94 shouldBeEqualToNumber("receivedPEsAtTarget[2].buttons", 0); | |
95 | |
96 shouldBeEqualToNumber("receivedPEsAtTarget.length", 3); | |
97 } | |
98 | |
99 function testPEParamsMultiTouch(x, y) { | |
100 receivedPEsAtTarget = []; | |
101 | |
102 eventSender.addTouchPoint(x, y); | |
103 eventSender.touchStart(); | |
104 shouldBeTrue("receivedPEsAtTarget[0].isPrimary"); | |
105 var idFirst = receivedPEsAtTarget[0].pointerId; | |
106 debug("receivedPEsAtTarget[0].pointerId=" + idFirst) | |
107 | |
108 eventSender.addTouchPoint(x+10, y+10); | |
109 eventSender.touchStart(); | |
110 shouldBeFalse("receivedPEsAtTarget[1].isPrimary"); | |
111 var idSecond = receivedPEsAtTarget[1].pointerId; | |
112 debug("receivedPEsAtTarget[1].pointerId=" + idSecond) | |
113 | |
114 eventSender.updateTouchPoint(1, x+20, y+20); | |
115 eventSender.touchMove(); | |
116 shouldBeFalse("receivedPEsAtTarget[2].isPrimary"); | |
117 shouldBeEqualToNumber("receivedPEsAtTarget[2].pointerId", idSecond); | |
118 | |
119 eventSender.releaseTouchPoint(0); | |
120 eventSender.touchEnd(); | |
121 shouldBeTrue("receivedPEsAtTarget[3].isPrimary"); | |
122 shouldBeEqualToNumber("receivedPEsAtTarget[3].pointerId", idFirst); | |
123 | |
124 eventSender.updateTouchPoint(0, x+10, y+10); | |
125 eventSender.touchMove(); | |
126 shouldBeFalse("receivedPEsAtTarget[4].isPrimary"); | |
127 shouldBeEqualToNumber("receivedPEsAtTarget[4].pointerId", idSecond); | |
128 | |
129 eventSender.addTouchPoint(x, y); | |
130 eventSender.touchStart(); | |
131 shouldBeFalse("receivedPEsAtTarget[5].isPrimary"); | |
132 var idThird = receivedPEsAtTarget[5].pointerId; | |
133 debug("receivedPEsAtTarget[5].pointerId=" + idThird) | |
134 | |
135 eventSender.releaseTouchPoint(0); | |
136 eventSender.touchEnd(); | |
137 shouldBeFalse("receivedPEsAtTarget[6].isPrimary"); | |
138 shouldBeEqualToNumber("receivedPEsAtTarget[6].pointerId", idSecond); | |
139 | |
140 eventSender.releaseTouchPoint(0); | |
141 eventSender.touchEnd(); | |
142 shouldBeFalse("receivedPEsAtTarget[7].isPrimary"); | |
143 shouldBeEqualToNumber("receivedPEsAtTarget[7].pointerId", idThird); | |
144 | |
145 eventSender.addTouchPoint(x, y); | |
146 eventSender.touchStart(); | |
147 shouldBeTrue("receivedPEsAtTarget[8].isPrimary"); | |
148 | |
149 shouldBeEqualToNumber("receivedPEsAtTarget.length", 9); | |
150 } | |
151 | |
152 function runTests() { | |
153 var rect = document.getElementById("green").getBoundingClientRect(); | |
154 var x = rect.left + 10; | |
155 var y = rect.top + 10; | |
156 | |
157 logAllEvents = true; | |
158 preventDefault = false; | |
159 | |
160 debug("--- test PE+TE event sequences without preventDefault ---"); | |
161 testEventSequences(x, y); | |
162 debug(""); | |
163 | |
164 preventDefault = true; | |
165 | |
166 debug("--- test PE+TE event sequences with PE preventDefault ---"); | |
167 testEventSequences(x, y); | |
168 debug(""); | |
169 | |
170 logAllEvents = false; | |
171 | |
172 debug("--- test PE params for single-touch ---"); | |
173 testPEParamsSingleTouch(x, y); | |
174 debug(""); | |
175 | |
176 debug("--- test PE isPrimary values ---"); | |
177 testPEParamsMultiTouch(x, y); | |
178 debug(""); | |
179 } | |
180 | |
181 init(); | |
182 if (window.eventSender) | |
183 runTests(); | |
184 else | |
185 debug("This test requires eventSender"); | |
186 | |
187 </script> | |
OLD | NEW |