3 <title>testing Core FX</title>
4 <style type="text/css">
5 @import "../../resources/dojo.css";
7 <script type="text/javascript"
9 djConfig="isDebug: true"></script>
10 <script type="text/javascript" src="../../_base/fx.js"></script>
11 <script type="text/javascript">
14 dojo.require("doh.runner");
15 dojo.addOnLoad(function(){
22 var opacity = dojo.style('foo', 'opacity');
24 var anim = dojo.fadeOut({ node: 'foo', duration: duration });
25 var d = new doh.Deferred();
26 dojo.connect(anim, "onEnd", function(){
27 var opacity = dojo.style('foo', 'opacity');
28 var elapsed = (new Date()) - anim._start;
30 doh.t(elapsed >= duration);
33 anim._start = new Date();
42 var opacity = dojo.style('foo', 'opacity');
44 var anim = dojo.fadeIn({ node: 'foo', duration: duration });
45 var d = new doh.Deferred();
46 dojo.connect(anim, "onEnd", function(){
47 var opacity = dojo.style('foo', 'opacity');
48 var elapsed = (new Date()) - anim._start;
50 doh.t(elapsed >= duration);
53 anim._start = new Date();
62 var d = new doh.Deferred();
63 var anim = dojo.animateProperty({
67 color: { start: "black", end: "white" },
68 backgroundColor: { start: "white", end: "black" }
71 dojo.connect(anim, "onEnd", anim, function(){
79 name: "animateColorBack",
82 var d = new doh.Deferred();
83 var anim = dojo.animateProperty({
87 color: { end: "black" },
88 backgroundColor: { end: "#5d81b4" },
89 letterSpacing: { start: 0, end: 10 }
92 dojo.connect(anim, "onEnd", anim, function(){
100 name: "animateHeight",
102 runTest: function(t){
103 dojo.byId("foo").style.height = "";
104 var startHeight = dojo.marginBox("foo").h;
105 var endHeight = Math.round(startHeight / 2);
107 var anim = dojo.animateProperty({
109 properties: { height: { end: endHeight } },
113 var d = new doh.Deferred();
115 dojo.connect(anim, "onEnd", anim, function(){
116 var elapsed = (new Date().valueOf()) - anim._startTime;
117 doh.t(elapsed >= duration);
118 var height = dojo.marginBox("foo").h;
119 doh.is(height, endHeight);
128 name: "animateHeight_defaults_syntax",
131 dojo.byId("foo").style.height = "";
132 var startHeight = dojo.marginBox("foo").h;
133 var endHeight = Math.round(startHeight / 2);
135 var anim = dojo.animateProperty({
137 properties: { height: endHeight },
141 var d = new doh.Deferred();
143 dojo.connect(anim, "onEnd", anim, function(){
144 var elapsed = (new Date().valueOf()) - anim._startTime;
145 doh.t(elapsed >= duration);
146 var height = dojo.marginBox("foo").h;
147 doh.is(height, endHeight);
159 dojo.style("foo", "display", "none");
160 dojo.style("bar", "display", "");
161 var startWidth = dojo.marginBox("bar").w;
162 var endWidth = Math.round(startWidth / 2);
164 var anim = dojo.animateProperty({
166 properties: { width: endWidth },
170 var d = new doh.Deferred();
172 dojo.connect(anim, "onEnd", anim, function(){
173 var elapsed = (new Date().valueOf()) - anim._startTime;
174 doh.t(elapsed >= duration);
175 doh.is(dojo.marginBox("bar").w, endWidth);
185 timeout: timeout+500,
188 dojo.style("bar", "display", "none");
189 dojo.style(id, "display", "");
190 var kickoff = new Date().valueOf();
191 var startWidth = dojo.marginBox(id).w;
192 var endWidth = Math.round(startWidth / 2);
194 var d = new doh.Deferred();
195 var anim = dojo.anim(
204 var elapsed = (new Date().valueOf()) - anim._startTime;
205 doh.t(elapsed >= duration);
206 doh.t((new Date().valueOf()) >= (kickoff+duration+500));
207 doh.is(dojo.marginBox(id).w, endWidth);
208 doh.is(dojo.style(id, "opacity"), 0);
217 name: "anim_defaults",
221 dojo.style("baz", "display", "none");
222 dojo.style(id, "display", "");
223 var startWidth = dojo.marginBox(id).w;
224 var endWidth = Math.round(startWidth / 2);
226 var d = new doh.Deferred();
227 var anim = dojo.anim(id, { width: endWidth });
228 dojo.connect(anim, "onEnd", function(){
229 var elapsed = (new Date().valueOf()) - anim._startTime;
230 doh.t(elapsed >= dojo._Animation.prototype.duration); // the default
231 doh.is(dojo.marginBox(id).w, endWidth);
242 <style type="text/css">
245 background-color: #DEDEDE;
250 /* color: #424242; */
251 /* text-align: left; */
253 border: 1px solid #BABABA;
254 background-color: white;
258 -o-border-radius: 10px;
259 -moz-border-radius: 12px;
260 -webkit-border-radius: 10px;
261 /* -opera-border-radius: 10px; */
263 -moz-box-sizing: border-box;
264 -opera-sizing: border-box;
265 -webkit-box-sizing: border-box;
266 -khtml-box-sizing: border-box;
267 box-sizing: border-box;
269 /* position: absolute; */
274 <h1>testing Core FX</h1>
275 <form name="testForm">
276 <input type="button" onClick="dojo.fadeOut({ node: 'foo', duration: 1000 }).play()" value="fade out"></input>
277 <input type="button" onClick="dojo.fadeIn({ node: 'foo', duration: 1000 }).play()" value="fade in"></input>
279 <div id="foo" class="box" style="float: left;">
281 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
282 semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
283 Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla
284 facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
285 semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum
286 magna. Sed vitae risus.
289 Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
290 imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer
291 lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean
292 id mi in massa bibendum suscipit. Integer eros. Nullam suscipit
293 mauris. In pellentesque. Mauris ipsum est, pharetra semper,
294 pharetra in, viverra quis, tellus. Etiam purus. Quisque egestas,
295 tortor ac cursus lacinia, felis leo adipiscing nisi, et rhoncus
296 elit dolor eget eros. Fusce ut quam. Suspendisse eleifend leo vitae
297 ligula. Nulla facilisi. Nulla rutrum, erat vitae lacinia dictum,
298 pede purus imperdiet lacus, ut semper velit ante id metus. Praesent
299 massa dolor, porttitor sed, pulvinar in, consequat ut, leo. Nullam
300 nec est. Aenean id risus blandit tortor pharetra congue.
301 Suspendisse pulvinar.
304 <p id="bar" style="display: none;">
305 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper
306 sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta
307 rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
308 Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
309 Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
312 <p id="baz" style="display: none;">
313 Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
314 imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
315 nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
316 massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
317 pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
318 quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
319 felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
320 quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
321 rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
322 semper velit ante id metus. Praesent massa dolor, porttitor sed,
323 pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
324 tortor pharetra congue. Suspendisse pulvinar.
326 <p id="thud" style="display: none;">
327 Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
328 imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
329 nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
330 massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
331 pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
332 quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
333 felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
334 quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
335 rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
336 semper velit ante id metus. Praesent massa dolor, porttitor sed,
337 pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
338 tortor pharetra congue. Suspendisse pulvinar.