git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojo/tests/fx.html

   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 dojo.fx</title>
   6                 <script type="text/javascript" src="../dojo.js" djConfig="isDebug: true"></script>
   7                 <script type="text/javascript">
   8                         dojo.require("doh.runner");
   9                         dojo.require("dojo.fx");
  10
  11                         dojo.addOnLoad(function(){
  12                                 doh.register("t",
  13                                         [
  14                                                 function slideTo(t){
  15                                                         var s = dojo.fx.slideTo({
  16                                                                 node: "foo",
  17                                                                 duration: 500,
  18                                                                 left: 500,
  19                                                                 top: 50
  20                                                         }).play();
  21                                                         var d = new doh.Deferred();
  22                                                         dojo.connect(s, "onEnd", function(){
  23                                                                 doh.is(dojo.style("foo", "left"), 500);
  24                                                                 doh.is(dojo.style("foo", "top"), 50);
  25                                                                 with(dojo.byId("foo").style){
  26                                                                         position = left = top = "";
  27                                                                 }
  28                                                                 d.callback(true);
  29                                                         });
  30                                                         s.play();
  31                                                         return d;
  32                                                 },
  33
  34                                                 function wipeOut(t){
  35                                                         dojo.byId("foo").style.height = "";
  36                                                         var d = new doh.Deferred();
  37                                                         var s = dojo.fx.wipeOut({
  38                                                                 node: "foo",
  39                                                                 onEnd: function(){
  40                                                                         doh.t(dojo.style("foo", "height") < 5);
  41                                                                         d.callback(true);
  42                                                                 }
  43                                                         }).play();
  44                                                         return d;
  45                                                 },
  46
  47                                                 function wipeIn(t){
  48                                                         var d = new doh.Deferred();
  49                                                         setTimeout(function(){
  50                                                                 dojo.fx.wipeIn({
  51                                                                         node: "foo",
  52                                                                         onEnd: function(){
  53                                                                                 console.debug(dojo.style("foo", "height"));
  54                                                                                 doh.t(dojo.style("foo", "height") >  10);
  55                                                                                 d.callback(true);
  56                                                                         }
  57                                                                 }).play();
  58                                                         }, 10);
  59                                                         return d;
  60                                                 },
  61
  62                                                 {
  63                                                         name: "chain",
  64                                                         timeout: 1500,
  65                                                         runTest: function(t){
  66                                                                 dojo.byId("foo").style.height = "0px";
  67                                                                 var d = new doh.Deferred();
  68                                                                 var w = dojo.fx.wipeIn({
  69                                                                         node: "foo",
  70                                                                         duration: 500
  71                                                                 });
  72                                                                 var f = dojo.fadeOut({
  73                                                                         node: "foo",
  74                                                                         duration: 500
  75                                                                 });
  76                                                                 var a = dojo.fx.chain([w,f]);
  77                                                                 dojo.connect(a, "onEnd", function(){
  78                                                                         doh.t((w.status()=="stopped"&&f.status()=="stopped"));
  79                                                                         d.callback(true);
  80                                                                 });
  81                                                                 a.play();
  82                                                                 return d;
  83                                                         }
  84                                                 },
  85
  86                                                 {
  87                                                         name: "combine",
  88                                                         timeout: 1500,
  89                                                         runTest: function(t){
  90                                                                 dojo.byId("foo").style.height = "0px";
  91                                                                 var d = new doh.Deferred();
  92                                                                 var w = dojo.fx.wipeIn({
  93                                                                         node: "foo",
  94                                                                         duration: 500
  95                                                                 });
  96                                                                 var f = dojo.fadeIn({
  97                                                                         node: "foo",
  98                                                                         duration: 1000
  99                                                                 });
 100                                                                 var a = dojo.fx.combine([w,f]);
 101                                                                 dojo.connect(a, "onEnd", function(){
 102                                                                         doh.t((w.status()=="stopped"&&f.status()=="stopped"));
 103                                                                         d.callback(true);
 104                                                                 });
 105                                                                 a.play();
 106                                                                 return d;
 107                                                         }
 108                                                 },
 109                                                 {
 110                                                         name:"combineBeforeBegin",
 111                                                         timeout:1500,
 112                                                         runTest: function(t){
 113                                                                 var d = new doh.Deferred();
 114                                                                 var a = dojo.fadeOut({ node:"foo2", duration:400 });
 115                                                                 var b = dojo.fadeIn({ node:"foo2", duration:400 });
 116                                                                 var chain = dojo.fx.combine([a,b]);
 117                                                                 dojo.connect(chain,"beforeBegin",dojo.hitch(d,"callback",true));
 118                                                                 chain.play();
 119                                                                 return d;
 120                                                         }
 121
 122                                                 },
 123                                                 {
 124                                                         name:"delayTest",
 125                                                         timeout:2000,
 126                                                         runTest:function(t){
 127                                                                 var d = new doh.Deferred();
 128                                                                 var delay = 100;
 129                                                                 var _anims = [];
 130                                                                 var nodes = ["a","b","c","d"];
 131                                                                 dojo.forEach(nodes,function(n){
 132                                                                         _anims.push(dojo.fadeOut({ node:n, duration:100, delay: delay += 100 }));
 133                                                                 });
 134                                                                 var a = dojo.fx.combine(_anims);
 135                                                                 var timer = (new Date()).getTime();
 136                                                                 dojo.connect(a,"onEnd",function(){
 137                                                                         console.warn("delayTest running time:", (new Date()).getTime() - timer, "ms, expected:", a.duration, "ms");
 138                                                                         d.callback(true);
 139                                                                 });
 140                                                                 a.play();
 141                                                                 return d;
 142                                                         }
 143                                                 },
 144                                                 {
 145                                                         name:"delayTestChain",
 146                                                         timeout:2200,
 147                                                         runTest:function(t){
 148                                                                 var d = new doh.Deferred();
 149                                                                 var delay = 100;
 150                                                                 var _anims = [];
 151                                                                 var nodes = ["a","b","c","d"];
 152                                                                 dojo.forEach(nodes,function(n){
 153                                                                         _anims.push(dojo.fadeIn({ node:n, duration:100, delay: delay += 100 }));
 154                                                                 });
 155                                                                 var a = dojo.fx.chain(_anims);
 156                                                                 var timer = (new Date()).getTime();
 157                                                                 dojo.connect(a,"onEnd",function(){
 158                                                                         console.warn("delayTestChain running time:", (new Date()).getTime() - timer, "ms, expected:", a.duration, "ms");
 159                                                                         d.callback(true);
 160                                                                 });
 161                                                                 a.play();
 162                                                                 return d;
 163                                                         }
 164                                                 },
 165                                                 {
 166                                                         name:"combineOnEnd",
 167                                                         timeout:1500,
 168                                                         runTest: function(t){
 169                                                                 var d = new doh.Deferred();
 170                                                                 var a = dojo.fadeOut({ node:"foo2", duration:400 });
 171                                                                 var b = dojo.fadeIn({ node:"foo2", duration:400 });
 172                                                                 var combine = dojo.fx.combine([a,b]);
 173                                                                 dojo.connect(combine,"onEnd",dojo.hitch(d,"callback",true));
 174                                                                 combine.play();
 175                                                                 return d;
 176                                                         }
 177
 178                                                 },
 179                                                 {
 180                                                         name:"combineOnPlay",
 181                                                         timeout:1500,
 182                                                         runTest: function(t){
 183                                                                 var d = new doh.Deferred();
 184                                                                 var a = dojo.fadeOut({ node:"foo2", duration:400 });
 185                                                                 var b = dojo.fadeIn({ node:"foo2", duration:400 });
 186                                                                 var combine = dojo.fx.combine([a,b]);
 187                                                                 dojo.connect(combine,"onPlay",dojo.hitch(d,"callback",true));
 188                                                                 combine.play();
 189                                                                 return d;
 190                                                         }
 191
 192                                                 },
 193                                                 {
 194                                                         name:"chainOnEnd",
 195                                                         timeout:1500,
 196                                                         runTest: function(t){
 197                                                                 var d = new doh.Deferred();
 198                                                                 var a = dojo.fadeOut({ node:"foo2", duration:400 });
 199                                                                 var b = dojo.fadeIn({ node:"foo2", duration:400 });
 200                                                                 var chain = dojo.fx.chain([a,b]);
 201                                                                 dojo.connect(chain,"onEnd",dojo.hitch(d,"callback",true));
 202                                                                 chain.play();
 203                                                                 return d;
 204                                                         }
 205
 206                                                 },
 207                                                 {
 208                                                         name:"chainOnPlay",
 209                                                         timeout:1500,
 210                                                         runTest: function(t){
 211
 212                                                                 var d = new doh.Deferred();
 213                                                                 var a = dojo.fadeOut({ node:"foo2", duration:200 });
 214                                                                 var b = dojo.fadeIn({ node:"foo2", duration:200 });
 215                                                                 var chain = dojo.fx.chain([a,b]);
 216                                                                 dojo.connect(chain,"onPlay",dojo.hitch(d,"callback",true));
 217                                                                 chain.play();
 218                                                                 return d;
 219                                                         }
 220
 221                                                 },
 222
 223                                                 function Toggler(){
 224                                                         var d = new doh.Deferred();
 225                                                         var t = new dojo.fx.Toggler({
 226                                                             node: "foo",
 227                                                             hideDuration: 100,
 228                                                                 hideFunc: dojo.fx.wipeOut,
 229                                                                 showFunc: dojo.fx.wipeIn
 230                                                         });
 231                                                         t.hide();
 232                                                         setTimeout(function(){
 233                                                                 var sa = t.show();
 234                                                                 dojo.connect(sa, "onEnd", dojo.hitch(d, "callback", true));
 235                                                         }, 50);
 236                                                         return d;
 237                                                 }
 238                                         ]
 239                                 );
 240                                 doh.run();
 241                         });
 242                 </script>
 243                 <style type="text/css">
 244                         @import "../resources/dojo.css";
 245
 246                         body {
 247                                 text-shadow: 0px 0px;
 248                                 margin: 1em;
 249                                 background-color: #DEDEDE;
 250                         }
 251
 252                         .box {
 253                                 color: #292929;
 254                                 /* color: #424242; */
 255                                 /* text-align: left; */
 256                                 width: 300px;
 257                                 border: 1px solid #BABABA;
 258                                 background-color: white;
 259                                 padding-left: 10px;
 260                                 padding-right: 10px;
 261                                 margin-left: 10px;
 262                                 margin-bottom: 1em;
 263                                 -o-border-radius: 10px;
 264                                 -moz-border-radius: 12px;
 265                                 -webkit-border-radius: 10px;
 266                                 -webkit-box-shadow: 0px 3px 7px #adadad;
 267                                 /* -opera-border-radius: 10px; */
 268                                 border-radius: 10px;
 269                                 -moz-box-sizing: border-box;
 270                                 -opera-sizing: border-box;
 271                                 -webkit-box-sizing: border-box;
 272                                 -khtml-box-sizing: border-box;
 273                                 box-sizing: border-box;
 274                                 overflow: hidden;
 275                                 /* position: absolute; */
 276                         }
 277                 </style>
 278         </head>
 279         <body>
 280                 <div class="box" id="a">a</div><div class="box" id="b">b</div>
 281                 <div class="box" id="c">c</div><div class="box" id="d">d</div>
 282
 283                 <div id="foo" class="box">
 284                         <p>
 285                         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
 286                         semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
 287                         Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla
 288                         facilisi.  Maecenas luctus venenatis nulla. In sit amet dui non mi
 289                         semper iaculis.  Sed molestie tortor at ipsum. Morbi dictum rutrum
 290                         magna. Sed vitae risus.
 291                         </p>
 292                         <p>
 293                         Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
 294                         imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer
 295                         lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean
 296                         id mi in massa bibendum suscipit. Integer eros. Nullam suscipit
 297                         mauris. In pellentesque. Mauris ipsum est, pharetra semper,
 298                         pharetra in, viverra quis, tellus. Etiam purus. Quisque egestas,
 299                         tortor ac cursus lacinia, felis leo adipiscing nisi, et rhoncus
 300                         elit dolor eget eros. Fusce ut quam. Suspendisse eleifend leo vitae
 301                         ligula. Nulla facilisi. Nulla rutrum, erat vitae lacinia dictum,
 302                         pede purus imperdiet lacus, ut semper velit ante id metus. Praesent
 303                         massa dolor, porttitor sed, pulvinar in, consequat ut, leo. Nullam
 304                         nec est. Aenean id risus blandit tortor pharetra congue.
 305                         Suspendisse pulvinar.
 306                         </p>
 307                 </div>
 308                 <div id="foo2">foo2</div>
 309         </body>
 310 </html>