OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE HTML> | |
2 <script src="../../../resources/js-test.js"></script> | |
3 <style> | |
4 div { | |
5 margin: 10px; | |
6 padding: 50px; | |
7 float: left; | |
8 } | |
9 #console { | |
10 padding: 0px; | |
11 float: none; | |
12 } | |
13 </style> | |
14 | |
15 <div id="grey" style="background-color:grey"> | |
16 <div id="lightgreen" style="background-color:lightgreen"> | |
17 <div id="green" style="background-color:green;"> | |
18 </div> | |
19 </div> | |
20 </div> | |
21 | |
22 <div id="console"></div> | |
23 | |
24 <script> | |
25 description("Verifies that tapping on an element fires appropriate pointer event s."); | |
26 | |
27 var preventDefault; | |
28 var logAllEvents; | |
29 var receivedPEsAtTarget = []; | |
30 | |
31 function getPhaseString(event) { | |
32 return event.eventPhase == Event.NONE ? "none" : | |
33 event.eventPhase == Event.CAPTURING_PHASE ? "capturing" : | |
34 event.eventPhase == Event.AT_TARGET ? "target" : | |
35 event.eventPhase == Event.BUBBLING_PHASE ? "bubbling" : | |
36 "error"; | |
37 } | |
38 | |
39 function init() { | |
40 ["grey", "lightgreen", "green"].forEach(function(id) { | |
41 var targetDiv = document.getElementById(id); | |
42 | |
43 ["touchstart", "touchend", "touchmove"].forEach(function(eventName) { | |
44 targetDiv.addEventListener(eventName, function(event) { | |
45 if (logAllEvents) | |
46 debug(id + " received " + event.type + " at phase=" + getPhaseString(e vent)); | |
47 }); | |
48 }); | |
49 | |
50 ["pointerdown", "pointerup", "pointermove"].forEach(function(eventName) { | |
51 targetDiv.addEventListener(eventName, function(event) { | |
52 if (event.eventPhase == Event.AT_TARGET) | |
53 receivedPEsAtTarget.push(event); | |
54 if (logAllEvents || event.eventPhase == Event.AT_TARGET) | |
55 debug(id + " received " + event.type + " at phase=" + getPhaseString(e vent)); | |
56 if (preventDefault) | |
57 event.preventDefault(); | |
58 }); | |
59 }); | |
60 | |
61 }); | |
62 } | |
63 | |
64 function testEventSequences(x, y) { | |
65 eventSender.addTouchPoint(x, y); | |
66 eventSender.touchStart(); | |
67 | |
68 eventSender.updateTouchPoint(0, x+20, y+20); | |
69 eventSender.touchMove(); | |
70 | |
71 eventSender.releaseTouchPoint(0); | |
72 eventSender.touchEnd(); | |
73 } | |
74 | |
75 function testPEParamsSingleTouch(x, y) { | |
76 receivedPEsAtTarget = []; | |
77 | |
78 eventSender.addTouchPoint(x, y); | |
79 eventSender.touchStart(); | |
80 shouldBeTrue("receivedPEsAtTarget[0].isPrimary"); | |
81 shouldBeEqualToNumber("receivedPEsAtTarget[0].button", 0); | |
82 shouldBeEqualToNumber("receivedPEsAtTarget[0].buttons", 1); | |
83 shouldBeEqualToNumber("receivedPEsAtTarget[0].clientX", x); | |
84 shouldBeEqualToNumber("receivedPEsAtTarget[0].clientY", y); | |
85 | |
86 eventSender.updateTouchPoint(0, x+20, y+20); | |
87 eventSender.touchMove(); | |
88 shouldBeTrue("receivedPEsAtTarget[1].isPrimary"); | |
89 shouldBeEqualToNumber("receivedPEsAtTarget[1].button", 0); | |
90 shouldBeEqualToNumber("receivedPEsAtTarget[1].buttons", 1); | |
91 shouldBeEqualToNumber("receivedPEsAtTarget[1].clientX", x+20); | |
92 shouldBeEqualToNumber("receivedPEsAtTarget[1].clientY", y+20); | |
93 | |
94 eventSender.releaseTouchPoint(0); | |
95 eventSender.touchEnd(); | |
96 shouldBeTrue("receivedPEsAtTarget[2].isPrimary"); | |
97 shouldBeEqualToNumber("receivedPEsAtTarget[2].button", 0); | |
98 shouldBeEqualToNumber("receivedPEsAtTarget[2].buttons", 0); | |
99 | |
100 shouldBeEqualToNumber("receivedPEsAtTarget.length", 3); | |
101 } | |
102 | |
103 function testPEParamsMultiTouch(x, y) { | |
104 receivedPEsAtTarget = []; | |
105 | |
106 eventSender.addTouchPoint(x, y); | |
107 eventSender.touchStart(); | |
108 shouldBeTrue("receivedPEsAtTarget[0].isPrimary"); | |
109 var idFirst = receivedPEsAtTarget[0].pointerId; | |
110 debug("receivedPEsAtTarget[0].pointerId=" + idFirst) | |
111 | |
112 eventSender.addTouchPoint(x+10, y+10); | |
113 eventSender.touchStart(); | |
114 shouldBeFalse("receivedPEsAtTarget[1].isPrimary"); | |
115 var idSecond = receivedPEsAtTarget[1].pointerId; | |
116 debug("receivedPEsAtTarget[1].pointerId=" + idSecond) | |
117 | |
118 eventSender.updateTouchPoint(1, x+20, y+20); | |
119 eventSender.touchMove(); | |
120 shouldBeFalse("receivedPEsAtTarget[2].isPrimary"); | |
121 shouldBeEqualToNumber("receivedPEsAtTarget[2].pointerId", idSecond); | |
122 | |
123 eventSender.releaseTouchPoint(0); | |
124 eventSender.touchEnd(); | |
125 shouldBeTrue("receivedPEsAtTarget[3].isPrimary"); | |
126 shouldBeEqualToNumber("receivedPEsAtTarget[3].pointerId", idFirst); | |
127 | |
128 eventSender.updateTouchPoint(0, x+10, y+10); | |
129 eventSender.touchMove(); | |
130 shouldBeFalse("receivedPEsAtTarget[4].isPrimary"); | |
131 shouldBeEqualToNumber("receivedPEsAtTarget[4].pointerId", idSecond); | |
132 | |
133 eventSender.addTouchPoint(x, y); | |
134 eventSender.touchStart(); | |
135 shouldBeFalse("receivedPEsAtTarget[5].isPrimary"); | |
136 var idThird = receivedPEsAtTarget[5].pointerId; | |
137 debug("receivedPEsAtTarget[5].pointerId=" + idThird) | |
138 | |
139 eventSender.releaseTouchPoint(0); | |
140 eventSender.touchEnd(); | |
141 shouldBeFalse("receivedPEsAtTarget[6].isPrimary"); | |
142 shouldBeEqualToNumber("receivedPEsAtTarget[6].pointerId", idSecond); | |
143 | |
144 eventSender.releaseTouchPoint(0); | |
145 eventSender.touchEnd(); | |
146 shouldBeFalse("receivedPEsAtTarget[7].isPrimary"); | |
147 shouldBeEqualToNumber("receivedPEsAtTarget[7].pointerId", idThird); | |
148 | |
Rick Byers
2015/06/16 17:25:39
we should probably also verify that (after releasi
mustaq
2015/06/16 20:18:42
Done.
| |
149 shouldBeEqualToNumber("receivedPEsAtTarget.length", 8); | |
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 |