Context Navigation

← Previous Revision
Latest Revision
Next Revision →
Blame
Revision Log

fx.html @ 485

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

Line
1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2	"http://www.w3.org/TR/html4/strict.dtd">
3	<html>
4	<head>
5	<title>Testing fx</title>
6	<script type="text/javascript" src="../dojo.js" data-dojo-config="isDebug:true"></script>
7	<script type="text/javascript">
8	require([
9	"doh",
10	"dojo/_base/array", "dojo/aspect", "dojo/dom", "dojo/dom-style",
11	"dojo/_base/fx", "dojo/fx", "dojo/fx/easing", "dojo/fx/Toggler", "dojo/_base/lang",
12	"dojo/domReady!"
13	], function(doh, array, aspect, dom, domStyle, baseFx, fx, easing, Toggler, lang){
14	doh.register("t",
15	[
16	function slideTo(t){
17	var s = fx.slideTo({
18	node: "foo",
19	duration: 500,
20	left: 500,
21	top: 50
22	}).play();
23	var d = new doh.Deferred();
24	aspect.after(s, "onEnd", function(){
25	doh.is(domStyle.get("foo", "left"), 500);
26	doh.is(domStyle.get("foo", "top"), 50);
27	with(dom.byId("foo").style){
28	position = left = top = "";
29	}
30	d.callback(true);
31	}, true);
32	s.play();
33	return d;
34	},
35
36	function wipeOut(t){
37	dom.byId("foo").style.height = "";
38	var d = new doh.Deferred();
39	var s = fx.wipeOut({
40	node: "foo",
41	onEnd: function(){
42	doh.t(domStyle.get("foo", "height") < 5);
43	d.callback(true);
44	}
45	}).play();
46	return d;
47	},
48
49	function wipeIn(t){
50	var d = new doh.Deferred();
51	setTimeout(function(){
52	fx.wipeIn({
53	node: "foo",
54	onEnd: function(){
55	console.debug(domStyle.get("foo", "height"));
56	doh.t(domStyle.get("foo", "height") > 10);
57	d.callback(true);
58	}
59	}).play();
60	}, 10);
61	return d;
62	},
63
64	{
65	name: "chain",
66	timeout: 1500,
67	runTest: function(t){
68	dom.byId("foo").style.height = "0px";
69	var d = new doh.Deferred();
70	var w = fx.wipeIn({
71	node: "foo",
72	duration: 500
73	});
74	var f = baseFx.fadeOut({
75	node: "foo",
76	duration: 500
77	});
78	var a = fx.chain([w,f]);
79	aspect.after(a, "onEnd", function(){
80	doh.t((w.status()=="stopped"&&f.status()=="stopped"));
81	d.callback(true);
82	});
83	a.play();
84	return d;
85	}
86	},
87
88	{
89	name: "combine",
90	timeout: 1500,
91	runTest: function(t){
92	dom.byId("foo").style.height = "0px";
93	var d = new doh.Deferred();
94	var w = fx.wipeIn({
95	node: "foo",
96	duration: 500
97	});
98	var f = baseFx.fadeIn({
99	node: "foo",
100	duration: 1000
101	});
102	var a = fx.combine([w,f]);
103	aspect.after(a, "onEnd", function(){
104	doh.t((w.status()=="stopped"&&f.status()=="stopped"));
105	d.callback(true);
106	}, true);
107	a.play();
108	return d;
109	}
110	},
111	{
112	name:"combineBeforeBegin",
113	timeout:1500,
114	runTest: function(t){
115	var d = new doh.Deferred();
116	var a = baseFx.fadeOut({ node:"foo2", duration:400 });
117	var b = baseFx.fadeIn({ node:"foo2", duration:400 });
118	var chain = fx.combine([a,b]);
119	aspect.after(chain,"beforeBegin",lang.hitch(d,"callback",true), true);
120	chain.play();
121	return d;
122	}
123
124	},
125	{
126	name:"delayTest",
127	timeout:2000,
128	runTest:function(t){
129	var d = new doh.Deferred();
130	var delay = 100;
131	var _anims = [];
132	var nodes = ["a","b","c","d"];
133	array.forEach(nodes,function(n){
134	_anims.push(baseFx.fadeOut({ node:n, duration:100, delay: delay += 100 }));
135	});
136	var a = fx.combine(_anims);
137	var timer = (new Date()).getTime();
138	aspect.after(a,"onEnd",function(){
139	console.warn("delayTest running time:", (new Date()).getTime() - timer, "ms, expected:", a.duration, "ms");
140	d.callback(true);
141	}, true);
142	a.play();
143	return d;
144	}
145	},
146	{
147	name:"delayTestChain",
148	timeout:2200,
149	runTest:function(t){
150	var d = new doh.Deferred();
151	var delay = 100;
152	var _anims = [];
153	var nodes = ["a","b","c","d"];
154	array.forEach(nodes,function(n){
155	_anims.push(baseFx.fadeIn({ node:n, duration:100, delay: delay += 100 }));
156	});
157	var a = fx.chain(_anims);
158	var timer = (new Date()).getTime();
159	aspect.after(a,"onEnd",function(){
160	console.warn("delayTestChain running time:", (new Date()).getTime() - timer, "ms, expected:", a.duration, "ms");
161	d.callback(true);
162	}, true);
163	a.play();
164	return d;
165	}
166	},
167	{
168	name:"combineOnEnd",
169	timeout:1500,
170	runTest: function(t){
171	var d = new doh.Deferred();
172	var a = baseFx.fadeOut({ node:"foo2", duration:400 });
173	var b = baseFx.fadeIn({ node:"foo2", duration:400 });
174	var combine = fx.combine([a,b]);
175	aspect.after(combine,"onEnd",lang.hitch(d,"callback",true), true);
176	combine.play();
177	return d;
178	}
179
180	},
181	{
182	name:"combineOnPlay",
183	timeout:1500,
184	runTest: function(t){
185	var d = new doh.Deferred();
186	var a = baseFx.fadeOut({ node:"foo2", duration:400 });
187	var b = baseFx.fadeIn({ node:"foo2", duration:400 });
188	var combine = fx.combine([a,b]);
189	aspect.after(combine,"onPlay",lang.hitch(d,"callback",true), true);
190	combine.play();
191	return d;
192	}
193
194	},
195	{
196	name:"chainOnEnd",
197	timeout:1500,
198	runTest: function(t){
199	var d = new doh.Deferred();
200	var a = baseFx.fadeOut({ node:"foo2", duration:400 });
201	var b = baseFx.fadeIn({ node:"foo2", duration:400 });
202	var chain = fx.chain([a,b]);
203	aspect.after(chain,"onEnd",lang.hitch(d,"callback",true), true);
204	chain.play();
205	return d;
206	}
207
208	},
209	{
210	name:"chainOnPlay",
211	timeout:1500,
212	runTest: function(t){
213
214	var d = new doh.Deferred();
215	var a = baseFx.fadeOut({ node:"foo2", duration:200 });
216	var b = baseFx.fadeIn({ node:"foo2", duration:200 });
217	var chain = fx.chain([a,b]);
218	aspect.after(chain,"onPlay",lang.hitch(d,"callback",true), true);
219	chain.play();
220	return d;
221	}
222
223	},
224
225	{
226	name:"stopDelay",
227	timeout:1500,
228	runTest: function(t){
229
230	var d = new doh.Deferred();
231	var a = baseFx.fadeOut({ node: "foo2", delay:400 });
232	aspect.after(a, "onPlay", lang.hitch(d, "errback", true), true);
233	a.play();
234	a.stop();
235	setTimeout(function(){
236	d.callback(true);
237	}, 500);
238	return d;
239	}
240	},
241
242	{
243	name:"stopDelayPassed",
244	timeout:1500,
245	runTest: function(t){
246
247	var d = new doh.Deferred();
248	var b = baseFx.fadeIn({ node: "foo2" });
249	aspect.after(b, "onPlay", lang.hitch(d, "errback", true), true);
250	b.play(400);
251	b.stop();
252	setTimeout(function(){
253	d.callback(true);
254	}, 600);
255	return d;
256	}
257
258	},
259
260	function testToggler(){
261	var d = new doh.Deferred();
262	var t = new Toggler({
263	node: "foo",
264	hideDuration: 100,
265	hideFunc: fx.wipeOut,
266	showFunc: fx.wipeIn
267	});
268	t.hide();
269	setTimeout(function(){
270	var sa = t.show();
271	aspect.after(sa, "onEnd", lang.hitch(d, "callback", true), true);
272	}, 50);
273	return d;
274	},
275
276	function combineChain(t){
277	// test combining two chained() animations
278	var anim1 = fx.chain([
279	baseFx.fadeIn({ node:"chained" }),
280	baseFx.fadeOut({ node:"chained" })
281	]);
282	var anim2 = fx.chain([
283	baseFx.fadeOut({ node:"chainedtoo" }),
284	baseFx.fadeIn({ node:"chainedtoo" })
285	]);
286
287	var anim = fx.combine([anim1, anim2]);
288
289	var d = new doh.Deferred();
290	aspect.after(anim, "onEnd", lang.hitch(d, "callback", true), true);
291	anim.play();
292	},
293
294	function chainCombine(t){
295	// test chaining two combined() animations
296	var anim1 = fx.combine([
297	baseFx.fadeIn({ node:"chained" }),
298	baseFx.fadeOut({ node:"chainedtoo" })
299	]);
300	var anim2 = fx.combine([
301	baseFx.fadeOut({ node:"chained" }),
302	baseFx.fadeIn({ node:"chainedtoo" })
303	]);
304
305	var anim = fx.chain([anim1, anim2]);
306
307	var d = new doh.Deferred();
308	aspect.after(anim, "onEnd", lang.hitch(d, "callback", true), true);
309	anim.play();
310
311	},
312
313	function easingNames(t){
314	for(var i in easing){
315	t.assertTrue(lang.isFunction(easing[i]));
316	}
317	},
318
319	function easingReturns(t){
320	for(var i in easing){
321	t.assertTrue(!isNaN(easing[i](0.5)));
322	}
323	},
324
325	{
326	name:"onendStatus-chain",
327	timeout:1500,
328	runTest: function(t){
329	var d = new doh.Deferred;
330
331	var a1 = baseFx.fadeOut({ node:"a1" });
332	var a2 = baseFx.fadeOut({ node:"a2" });
333
334	var anim = fx.chain([a1, a2]);
335	aspect.after(anim, "onEnd", function(){
336	t.is("stopped", a1.status());
337	t.is("stopped", a2.status());
338	t.is("stopped", anim.status());
339	d.callback(true);
340	}, true);
341
342	anim.play();
343
344	return d;
345	}
346	},
347	{
348	name:"onendStatus-combine",
349	timeout:1500,
350	runTest: function(t){
351	var d = new doh.Deferred;
352
353	var a1 = baseFx.fadeOut({ node:"a1" });
354	var a2 = baseFx.fadeOut({ node:"a2" });
355
356	var anim = fx.combine([a1, a2]);
357	aspect.after(anim, "onEnd", function(){
358	t.is("stopped", a1.status());
359	t.is("stopped", a2.status());
360	setTimeout(function(){
361	t.is("stopped", anim.status());
362	d.callback(true);
363	}, 10);
364	}, true);
365
366	anim.play();
367	return d;
368	}
369	},
370	{
371	name: "wipeOut onStop",
372	timeout: 1500,
373	runTest: function(t){
374	dom.byId("foo").style.height = "auto";
375	dom.byId("foo").style.overflow = "visible";
376	var d = new doh.Deferred();
377	var w = fx.wipeOut({
378	node: "foo",
379	duration: 1000
380	});
381	aspect.after(w, "onStop", function(){
382	doh.t(dom.byId("foo").style.overflow == "visible");
383	d.callback(true);
384	}, true);
385	w.play();
386	setTimeout(function(){ w.stop(); }, 100);
387	return d;
388	}
389	},
390	{
391	name: "wipeIn onStop",
392	timeout: 1500,
393	runTest: function(t){
394	dom.byId("foo").style.height = "0px";
395	dom.byId("foo").style.overflow = "visible";
396	var d = new doh.Deferred();
397	var w = fx.wipeIn({
398	node: "foo",
399	duration: 1000
400	});
401	aspect.after(w, "onStop", function(){
402	doh.t(dom.byId("foo").style.overflow == "visible");
403	d.callback(true);
404	}, true);
405	w.play();
406	setTimeout(function(){ w.stop(); }, 100);
407	return d;
408	}
409	}
410	]
411	);
412	doh.run();
413	});
414	</script>
415	<style type="text/css">
416	@import "../resources/dojo.css";
417
418	body {
419	text-shadow: 0px 0px;
420	margin: 1em;
421	background-color: #DEDEDE;
422	}
423
424	.box {
425	color: #292929;
426	/* color: #424242; */
427	/* text-align: left; */
428	width: 300px;
429	border: 1px solid #BABABA;
430	background-color: white;
431	padding-left: 10px;
432	padding-right: 10px;
433	margin-left: 10px;
434	margin-bottom: 1em;
435	-o-border-radius: 10px;
436	-moz-border-radius: 12px;
437	-webkit-border-radius: 10px;
438	-webkit-box-shadow: 0px 3px 7px #adadad;
439	/* -opera-border-radius: 10px; */
440	border-radius: 10px;
441	-moz-box-sizing: border-box;
442	-opera-sizing: border-box;
443	-webkit-box-sizing: border-box;
444	-khtml-box-sizing: border-box;
445	box-sizing: border-box;
446	overflow: hidden;
447	/* position: absolute; */
448	}
449	</style>
450	</head>
451	<body>
452	<div class="box" id="a">a</div><div class="box" id="b">b</div>
453	<div class="box" id="c">c</div><div class="box" id="d">d</div>
454
455	<div id="foo" class="box">
456	<p>
457	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
458	semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
459	Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla
460	facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
461	semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum
462	magna. Sed vitae risus.
463	</p>
464	<p>
465	Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
466	imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer
467	lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean
468	id mi in massa bibendum suscipit. Integer eros. Nullam suscipit
469	mauris. In pellentesque. Mauris ipsum est, pharetra semper,
470	pharetra in, viverra quis, tellus. Etiam purus. Quisque egestas,
471	tortor ac cursus lacinia, felis leo adipiscing nisi, et rhoncus
472	elit dolor eget eros. Fusce ut quam. Suspendisse eleifend leo vitae
473	ligula. Nulla facilisi. Nulla rutrum, erat vitae lacinia dictum,
474	pede purus imperdiet lacus, ut semper velit ante id metus. Praesent
475	massa dolor, porttitor sed, pulvinar in, consequat ut, leo. Nullam
476	nec est. Aenean id risus blandit tortor pharetra congue.
477	Suspendisse pulvinar.
478	</p>
479	</div>
480	<div id="foo2">foo2</div>
481
482	<div>
483	<p id="chained">foo</p><p id="chainedtoo">bar</p>
484	</div>
485
486	<p id="a1">p</p><p id="a2">p</p>
487
488	</body>
489	</html>

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

Context Navigation

source: Dev/trunk/src/client/dojo/tests/fx.html @ 485

Download in other formats: