Added an initial version of the new animation test suite. (You should never...

Added an initial version of the new animation test suite. (You should never see red on the suite page - an error message will be generated wherever possible.)

Makefile

@@ -117,6 +117,8 @@ test: ${JQ}
 	@@echo " - Copying over script files."
 	@@cp -fR ${BUILD_DIR}/test/data ${TEST_DIR}/data
 	@@cp -f ${BUILD_DIR}/test/index.html ${TEST_DIR}
+	@@cp -f ${BUILD_DIR}/test/fx.html ${TEST_DIR}
+	@@cp -f ${BUILD_DIR}/test/cow.jpg ${TEST_DIR}
 
 	@@echo " - Compiling Test Cases"
 	@@${JAR} ${BUILD_DIR}/test/test.js ${JQ} ${TEST_DIR}

build.xml

@@ -110,6 +110,8 @@
             <fileset dir="${BUILD_DIR}/test/data/" />
         </copy>
         <copy todir="${TEST_DIR}" file="${BUILD_DIR}/test/index.html" />
+        <copy todir="${TEST_DIR}" file="${BUILD_DIR}/test/fx.html" />
+        <copy todir="${TEST_DIR}" file="${BUILD_DIR}/test/cow.jpg" />
         <echo message="Test Suite built." />
     </target>
 

build/test/fx.html

+<html>
+<head>
+<title>Animation Test Suite</title>
+<script src="../dist/jquery.js"></script>
+<style>
+div#tests h4 {
+	background: red;
+}
+
+div#tests h4.pass {
+	background: green;
+}
+
+div#tests div.box {
+	background: red url(cow.jpg) no-repeat;
+	overflow: hidden;
+	border: 2px solid #000;
+}
+
+div#tests div.overflow {
+	overflow: visible;
+}
+
+div.inline {
+	display: inline;
+}
+
+div.autoheight {
+	height: auto;
+}
+
+div.autowidth {
+	width: auto;
+}
+
+div.autoopacity {
+	opacity: auto;
+}
+
+div.largewidth {
+	width: 100px;
+}
+
+div.largeheight {
+	height: 100px;
+}
+
+div.largeopacity {
+	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
+}
+
+div.medwidth {
+	width: 50px;
+}
+
+div.medheight {
+	height: 50px;
+}
+
+div.medopacity {
+	opacity: 0.5;
+	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
+}
+
+div.nowidth {
+	width: 0px;
+}
+
+div.noheight {
+	height: 0px;
+}
+
+div.noopacity {
+	opacity: 0;
+	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
+}
+
+div.hidden {
+	display: none;
+}
+
+div#tests div.widewidth {
+	background-repeat: repeat-x;
+}
+
+div#tests div.wideheight {
+	background-repeat: repeat-y;
+}
+
+div#tests div.widewidth.wideheight {
+	background-repeat: repeat;
+}
+
+div#tests div.noback {
+	background-image: none;
+}
+</style>
+<script>
+var visible = {
+	Normal: function(elem){},
+	"CSS Hidden": function(elem){
+		$(this).addClass("hidden");
+	},
+	"JS Hidden": function(elem){
+		$(this).hide();
+	}
+};
+
+var from = {
+	"CSS Auto": function(elem,prop){
+		$(elem).addClass("auto" + prop)
+			.text("This is a long string of text.");
+		return "";
+	},
+	"JS Auto": function(elem,prop){
+		$(elem).css(prop,"auto")
+			.text("This is a long string of text.");
+		return "";
+	},
+	"CSS 100": function(elem,prop){
+		$(elem).addClass("large" + prop);
+		return "";
+	},
+	"JS 100": function(elem,prop){
+		$(elem).css(prop,prop == "opacity" ? 1 : "100px");
+		return prop == "opacity" ? 1 : 100;
+	},
+	"CSS 50": function(elem,prop){
+		$(elem).addClass("med" + prop);
+		return "";
+	},
+	"JS 50": function(elem,prop){
+		$(elem).css(prop,prop == "opacity" ? 0.50 : "50px");
+		return prop == "opacity" ? 0.5 : 50;
+	},
+	"CSS 0": function(elem,prop){
+		$(elem).addClass("no" + prop);
+		return "";
+	},
+	"JS 0": function(elem,prop){
+		$(elem).css(prop,prop == "opacity" ? 0 : "0px");
+		return 0;
+	}
+};
+
+var to = {
+	/*"Auto": function(elem,prop){
+		$(elem).addClass("wide"+prop);
+		return "auto";
+	},*/
+	/*"toggle (show)": function(elem,prop){
+		$(elem).hide().addClass("wide"+prop);
+		return "show";
+	},*/
+	"show": function(elem,prop){
+		$(elem).hide().addClass("wide"+prop);
+		return "show";
+	},
+	"hide": function(elem,prop){
+		$(elem).addClass("wide"+prop);
+		return "hide";
+	},
+	"100": function(elem,prop){
+		$(elem).addClass("wide"+prop);
+		return prop == "opacity" ? 1 : 100;
+	},
+	"50": function(elem,prop){
+		return prop == "opacity" ? 0.50 : 50;
+	},
+	"0": function(elem,prop){
+		$(elem).addClass("noback");
+		return 0;
+	}
+};
+
+/*var oldAttr = jQuery.attr;
+
+jQuery.attr = function( elem, name, value ){
+	if ( arguments.length == 3 ) {
+		var prev = elem.previousSibling;
+		if ( prev && prev.nodeName == "UL" ) {
+			$(prev).append( name + ": " + value );
+		}
+	}
+
+	return oldAttr.apply( jQuery, arguments );
+};*/
+
+$(document).ready(function(){
+	makeTest( "JS Overflow and Display" )
+		.addClass("widewidth")
+		.css({ overflow: "visible", display: "inline" })
+		.add( makeTest( "CSS Overflow and Display" ).addClass("overflow inline") )
+		.addClass("widewidth")
+		.text("Some sample text.")
+		.before("text before")
+		.after("text after")
+		.animate({ opacity: 0.5 }, "slow", function(){
+			var o = jQuery.css( this, "overflow" );
+			if ( o != "visible" )
+				return msg(this, "Overflow should be visible: " + o);
+
+			if ( jQuery.css( this, "display" ) != "inline" )
+				return msg(this, "Display has been tampered with.");
+
+			pass( this );
+		});
+
+	jQuery.each( from, function(fn, f){
+		jQuery.each( to, function(tn, t){
+			var elem = makeTest( fn + " to " + tn );
+
+			var t_w = t( elem, "width" );
+			var f_w = f( elem, "width" );
+			var t_h = t( elem, "height" );
+			var f_h = f( elem, "height" );
+			var t_o = t( elem, "opacity" );
+			var f_o = f( elem, "opacity" );
+
+			var anim = { width: t_w, height: t_h, opacity: t_o };
+
+			elem.animate(anim, "slow", function(){
+				if ( t_w == "show" && this.style.display != "block" )
+					return msg(this, "Showing, display not block: " + this.style.display);
+
+				if ( (t_w == "hide"||t_w == "show") && this.style.width.indexOf(f_w) != 0 )
+					return msg(this, "Width not reset to " + f_w + ": " + this.style.width);
+
+				if ( (t_h == "hide"||t_h == "show") && this.style.height.indexOf(f_h) != 0 )
+					return msg(this, "Height not reset to " + f_h + ": " + this.style.height);
+
+				var cur_o = jQuery.attr(this.style, "opacity");
+				if ( cur_o !== "" ) cur_o = parseFloat( cur_o );
+
+				if ( (t_o == "hide"||t_o == "show") && cur_o != f_o )
+					return msg(this, "Opacity not reset to " + f_o + ": " + cur_o);
+
+				if ( t_w == "hide" && this.style.display != "none" )
+					return msg(this, "Hiding, display not none: " + this.style.display);
+
+				if ( t_o.constructor == Number && cur_o != t_o )
+					return msg(this, "Final opacity is not " + t_o + ": " + cur_o);
+
+				if ( t_w.constructor == Number && this.style.width != t_w + "px" )
+					return msg(this, "Final width is not " + t_w + ": " + this.style.width);
+
+				if ( t_h.constructor == Number && this.style.height != t_h + "px" )
+					return msg(this, "Final height is not " + t_h + ": " + this.style.height);
+
+				var cur_w = jQuery.css(this,"width");
+				if ( t_w.constructor == Number && this.style.width == "" && cur_w != t_w )
+					return msg(this, "Width should be explicitly set to " + t_w + ", is instead: " + cur_w);
+
+				var cur_h = jQuery.css(this,"height");
+				if ( t_h.constructor == Number && this.style.height == "" && cur_h != t_h )
+					return msg(this, "Height should be explicitly set to " + t_h + ", is instead: " + cur_w);
+
+				if ( t_o.constructor == Number && jQuery.curCSS(this, "opacity") == "" && cur_o != t_o )
+					return msg(this, "Opacity should be explicitly set to " + t_o + ", is instead: " + cur_o);
+
+				if ( t_h == "show" ) {
+					var old_h = jQuery.curCSS(this, "height");
+					$(elem).append("<br>Some more text<br>and some more...");
+						if ( old_h == jQuery.css(this, "height" ) )
+							return msg(this, "Height is not truly auto.");
+				}
+
+				pass( this );
+			});
+		});
+	});
+});
+
+function pass( elem ) {
+	$(elem).prev().addClass("pass");
+}
+
+function makeTest( text ){
+	var elem = $("<div></div>")
+		.attr("id", "test" + makeTest.id++)
+		.addClass("box");
+
+	$("<h4></h4>")
+		.text( text )
+		.appendTo("#tests")
+		.click(function(){
+			$(this).next().toggle();
+		})
+		.after( elem );
+
+	return elem;
+}
+
+makeTest.id = 1;
+
+function msg(elem,txt){
+	$(elem).prev().append( "<tt> " + txt + "</tt>" );
+}
+</script>
+</head>
+<body>
+<div id="tests"></div>
+</body>
+</html>