Context Navigation

test_Slider.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 17.1 KB

Line
1	<!DOCTYPE html>
2	<html>
3	<head>
4	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
5	<title>Mobile Slider unit tests</title>
6
7	<script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','Slider']"></script>
8	<script src="../../../dojo/dojo.js" data-dojo-config="parseOnLoad:true, isDebug: true"></script>
9	<script type="text/javascript">
10	require([
11	"doh/runner",
12	"dojo/sniff",
13	"dojo/ready",
14	"dojo/_base/window",
15	"dojo/dom",
16	"dojo/dom-style",
17	"dojo/dom-geometry",
18	"dijit/registry",
19	"dojox/mobile",
20	"dojox/mobile/parser",
21	"dojox/mobile/compat",
22	"dojox/mobile/Slider"
23	], function(doh, has, ready, win, dom, domStyle, domGeometry, registry) {
24	ready(function(){
25	var hasTouch = has("touch");
26	var msPointer = navigator.msPointerEnabled;
27	var touchstart = msPointer?"MSPointerDown":"touchstart";
28	var touchmove = msPointer?"MSPointerMove":"touchmove";
29	var touchend = msPointer?"MSPointerUp":"touchend";
30	var transitionDuration = has("webkit")?"WebkitTransitionDuration":"transitionDuration";
31	function getZoom(widget){
32	var node = widget.domNode;
33	var bodyZoom = domStyle.get(win.body(), "zoom") \|\| 1;
34	var nodeZoom = ((has("ie") \|\| has("trident") > 6) ? parseFloat(domStyle.get(node).getPropertyValue("zoom"))/100 : domStyle.get(node, "zoom")) \|\| 1;
35	return nodeZoom * bodyZoom;
36	}
37	function fireTouchEvent(type, widget, x, y, delay){
38	function doit(){
39	var node = widget.domNode;
40	var handle = widget.handle;
41	var zoom = getZoom(widget);
42	if(has("ie") \|\| has("trident") > 6){
43	x *= zoom;
44	y *= zoom;
45	zoom = 1;
46	}
47	var scroll = domGeometry.docScroll();
48	var pos = domGeometry.position(node, false);
49	var handlePos = domGeometry.position(handle, false);
50	handlePos.l = handlePos.x * zoom + scroll.x;
51	handlePos.t = handlePos.y * zoom + scroll.y;
52	handlePos.r = handlePos.l + (handlePos.w - 1) * zoom;
53	handlePos.b = handlePos.t + (handlePos.h - 1) * zoom;
54	var touchX = (x + pos.x) * zoom + scroll.x;
55	var touchY = (y + pos.y) * zoom + scroll.y;
56	var target = widget.touchBox;
57	// see if handle is under the touch pos
58	if(touchX >= handlePos.l && touchX <= handlePos.r && touchY >= handlePos.t && touchY <= handlePos.b){
59	target = handle;
60	}
61	var e = document.createEvent ? document.createEvent('Events') : document.createEventObject();
62	if(!hasTouch&&!msPointer){
63	switch(type){
64	case touchstart: type = 'mousedown'; break;
65	case touchmove: type = 'mousemove'; break;
66	case touchend: type = 'mouseup'; break;
67	}
68	}
69	if(document.createEvent){
70	e.initEvent(type, true, true);
71	}
72	e.touches = [ { pageX: touchX, pageY: touchY } ];
73	e.pageX = touchX;
74	e.pageY = touchY;
75	e.changedTouches = e.touches;
76	if(document.createEvent){
77	target.dispatchEvent(e);
78	}else{
79	target.fireEvent("on"+type, e);
80	}
81	}
82	if(delay){
83	setTimeout(doit, delay);
84	}else{
85	doit();
86	}
87	}
88	var sh = registry.byId('sh');
89	var sh_width = sh.domNode.offsetWidth;
90	var sh_height = sh.domNode.offsetHeight;
91	var sh_handle_width = sh.handle.offsetWidth;
92	var sh_handle_height = sh.handle.offsetHeight;
93	var sv = registry.byId('sv');
94	var sv_width = sv.domNode.offsetWidth;
95	var sv_height = sv.domNode.offsetHeight;
96	var sv_handle_width = sv.handle.offsetWidth;
97	var sv_handle_height = sv.handle.offsetHeight;
98	var handle;
99	var speed = 0; // should be 0 unless it's a demo
100	domStyle.set(sh.handle, transitionDuration, (speed >> 1) + "ms");
101	domStyle.set(sv.handle, transitionDuration, (speed >> 1) + "ms");
102
103	doh.register("tap", [
104	{
105	name: "horizontal end",
106	timeout: 1000+speed,
107	runTest: function(){
108	function onChange(v){
109	d.getTestCallback(function(){
110	doh.is(v, sh.max);
111	})();
112	}
113	var d = new doh.Deferred();
114	handle = sh.connect(sh, 'onChange', onChange);
115	fireTouchEvent(touchstart, sh, sh_width, sh_height >> 1, speed);
116	return d;
117	},
118	tearDown: function(){
119	fireTouchEvent(touchend, sh, sh_width, sh_height >> 1);
120	sh.disconnect(handle);
121	}
122	},
123	{
124	name: "horizontal start",
125	timeout: 1000+speed,
126	runTest: function(){
127	function onChange(v){
128	d.getTestCallback(function(){
129	doh.is(v, sh.min);
130	})();
131	}
132	var d = new doh.Deferred();
133	handle = sh.connect(sh, 'onChange', onChange);
134	fireTouchEvent(touchstart, sh, 0, sh_height >> 1, speed);
135	return d;
136	},
137	tearDown: function(){
138	fireTouchEvent(touchend, sh, 0, sh_height >> 1);
139	sh.disconnect(handle);
140	}
141	},
142	{
143	name: "horizontal middle",
144	timeout: 1000+speed,
145	runTest: function(){
146	function onChange(v){
147	d.getTestCallback(function(){
148	doh.t(Math.abs(v - ((sh.max+sh.min) >> 1)) <= sh.step);
149	})();
150	}
151	var d = new doh.Deferred();
152	handle = sh.connect(sh, 'onChange', onChange);
153	fireTouchEvent(touchstart, sh, sh_width >> 1, sh_height >> 1, speed);
154	return d;
155	},
156	tearDown: function(){
157	fireTouchEvent(touchend, sh, sh_width >> 1, sh_height >> 1);
158	sh.disconnect(handle);
159	}
160	},
161	{
162	name: "vertical end",
163	timeout: 1000+speed,
164	runTest: function(){
165	function onChange(v){
166	d.getTestCallback(function(){
167	doh.is(v, sv.max);
168	})();
169	}
170	var d = new doh.Deferred();
171	handle = sv.connect(sv, 'onChange', onChange);
172	fireTouchEvent(touchstart, sv, sv_width >> 1, 0, speed);
173	return d;
174	},
175	tearDown: function(){
176	fireTouchEvent(touchend, sv, sv_width >> 1, 0);
177	sv.disconnect(handle);
178	}
179	},
180	{
181	name: "vertical start",
182	timeout: 1000+speed,
183	runTest: function(){
184	function onChange(v){
185	d.getTestCallback(function(){
186	doh.is(v, sv.min);
187	})();
188	}
189	var d = new doh.Deferred();
190	handle = sv.connect(sv, 'onChange', onChange);
191	fireTouchEvent(touchstart, sv, sv_width >> 1, sv_height, speed);
192	return d;
193	},
194	tearDown: function(){
195	fireTouchEvent(touchend, sv, sv_width >> 1, sv_height);
196	sv.disconnect(handle);
197	}
198	},
199	{
200	name: "vertical middle",
201	timeout: 1000+speed,
202	runTest: function(){
203	function onChange(v){
204	d.getTestCallback(function(){
205	doh.t(Math.abs(v - ((sv.max+sv.min) >> 1)) <= sv.step);
206	})();
207	}
208	var d = new doh.Deferred();
209	handle = sv.connect(sv, 'onChange', onChange);
210	fireTouchEvent(touchstart, sv, sv_width >> 1, sv_height >> 1, speed);
211	return d;
212	},
213	tearDown: function(){
214	fireTouchEvent(touchend, sv, sv_width >> 1, sv_height >> 1);
215	sv.disconnect(handle);
216	}
217	}
218	]);
219
220	doh.register("move", [
221	{
222	name: "horizontal right",
223	timeout: 1000+speed*2,
224	runTest: function(){
225	function onChange(v){
226	d.getTestCallback(function(){
227	doh.is(v, sh.max);
228	})();
229	}
230	var d = new doh.Deferred();
231	handle = sh.connect(sh, 'onChange', onChange);
232	fireTouchEvent(touchstart, sh, sh_width >> 1, sh_height >> 1);
233	fireTouchEvent(touchmove, sh, sh_width, sh_height >> 1, speed);
234	fireTouchEvent(touchend, sh, sh_width, sh_height >> 1, speed*2);
235	return d;
236	},
237	tearDown: function(){
238	sh.disconnect(handle);
239	}
240	},
241	{
242	name: "horizontal left",
243	timeout: 1000+speed*2,
244	runTest: function(){
245	function onChange(v){
246	d.getTestCallback(function(){
247	doh.is(v, sh.min);
248	})();
249	}
250	var d = new doh.Deferred();
251	handle = sh.connect(sh, 'onChange', onChange);
252	fireTouchEvent(touchstart, sh, sh_width, sh_height >> 1);
253	fireTouchEvent(touchmove, sh, 0, sh_height >> 1, speed);
254	fireTouchEvent(touchend, sh, 0, sh_height >> 1, speed*2);
255	return d;
256	},
257	tearDown: function(){
258	sh.disconnect(handle);
259	}
260	},
261	{
262	name: "vertical up",
263	timeout: 1000+speed,
264	runTest: function(){
265	function onChange(v){
266	d.getTestCallback(function(){
267	doh.is(v, sv.max);
268	})();
269	}
270	var d = new doh.Deferred();
271	handle = sv.connect(sv, 'onChange', onChange);
272	fireTouchEvent(touchstart, sv, sv_width >> 1, sv_height >> 1);
273	fireTouchEvent(touchmove, sv, sv_width >> 1, 0, speed);
274	return d;
275	},
276	tearDown: function(){
277	sv.disconnect(handle);
278	}
279	},
280	{
281	name: "vertical down",
282	timeout: 1000+speed,
283	runTest: function(){
284	function onChange(v){
285	d.getTestCallback(function(){
286	doh.is(v, sv.min);
287	})();
288	}
289	var d = new doh.Deferred();
290	handle = sv.connect(sv, 'onChange', onChange);
291	fireTouchEvent(touchmove, sv, sv_width >> 1, sv_height, speed);
292	return d;
293	},
294	tearDown: function(){
295	fireTouchEvent(touchend, sv, sv_width >> 1, sv_height);
296	sv.disconnect(handle);
297	}
298	}
299	]);
300
301	doh.register("click handle", [
302	{
303	name: "horizontal right",
304	timeout: 1000+speed,
305	runTest: function(){
306	var mid = (sh.max + sh.min) >> 1;
307	sh.set('value', mid, true);
308	doh.is(mid, sh.get('value'), 'initial value');
309	var d = new doh.Deferred();
310	fireTouchEvent(touchstart, sh, (sh_width >> 1) + (sh_handle_width >> 2), sh_height >> 1, speed);
311	fireTouchEvent(touchend, sh, (sh_width >> 1) + (sh_handle_width >> 2), sh_height >> 1, speed);
312	setTimeout(d.getTestCallback(function(){
313	doh.is(mid, sh.get('value'), 'right value');
314	}), 500+speed);
315	return d;
316	}
317	},
318	{
319	name: "horizontal left",
320	timeout: 1000+speed,
321	runTest: function(){
322	var mid = (sh.max + sh.min) >> 1;
323	sh.set('value', mid, true);
324	doh.is(mid, sh.get('value'), 'initial value');
325	var d = new doh.Deferred();
326	fireTouchEvent(touchstart, sh, (sh_width >> 1) - (sh_handle_width >> 2), sh_height >> 1);
327	fireTouchEvent(touchend, sh, (sh_width >> 1) - (sh_handle_width >> 2), sh_height >> 1);
328	setTimeout(d.getTestCallback(function(){
329	doh.is(mid, sh.get('value'), 'left value');
330	}), 500+speed);
331	return d;
332	}
333	},
334	{
335	name: "horizontal change right",
336	timeout: 1000+speed,
337	runTest: function(){
338	var mid = (sh.max + sh.min) >> 1;
339	sh.set('value', mid, true);
340	doh.is(mid, sh.get('value'), 'initial value');
341	var d = new doh.Deferred();
342	fireTouchEvent(touchstart, sh, (sh_width >> 1) + (sh_handle_width >> 1) + 2, sh_height >> 1, speed >> 1);
343	fireTouchEvent(touchend, sh, (sh_width >> 1) + (sh_handle_width >> 1) + 2, sh_height >> 1, speed >> 1);
344	setTimeout(d.getTestCallback(function(){
345	doh.t(sh.get('value') > mid, 'right changed value ' + sh.get('value'));
346	}), 500+speed);
347	return d;
348	}
349	},
350	{
351	name: "horizontal change left",
352	timeout: 1000+speed,
353	runTest: function(){
354	var mid = (sh.max + sh.min) >> 1;
355	sh.set('value', mid, true);
356	doh.is(mid, sh.get('value'), 'initial value');
357	var d = new doh.Deferred();
358	fireTouchEvent(touchstart, sh, (sh_width >> 1) - ((sh_handle_width >> 1) + 2), sh_height >> 1, speed >> 1);
359	fireTouchEvent(touchend, sh, (sh_width >> 1) - ((sh_handle_width >> 1) + 2), sh_height >> 1, speed >> 1);
360	setTimeout(d.getTestCallback(function(){
361	doh.t(sh.get('value') < mid, 'left changed value ' + sh.get('value'));
362	}), 500+speed);
363	return d;
364	}
365	},
366	{
367	name: "vertical bottom",
368	timeout: 1000+speed,
369	runTest: function(){
370	var mid = (sv.max + sv.min) >> 1;
371	sv.set('value', mid, true);
372	doh.is(mid, sv.get('value'), 'initial value');
373	var d = new doh.Deferred();
374	fireTouchEvent(touchstart, sv, sv_width >> 1, (sv_height >> 1) + (sv_handle_height >> 2), speed);
375	fireTouchEvent(touchend, sv, sv_width >> 1, (sv_height >> 1) + (sv_handle_height >> 2), speed);
376	setTimeout(d.getTestCallback(function(){
377	doh.is(mid, sv.get('value'), 'bottom value');
378	}), 500+speed);
379	return d;
380	}
381	},
382	{
383	name: "vertical top",
384	timeout: 1000+speed,
385	runTest: function(){
386	var mid = (sv.max + sv.min) >> 1;
387	sv.set('value', mid, true);
388	doh.is(mid, sv.get('value'), 'initial value');
389	var d = new doh.Deferred();
390	fireTouchEvent(touchstart, sv, sv_width >> 1, (sv_height >> 1) - (sv_handle_height >> 2));
391	fireTouchEvent(touchend, sv, sv_width >> 1, (sv_height >> 1) - (sv_handle_height >> 2));
392	setTimeout(d.getTestCallback(function(){
393	doh.is(mid, sv.get('value'), 'top value');
394	}), 500+speed);
395	return d;
396	}
397	},
398	{
399	name: "vertical change bottom",
400	timeout: 1000+speed,
401	runTest: function(){
402	var mid = (sv.max + sv.min) >> 1;
403	sv.set('value', mid, true);
404	doh.is(mid, sv.get('value'), 'initial value');
405	var d = new doh.Deferred();
406	fireTouchEvent(touchstart, sv, sv_width >> 1, (sv_height >> 1) + (sv_handle_height >> 1) + 2, speed >> 1);
407	fireTouchEvent(touchend, sv, sv_width >> 1, (sv_height >> 1) + (sv_handle_height >> 1) + 2, speed >> 1);
408	setTimeout(d.getTestCallback(function(){
409	doh.t(sv.get('value') < mid, 'bottom changed value ' + sv.get('value'));
410	}), 500+speed);
411	return d;
412	}
413	},
414	{
415	name: "vertical change top",
416	timeout: 1000+speed,
417	runTest: function(){
418	var mid = (sv.max + sv.min) >> 1;
419	sv.set('value', mid, true);
420	doh.is(mid, sv.get('value'), 'initial value');
421	var d = new doh.Deferred();
422	fireTouchEvent(touchstart, sv, sv_width >> 1, (sv_height >> 1) - ((sv_handle_height >> 1) + 2), speed >> 1);
423	fireTouchEvent(touchend, sv, sv_width >> 1, (sv_height >> 1) - ((sv_handle_height >> 1) + 2), speed >> 1);
424	setTimeout(d.getTestCallback(function(){
425	doh.t(sv.get('value') > mid, 'top changed value ' + sv.get('value'));
426	}), 500+speed);
427	return d;
428	}
429	}
430	]);
431
432	if(has("webkit") \|\| has("ie") === 10 \|\| (!has("ie") && has("trident") > 6)){
433	doh.register("animation", {
434	name: "horizontal 100%",
435	timeout: 2000,
436	runTest: function(){
437	var d = new doh.Deferred();
438	fireTouchEvent(touchstart, sh, 0, sh_height >> 1, 0);
439	fireTouchEvent(touchend, sh, 0, sh_height >> 1, 0);
440	var startX = Math.round(domGeometry.position(sh.handle).x), midX, endX;
441	domStyle.set(sh.handle, transitionDuration, "1000ms");
442	fireTouchEvent(touchstart, sh, sh_width, sh_height >> 1, 0);
443	fireTouchEvent(touchend, sh, sh_width, sh_height >> 1, 0);
444	sh.set('value', sh.max, true);
445	setTimeout(function(){
446	midX = domGeometry.position(sh.handle).x;
447	}, 400);
448	setTimeout(d.getTestCallback(function(){
449	endX = Math.round(domGeometry.position(sh.handle).x);
450	doh.t(midX > startX, "started sliding");
451	doh.t(midX < endX, "continued sliding");
452	var zoom = (has("ie") \|\| has("trident") > 6) ? getZoom(sh) : 1;
453	doh.t(Math.abs(Math.abs(endX-startX)-sh_widthzoom) <= 3, "stopped sliding end="+endX+',start='+startX+',width='+sh_widthzoom);
454	}), 1100);
455	return d;
456	},
457	tearDown: function(){
458	domStyle.set(sh.handle, transitionDuration, "");
459	domStyle.set(sv.handle, transitionDuration, "");
460	}
461	})
462	}
463
464	doh.register("log", function(){
465	dom.byId('failures').innerHTML = doh._failureCount;
466	dom.byId('errors').innerHTML = doh._errorCount;
467	});
468
469	doh.run();
470	});
471	});
472	</script>
473
474	<style>
475	/* test overrides */
476	.mblSlider {
477	zoom: 1.1; /* for testing, to make it easier to touch the handle */
478	}
479	.mblSliderV {
480	width: 1px;
481	border: 0px none;
482	}
483	.mblSliderH .mblSliderProgressBar {
484	background:transparent url(images/progressBarAnim.gif) repeat;
485	}
486	.mblSliderV .mblSliderHandle {
487	background:transparent url(images/sliderVthumb.png) no-repeat;
488	border-width:0px;
489	border-radius:0;
490	}
491	.windows_theme .mblSliderV .mblSliderHandle {
492	background: white none;
493	}
494	.windows_theme .mblSliderH {
495	zoom: 0;
496	}
497	</style>
498	</head>
499	<body style="visibility:hidden;zoom:1.2;">
500	<form>
501	<br>
502	<center>
503	<table><tr>
504	<td>0</td>
505	<td><input id="sh" data-dojo-type="dojox/mobile/Slider" type="range" data-dojo-props='value:0, min:0, max:20, step:0.1, onChange:function(v){ document.getElementById("sh_val").innerHTML=this.value; }' style="width:200px;" /></td>
506	<td>20</td>
507	</tr><tr>
508	<td></td><td><center>Value: <span id="sh_val">0</span></center></td><td></td>
509	</tr></table>
510	</center>
511	<br>
512	<center>
513	<table><tr><td style="width:100px;">
514	<center>
515	20<br>
516	<input id="sv" name="sv" data-dojo-type="dojox/mobile/Slider" type="range" data-dojo-props='value:0, min:-20, max:20, step:1, intermediateChanges:true, onChange:function(v){ document.getElementById("sv_val").innerHTML=this.value; }' style="width:2px;height:200px;" />
517	-20
518	</center>
519	</td><td style="width:80px;">
520	Value: <span id="sv_val">0</span>
521	</td></tr></table>
522	</center>
523	<br>
524	<input type=submit>
525	</form>
526	Errors: <span id="errors">?</span><br>
527	Failures: <span id="failures">?</span>
528	</body>
529	</html>

Note: See TracBrowser for help on using the repository browser.

Context Navigation

source: Dev/trunk/src/client/dojox/mobile/tests/test_Slider.html

Download in other formats: