--- /dev/null
+<html>
+ <head>
+ <title>testing Core FX</title>
+ <style type="text/css">
+ @import "../../resources/dojo.css";
+ </style>
+ <script type="text/javascript"
+ src="../../dojo.js"
+ djConfig="isDebug: true"></script>
+ <script type="text/javascript" src="../../_base/fx.js"></script>
+ <script type="text/javascript">
+ var duration = 500;
+ var timeout = 750;
+ dojo.require("doh.runner");
+ dojo.addOnLoad(function(){
+ doh.register("t",
+ [
+ {
+ name: "fadeOut",
+ timeout: timeout,
+ runTest: function(){
+ var opacity = dojo.style('foo', 'opacity');
+ doh.is(1, opacity);
+ var anim = dojo.fadeOut({ node: 'foo', duration: duration });
+ var d = new doh.Deferred();
+ dojo.connect(anim, "onEnd", function(){
+ var opacity = dojo.style('foo', 'opacity');
+ var elapsed = (new Date()) - anim._start;
+ doh.is(0, opacity);
+ doh.t(elapsed >= duration);
+ d.callback(true);
+ });
+ anim._start = new Date();
+ anim.play();
+ return d;
+ }
+ },
+ {
+ name: "fadeIn",
+ timeout: timeout,
+ runTest: function(){
+ var opacity = dojo.style('foo', 'opacity');
+ doh.is(0, opacity);
+ var anim = dojo.fadeIn({ node: 'foo', duration: duration });
+ var d = new doh.Deferred();
+ dojo.connect(anim, "onEnd", function(){
+ var opacity = dojo.style('foo', 'opacity');
+ var elapsed = (new Date()) - anim._start;
+ doh.is(1, opacity);
+ doh.t(elapsed >= duration);
+ d.callback(true);
+ });
+ anim._start = new Date();
+ anim.play();
+ return d;
+ }
+ },
+ {
+ name: "animateColor",
+ timeout: timeout,
+ runTest: function(){
+ var d = new doh.Deferred();
+ var anim = dojo.animateProperty({
+ node: "foo",
+ duration: duration,
+ properties: {
+ color: { start: "black", end: "white" },
+ backgroundColor: { start: "white", end: "black" }
+ }
+ });
+ dojo.connect(anim, "onEnd", anim, function(){
+ d.callback(true);
+ });
+ anim.play();
+ return d;
+ }
+ },
+ {
+ name: "animateColorBack",
+ timeout: timeout,
+ runTest: function(){
+ var d = new doh.Deferred();
+ var anim = dojo.animateProperty({
+ node: "foo",
+ duration: duration,
+ properties: {
+ color: { end: "black" },
+ backgroundColor: { end: "#5d81b4" },
+ letterSpacing: { start: 0, end: 10 }
+ }
+ });
+ dojo.connect(anim, "onEnd", anim, function(){
+ d.callback(true);
+ });
+ anim.play();
+ return d;
+ }
+ },
+ {
+ name: "animateHeight",
+ timeout: timeout,
+ runTest: function(t){
+ dojo.byId("foo").style.height = "";
+ var startHeight = dojo.marginBox("foo").h;
+ var endHeight = Math.round(startHeight / 2);
+
+ var anim = dojo.animateProperty({
+ node: "foo",
+ properties: { height: { end: endHeight } },
+ duration: duration
+ });
+
+ var d = new doh.Deferred();
+
+ dojo.connect(anim, "onEnd", anim, function(){
+ var elapsed = (new Date().valueOf()) - anim._startTime;
+ doh.t(elapsed >= duration);
+ var height = dojo.marginBox("foo").h;
+ doh.is(height, endHeight);
+ d.callback(true);
+ });
+
+ anim.play();
+ return d;
+ }
+ },
+ {
+ name: "animateHeight_defaults_syntax",
+ timeout: timeout,
+ runTest: function(){
+ dojo.byId("foo").style.height = "";
+ var startHeight = dojo.marginBox("foo").h;
+ var endHeight = Math.round(startHeight / 2);
+
+ var anim = dojo.animateProperty({
+ node: "foo",
+ properties: { height: endHeight },
+ duration: duration
+ });
+
+ var d = new doh.Deferred();
+
+ dojo.connect(anim, "onEnd", anim, function(){
+ var elapsed = (new Date().valueOf()) - anim._startTime;
+ doh.t(elapsed >= duration);
+ var height = dojo.marginBox("foo").h;
+ doh.is(height, endHeight);
+ d.callback(true);
+ });
+
+ anim.play();
+ return d;
+ }
+ },
+ {
+ name: "inlineWidth",
+ timeout: timeout,
+ runTest: function(){
+ dojo.style("foo", "display", "none");
+ dojo.style("bar", "display", "");
+ var startWidth = dojo.marginBox("bar").w;
+ var endWidth = Math.round(startWidth / 2);
+
+ var anim = dojo.animateProperty({
+ node: "bar",
+ properties: { width: endWidth },
+ duration: duration
+ });
+
+ var d = new doh.Deferred();
+
+ dojo.connect(anim, "onEnd", anim, function(){
+ var elapsed = (new Date().valueOf()) - anim._startTime;
+ doh.t(elapsed >= duration);
+ doh.is(dojo.marginBox("bar").w, endWidth);
+ d.callback(true);
+ });
+
+ anim.play();
+ return d;
+ }
+ },
+ {
+ name: "anim",
+ timeout: timeout+500,
+ runTest: function(){
+ var id = "baz";
+ dojo.style("bar", "display", "none");
+ dojo.style(id, "display", "");
+ var kickoff = new Date().valueOf();
+ var startWidth = dojo.marginBox(id).w;
+ var endWidth = Math.round(startWidth / 2);
+
+ var d = new doh.Deferred();
+ var anim = dojo.anim(
+ id,
+ {
+ width: endWidth,
+ opacity: 0
+ },
+ duration,
+ null,
+ function(){
+ var elapsed = (new Date().valueOf()) - anim._startTime;
+ doh.t(elapsed >= duration);
+ doh.t((new Date().valueOf()) >= (kickoff+duration+500));
+ doh.is(dojo.marginBox(id).w, endWidth);
+ doh.is(dojo.style(id, "opacity"), 0);
+ d.callback(true);
+ },
+ 500
+ );
+ return d;
+ }
+ },
+ {
+ name: "anim_defaults",
+ timeout: 1000,
+ runTest: function(){
+ var id = "thud";
+ dojo.style("baz", "display", "none");
+ dojo.style(id, "display", "");
+ var startWidth = dojo.marginBox(id).w;
+ var endWidth = Math.round(startWidth / 2);
+
+ var d = new doh.Deferred();
+ var anim = dojo.anim(id, { width: endWidth });
+ dojo.connect(anim, "onEnd", function(){
+ var elapsed = (new Date().valueOf()) - anim._startTime;
+ doh.t(elapsed >= dojo._Animation.prototype.duration); // the default
+ doh.is(dojo.marginBox(id).w, endWidth);
+ d.callback(true);
+ });
+ return d;
+ }
+ }
+ ]
+ );
+ doh.run();
+ });
+ </script>
+ <style type="text/css">
+ body {
+ margin: 1em;
+ background-color: #DEDEDE;
+ }
+
+ .box {
+ color: #292929;
+ /* color: #424242; */
+ /* text-align: left; */
+ width: 300px;
+ border: 1px solid #BABABA;
+ background-color: white;
+ padding-left: 10px;
+ padding-right: 10px;
+ margin-left: 10px;
+ -o-border-radius: 10px;
+ -moz-border-radius: 12px;
+ -webkit-border-radius: 10px;
+ /* -opera-border-radius: 10px; */
+ border-radius: 10px;
+ -moz-box-sizing: border-box;
+ -opera-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ -khtml-box-sizing: border-box;
+ box-sizing: border-box;
+ overflow: hidden;
+ /* position: absolute; */
+ }
+ </style>
+ </head>
+ <body>
+ <h1>testing Core FX</h1>
+ <form name="testForm">
+ <input type="button" onClick="dojo.fadeOut({ node: 'foo', duration: 1000 }).play()" value="fade out"></input>
+ <input type="button" onClick="dojo.fadeIn({ node: 'foo', duration: 1000 }).play()" value="fade in"></input>
+ </form>
+ <div id="foo" class="box" style="float: left;">
+ <p>
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
+ semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
+ Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla
+ facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
+ semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum
+ magna. Sed vitae risus.
+ </p>
+ <p>
+ Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
+ imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer
+ lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean
+ id mi in massa bibendum suscipit. Integer eros. Nullam suscipit
+ mauris. In pellentesque. Mauris ipsum est, pharetra semper,
+ pharetra in, viverra quis, tellus. Etiam purus. Quisque egestas,
+ tortor ac cursus lacinia, felis leo adipiscing nisi, et rhoncus
+ elit dolor eget eros. Fusce ut quam. Suspendisse eleifend leo vitae
+ ligula. Nulla facilisi. Nulla rutrum, erat vitae lacinia dictum,
+ pede purus imperdiet lacus, ut semper velit ante id metus. Praesent
+ massa dolor, porttitor sed, pulvinar in, consequat ut, leo. Nullam
+ nec est. Aenean id risus blandit tortor pharetra congue.
+ Suspendisse pulvinar.
+ </p>
+ </div>
+ <p id="bar" style="display: none;">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper
+ sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta
+ rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
+ Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
+ Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
+ risus.
+ </p>
+ <p id="baz" style="display: none;">
+ Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
+ imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
+ nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
+ massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
+ pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
+ quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
+ felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
+ quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
+ rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
+ semper velit ante id metus. Praesent massa dolor, porttitor sed,
+ pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
+ tortor pharetra congue. Suspendisse pulvinar.
+ </p>
+ <p id="thud" style="display: none;">
+ Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
+ imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
+ nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
+ massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
+ pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
+ quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
+ felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
+ quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
+ rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
+ semper velit ante id metus. Praesent massa dolor, porttitor sed,
+ pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
+ tortor pharetra congue. Suspendisse pulvinar.
+ </p>
+ </body>
+</html>
+
projects / eow / blobdiff