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", "pointerover",
"pointerenter", "pointerout", "pointerleave"].forEach(function(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 var i=0; | |
77 for(var j=0; j<5; j++,i++) { | |
78 shouldBeTrue("receivedPEsAtTarget["+i+"].isPrimary"); | |
79 shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].button", 0); | |
80 shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].buttons", 1); | |
81 shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].clientX", x); | |
82 shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].clientY", y); | |
83 } | |
84 shouldBeEqualToNumber("receivedPEsAtTarget.length", i); | |
85 | |
86 eventSender.updateTouchPoint(0, x+20, y+20); | |
87 eventSender.touchMove(); | |
88 shouldBeTrue("receivedPEsAtTarget["+i+"].isPrimary"); | |
89 shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].button", -1); | |
90 shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].buttons", 1); | |
91 shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].clientX", x+20); | |
92 shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].clientY", y+20); | |
93 shouldBeEqualToNumber("receivedPEsAtTarget.length", ++i); | |
94 | |
95 eventSender.releaseTouchPoint(0); | |
96 eventSender.touchEnd(); | |
97 for(var j=0; j<5; j++,i++) { | |
98 shouldBeTrue("receivedPEsAtTarget["+i+"].isPrimary"); | |
99 shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].button", 0); | |
100 shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].buttons", 0); | |
101 } | |
102 | |
103 shouldBeEqualToNumber("receivedPEsAtTarget.length", i); | |
104 } | |
105 | |
106 function testPEParamsMultiTouch(x, y) { | |
107 receivedPEsAtTarget = []; | |
108 | |
109 eventSender.addTouchPoint(x, y); | |
110 eventSender.touchStart(); | |
111 var i=0; | |
112 var idFirst = -1; | |
113 for(; i<5; i++) { | |
114 shouldBeTrue("receivedPEsAtTarget["+i+"].isPrimary"); | |
115 idFirst = receivedPEsAtTarget[i].pointerId; | |
116 debug("receivedPEsAtTarget["+i+"].pointerId=" + idFirst) | |
117 } | |
118 | |
119 eventSender.addTouchPoint(x+10, y+10); | |
120 eventSender.touchStart(); | |
121 var idSecond = -1; | |
122 for(var j=0; j<5; j++,i++) { | |
123 shouldBeFalse("receivedPEsAtTarget["+i+"].isPrimary"); | |
124 idSecond = receivedPEsAtTarget[i].pointerId; | |
125 debug("receivedPEsAtTarget["+i+"].pointerId=" + idSecond) | |
126 } | |
127 | |
128 eventSender.updateTouchPoint(1, x+20, y+20); | |
129 eventSender.touchMove(); | |
130 shouldBeFalse("receivedPEsAtTarget["+i+"].isPrimary"); | |
131 shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].pointerId", idSecond); | |
132 i++; | |
133 | |
134 eventSender.releaseTouchPoint(0); | |
135 eventSender.touchEnd(); | |
136 for(var j=0; j<5; j++,i++) { | |
137 shouldBeTrue("receivedPEsAtTarget["+i+"].isPrimary"); | |
138 shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].pointerId", idFirst); | |
139 } | |
140 | |
141 eventSender.updateTouchPoint(0, x+10, y+10); | |
142 eventSender.touchMove(); | |
143 shouldBeFalse("receivedPEsAtTarget["+i+"].isPrimary"); | |
144 shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].pointerId", idSecond); | |
145 i++; | |
146 | |
147 eventSender.addTouchPoint(x, y); | |
148 eventSender.touchStart(); | |
149 var idThird = -1; | |
150 for(var j=0; j<5; j++,i++) { | |
151 shouldBeFalse("receivedPEsAtTarget["+i+"].isPrimary"); | |
152 idThird = receivedPEsAtTarget[i].pointerId; | |
153 debug("receivedPEsAtTarget["+i+"].pointerId=" + idThird) | |
154 } | |
155 | |
156 eventSender.releaseTouchPoint(0); | |
157 eventSender.touchEnd(); | |
158 for(var j=0; j<5; j++,i++) { | |
159 shouldBeFalse("receivedPEsAtTarget["+i+"].isPrimary"); | |
160 shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].pointerId", idSecond); | |
161 } | |
162 | |
163 eventSender.releaseTouchPoint(0); | |
164 eventSender.touchEnd(); | |
165 for(var j=0; j<5; j++,i++) { | |
166 shouldBeFalse("receivedPEsAtTarget["+i+"].isPrimary"); | |
167 shouldBeEqualToNumber("receivedPEsAtTarget["+i+"].pointerId", idThird); | |
168 } | |
169 | |
170 eventSender.addTouchPoint(x, y); | |
171 eventSender.touchStart(); | |
172 for(var j=0; j<5; j++,i++) { | |
173 shouldBeTrue("receivedPEsAtTarget["+i+"].isPrimary"); | |
174 } | |
175 | |
176 shouldBeEqualToNumber("receivedPEsAtTarget.length", i); | |
177 } | |
178 | |
179 function runTests() { | |
180 var rect = document.getElementById("green").getBoundingClientRect(); | |
181 var x = rect.left + 10; | |
182 var y = rect.top + 10; | |
183 | |
184 logAllEvents = true; | |
185 preventDefault = false; | |
186 | |
187 debug("--- test PE+TE event sequences without preventDefault ---"); | |
188 testEventSequences(x, y); | |
189 debug(""); | |
190 | |
191 preventDefault = true; | |
192 | |
193 debug("--- test PE+TE event sequences with PE preventDefault ---"); | |
194 testEventSequences(x, y); | |
195 debug(""); | |
196 | |
197 logAllEvents = false; | |
198 | |
199 debug("--- test PE params for single-touch ---"); | |
200 testPEParamsSingleTouch(x, y); | |
201 debug(""); | |
202 | |
203 debug("--- test PE isPrimary values ---"); | |
204 testPEParamsMultiTouch(x, y); | |
205 debug(""); | |
206 } | |
207 | |
208 init(); | |
209 if (window.eventSender) | |
210 runTests(); | |
211 else | |
212 debug("This test requires eventSender"); | |
213 | |
214 </script> | |
OLD | NEW |