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

   1 <html>
   2         <head>
   3                 <title>testing Core FX</title>
   4                 <style type="text/css">
   5                         @import "../../resources/dojo.css";
   6                 </style>
   7                 <script type="text/javascript"
   8                         src="../../dojo.js"
   9                         djConfig="isDebug: true"></script>
  10                 <script type="text/javascript" src="../../_base/fx.js"></script>
  11                 <script type="text/javascript">
  12                         var duration = 500;
  13                         var timeout = 750;
  14                         dojo.require("doh.runner");
  15                         dojo.addOnLoad(function(){
  16                                 doh.register("t",
  17                                         [
  18                                                 {
  19                                                         name: "fadeOut",
  20                                                         timeout: timeout,
  21                                                         runTest: function(){
  22                                                                 var opacity = dojo.style('foo', 'opacity');
  23                                                                 doh.is(1, 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;
  29                                                                         doh.is(0, opacity);
  30                                                                         doh.t(elapsed >= duration);
  31                                                                         d.callback(true);
  32                                                                 });
  33                                                                 anim._start = new Date();
  34                                                                 anim.play();
  35                                                                 return d;
  36                                                         }
  37                                                 },
  38                                                 {
  39                                                         name: "fadeIn",
  40                                                         timeout: timeout,
  41                                                         runTest: function(){
  42                                                                 var opacity = dojo.style('foo', 'opacity');
  43                                                                 doh.is(0, 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;
  49                                                                         doh.is(1, opacity);
  50                                                                         doh.t(elapsed >= duration);
  51                                                                         d.callback(true);
  52                                                                 });
  53                                                                 anim._start = new Date();
  54                                                                 anim.play();
  55                                                                 return d;
  56                                                         }
  57                                                 },
  58                                                 {
  59                                                         name: "animateColor",
  60                                                         timeout: timeout,
  61                                                         runTest: function(){
  62                                                                 var d = new doh.Deferred();
  63                                                                 var anim = dojo.animateProperty({
  64                                                                         node: "foo",
  65                                                                         duration: duration,
  66                                                                         properties: {
  67                                                                                 color:                          { start: "black", end: "white" },
  68                                                                                 backgroundColor:        { start: "white", end: "black" }
  69                                                                         }
  70                                                                 });
  71                                                                 dojo.connect(anim, "onEnd", anim, function(){
  72                                                                         d.callback(true);
  73                                                                 });
  74                                                                 anim.play();
  75                                                                 return d;
  76                                                         }
  77                                                 },
  78                                                 {
  79                                                         name: "animateColorBack",
  80                                                         timeout: timeout,
  81                                                         runTest: function(){
  82                                                                 var d = new doh.Deferred();
  83                                                                 var anim = dojo.animateProperty({
  84                                                                         node: "foo",
  85                                                                         duration: duration,
  86                                                                         properties: {
  87                                                                                 color:                          { end: "black" },
  88                                                                                 backgroundColor:        { end: "#5d81b4" },
  89                                                                                 letterSpacing:          { start: 0, end: 10 }
  90                                                                         }
  91                                                                 });
  92                                                                 dojo.connect(anim, "onEnd", anim, function(){
  93                                                                         d.callback(true);
  94                                                                 });
  95                                                                 anim.play();
  96                                                                 return d;
  97                                                         }
  98                                                 },
  99                                                 {
 100                                                         name: "animateHeight",
 101                                                         timeout: timeout,
 102                                                         runTest: function(t){
 103                                                                 dojo.byId("foo").style.height = "";
 104                                                                 var startHeight = dojo.marginBox("foo").h;
 105                                                                 var endHeight = Math.round(startHeight / 2);
 106
 107                                                                 var anim = dojo.animateProperty({
 108                                                                         node: "foo",
 109                                                                         properties: { height: { end: endHeight } },
 110                                                                         duration: duration
 111                                                                 });
 112
 113                                                                 var d = new doh.Deferred();
 114
 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);
 120                                                                         d.callback(true);
 121                                                                 });
 122
 123                                                                 anim.play();
 124                                                                 return d;
 125                                                         }
 126                                                 },
 127                                                 {
 128                                                         name: "animateHeight_defaults_syntax",
 129                                                         timeout: timeout,
 130                                                         runTest: function(){
 131                                                                 dojo.byId("foo").style.height = "";
 132                                                                 var startHeight = dojo.marginBox("foo").h;
 133                                                                 var endHeight = Math.round(startHeight / 2);
 134
 135                                                                 var anim = dojo.animateProperty({
 136                                                                         node: "foo",
 137                                                                         properties: { height: endHeight },
 138                                                                         duration: duration
 139                                                                 });
 140
 141                                                                 var d = new doh.Deferred();
 142
 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);
 148                                                                         d.callback(true);
 149                                                                 });
 150
 151                                                                 anim.play();
 152                                                                 return d;
 153                                                         }
 154                                                 },
 155                                                 {
 156                                                         name: "inlineWidth",
 157                                                         timeout: timeout,
 158                                                         runTest: function(){
 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);
 163
 164                                                                 var anim = dojo.animateProperty({
 165                                                                         node: "bar",
 166                                                                         properties: { width: endWidth },
 167                                                                         duration: duration
 168                                                                 });
 169
 170                                                                 var d = new doh.Deferred();
 171
 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);
 176                                                                         d.callback(true);
 177                                                                 });
 178
 179                                                                 anim.play();
 180                                                                 return d;
 181                                                         }
 182                                                 },
 183                                                 {
 184                                                         name: "anim",
 185                                                         timeout: timeout+500,
 186                                                         runTest: function(){
 187                                                                 var id = "baz";
 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);
 193
 194                                                                 var d = new doh.Deferred();
 195                                                                 var anim = dojo.anim(
 196                                                                         id,
 197                                                                         {
 198                                                                                 width: endWidth,
 199                                                                                 opacity: 0
 200                                                                         },
 201                                                                         duration,
 202                                                                         null,
 203                                                                         function(){
 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);
 209                                                                                 d.callback(true);
 210                                                                         },
 211                                                                         500
 212                                                                 );
 213                                                                 return d;
 214                                                         }
 215                                                 },
 216                                                 {
 217                                                         name: "anim_defaults",
 218                                                         timeout: 1000,
 219                                                         runTest: function(){
 220                                                                 var id = "thud";
 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);
 225
 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);
 232                                                                         d.callback(true);
 233                                                                 });
 234                                                                 return d;
 235                                                         }
 236                                                 }
 237                                         ]
 238                                 );
 239                                 doh.run();
 240                         });
 241                 </script>
 242                 <style type="text/css">
 243                         body {
 244                                 margin: 1em;
 245                                 background-color: #DEDEDE;
 246                         }
 247
 248                         .box {
 249                                 color: #292929;
 250                                 /* color: #424242; */
 251                                 /* text-align: left; */
 252                                 width: 300px;
 253                                 border: 1px solid #BABABA;
 254                                 background-color: white;
 255                                 padding-left: 10px;
 256                                 padding-right: 10px;
 257                                 margin-left: 10px;
 258                                 -o-border-radius: 10px;
 259                                 -moz-border-radius: 12px;
 260                                 -webkit-border-radius: 10px;
 261                                 /* -opera-border-radius: 10px; */
 262                                 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;
 268                                 overflow: hidden;
 269                                 /* position: absolute; */
 270                         }
 271                 </style>
 272         </head>
 273         <body>
 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>
 278                 </form>
 279                 <div id="foo" class="box" style="float: left;">
 280                         <p>
 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.
 287                         </p>
 288                         <p>
 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.
 302                         </p>
 303                 </div>
 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
 310                 risus.
 311                 </p>
 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.
 325                 </p>
 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.
 339                 </p>
 340         </body>
 341 </html>
 342