Make dimensions modular, adds optional build flag. Fixes #11856

grunt.js

@@ -70,7 +70,7 @@ module.exports = function( grunt ) {
 				"src/ajax/xhr.js",
 				{ flag: "effects", src: "src/effects.js" },
 				"src/offset.js",
-				"src/dimensions.js",
+				{ flag: "dimensions", src: "src/dimensions.js" },
 				"src/exports.js",
 				"src/outro.js"
 			]

test/unit/css.js

@@ -120,39 +120,39 @@ test("css() explicit and relative values", function() {
 	var $elem = jQuery("#nothiddendiv");
 
 	$elem.css({ width: 1, height: 1, paddingLeft: "1px", opacity: 1 });
-	equal( $elem.width(), 1, "Initial css set or width/height works (hash)" );
+	equal( $elem.css("width"), "1px", "Initial css set or width/height works (hash)" );
 	equal( $elem.css("paddingLeft"), "1px", "Initial css set of paddingLeft works (hash)" );
 	equal( $elem.css("opacity"), "1", "Initial css set of opacity works (hash)" );
 
 	$elem.css({ width: "+=9" });
-	equal( $elem.width(), 10, "'+=9' on width (hash)" );
+	equal( $elem.css("width"), "10px", "'+=9' on width (hash)" );
 
 	$elem.css({ width: "-=9" });
-	equal( $elem.width(), 1, "'-=9' on width (hash)" );
+	equal( $elem.css("width"), "1px", "'-=9' on width (hash)" );
 
 	$elem.css({ width: "+=9px" });
-	equal( $elem.width(), 10, "'+=9px' on width (hash)" );
+	equal( $elem.css("width"), "10px", "'+=9px' on width (hash)" );
 
 	$elem.css({ width: "-=9px" });
-	equal( $elem.width(), 1, "'-=9px' on width (hash)" );
+	equal( $elem.css("width"), "1px", "'-=9px' on width (hash)" );
 
 	$elem.css( "width", "+=9" );
-	equal( $elem.width(), 10, "'+=9' on width (params)" );
+	equal( $elem.css("width"), "10px", "'+=9' on width (params)" );
 
 	$elem.css( "width", "-=9" ) ;
-	equal( $elem.width(), 1, "'-=9' on width (params)" );
+	equal( $elem.css("width"), "1px", "'-=9' on width (params)" );
 
 	$elem.css( "width", "+=9px" );
-	equal( $elem.width(), 10, "'+=9px' on width (params)" );
+	equal( $elem.css("width"), "10px", "'+=9px' on width (params)" );
 
 	$elem.css( "width", "-=9px" );
-	equal( $elem.width(), 1, "'-=9px' on width (params)" );
+	equal( $elem.css("width"), "1px", "'-=9px' on width (params)" );
 
 	$elem.css( "width", "-=-9px" );
-	equal( $elem.width(), 10, "'-=-9px' on width (params)" );
+	equal( $elem.css("width"), "10px", "'-=-9px' on width (params)" );
 
 	$elem.css( "width", "+=-9px" );
-	equal( $elem.width(), 1, "'+=-9px' on width (params)" );
+	equal( $elem.css("width"), "1px", "'+=-9px' on width (params)" );
 
 	$elem.css({ paddingLeft: "+=4" });
 	equal( $elem.css("paddingLeft"), "5px", "'+=4' on paddingLeft (hash)" );
@@ -722,13 +722,6 @@ test("Do not append px to 'fill-opacity' #9548", 1, function() {
 	equal( $div.css("fill-opacity"), 1, "Do not append px to 'fill-opacity'");
 });
 
-test("outerWidth(true) and css('margin') returning % instead of px in Webkit, see #10639", function() {
-	var container = jQuery( "<div/>" ).width(400).appendTo( "#qunit-fixture" ),
-		el = jQuery( "<div/>" ).css({ width: "50%", marginRight: "50%" }).appendTo( container );
-
-	equal( el.outerWidth(true), 400, "outerWidth(true) and css('margin') returning % instead of px in Webkit, see #10639" );
-});
-
 test("css('width') and css('height') should respect box-sizing, see #11004", function() {
 	var el_dis = jQuery("<div style='width:300px;height:300px;margin:2px;padding:2px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;'>test</div>"),
 		el = el_dis.clone().appendTo("#qunit-fixture");

test/unit/dimensions.js

@@ -1,3 +1,5 @@
+if( jQuery.fn.width ) {
+
 module("dimensions", { teardown: moduleTeardown });
 
 function pass( val ) {
@@ -290,6 +292,13 @@ test("getting dimensions shouldnt modify runtimeStyle see #9233", function() {
 	$div.remove();
 });
 
+test("outerWidth(true) returning % instead of px in Webkit, see #10639", function() {
+	var container = jQuery( "<div/>" ).width(400).appendTo( "#qunit-fixture" ),
+		el = jQuery( "<div/>" ).css({ width: "50%", marginRight: "50%" }).appendTo( container );
+
+	equal( el.outerWidth(true), 400, "outerWidth(true) and css('margin') returning % instead of px in Webkit, see #10639" );
+});
+
 test("box-sizing:border-box child of a hidden elem (or unconnected node) has accurate inner/outer/Width()/Height()  see #10413", function() {
 	expect(16);
 
@@ -418,3 +427,5 @@ testIframe( "dimensions/documentLarge", "window vs. large document", function( j
 	ok( jQuery( document ).height() > jQuery( window ).height(), "document height is larger than window height" );
 	ok( jQuery( document ).width() > jQuery( window ).width(), "document width is larger than window width" );
 });
+
+}

test/unit/effects.js

@@ -330,8 +330,8 @@ test("animate percentage(%) on width/height", function() {
 	stop();
 	$div.animate({ width: "25%", height: "25%" }, 13, function() {
 		var $this = jQuery(this);
-		equal( $this.width(), 15, "Width was animated to 15px rather than 25px");
-		equal( $this.height(), 15, "Height was animated to 15px rather than 25px");
+		equal( $this.css("width"), "15px", "Width was animated to 15px rather than 25px");
+		equal( $this.css("height"), "15px", "Height was animated to 15px rather than 25px");
 		start();
 	});
 });
@@ -408,7 +408,7 @@ asyncTest( "animate option { queue: true }", function() {
 asyncTest( "animate option { queue: 'name' }", function() {
 	expect( 5 );
 	var foo = jQuery( "#foo" ),
-		origWidth = foo.width(),
+		origWidth = parseFloat( foo.css("width") ),
 		order = [];
 
 	foo.animate( { width: origWidth + 100 }, {
@@ -418,7 +418,7 @@ asyncTest( "animate option { queue: 'name' }", function() {
 
 			// second callback function
 			order.push( 2 );
-			equal( foo.width(), origWidth + 100, "Animation ended" );
+			equal( parseFloat( foo.css("width") ), origWidth + 100, "Animation ended" );
 			equal( foo.queue("name").length, 1, "Queue length of 'name' queue" );
 		}
 	}).queue( "name", function( next ) {
@@ -432,7 +432,7 @@ asyncTest( "animate option { queue: 'name' }", function() {
 
 		// this is the first callback function that should be called
 		order.push( 1 );
-		equal( foo.width(), origWidth, "Animation does not start on its own." );
+		equal( parseFloat( foo.css("width") ), origWidth, "Animation does not start on its own." );
 		equal( foo.queue("name").length, 2, "Queue length of 'name' queue" );
 		foo.dequeue( "name" );
 	}, 100 );
@@ -541,20 +541,20 @@ test("stop()", function() {
 	var $foo = jQuery("#foo");
 	var w = 0;
 
-	$foo.hide().width(200)
-		.animate({ width: "show" }, 1000);
+	$foo.hide().css( "width", 200 )
+		.animate( { width: "show" }, 1000 );
 
 	setTimeout(function() {
-		var nw = $foo.width();
-		notEqual( nw, w, "An animation occurred " + nw + "px " + w + "px");
+		var nw = $foo.css("width");
+		notEqual( parseFloat( nw ), w, "An animation occurred " + nw + " " + w + "px");
 		$foo.stop();
 
-		nw = $foo.width();
-		notEqual( nw, w, "Stop didn't reset the animation " + nw + "px " + w + "px");
+		nw = $foo.css("width");
+		notEqual( parseFloat( nw ), w, "Stop didn't reset the animation " + nw + " " + w + "px");
 		setTimeout(function() {
 			$foo.removeData();
 			$foo.removeData(undefined, true);
-			equal( nw, $foo.width(), "The animation didn't continue" );
+			equal( nw, $foo.css("width"), "The animation didn't continue" );
 			start();
 		}, 100);
 	}, 100);
@@ -579,19 +579,19 @@ test("stop() - several in queue", function() {
 
 	var $foo = jQuery("#foo");
 	var w = 0;
-	$foo.hide().width(200).width();
+	$foo.hide().css( "width", 200 ).css("width");
 
 	$foo.animate({ width: "show" }, 1000);
 	$foo.animate({ width: "hide" }, 1000);
 	$foo.animate({ width: "show" }, 1000);
 	setTimeout(function(){
 		equal( $foo.queue().length, 3, "All 3 still in the queue" );
-		var nw = $foo.width();
-		notEqual( nw, w, "An animation occurred " + nw + "px " + w + "px");
+		var nw = $foo.css("width");
+		notEqual( parseFloat( nw ), w, "An animation occurred " + nw + " " + w + "px");
 		$foo.stop();
 
-		nw = $foo.width();
-		notEqual( nw, w, "Stop didn't reset the animation " + nw + "px " + w + "px");
+		nw = $foo.css("width");
+		notEqual( parseFloat( nw ), w, "Stop didn't reset the animation " + nw + " " + w + "px");
 
 		$foo.stop(true);
 		start();
@@ -604,22 +604,22 @@ test("stop(clearQueue)", function() {
 
 	var $foo = jQuery("#foo");
 	var w = 0;
-	$foo.hide().width(200).width();
+	$foo.hide().css( "width", 200 ).css("width");
 
 	$foo.animate({ width: "show" }, 1000);
 	$foo.animate({ width: "hide" }, 1000);
 	$foo.animate({ width: "show" }, 1000);
 	setTimeout(function(){
-		var nw = $foo.width();
-		ok( nw != w, "An animation occurred " + nw + "px " + w + "px");
+		var nw = $foo.css("width");
+		ok( parseFloat( nw ) != w, "An animation occurred " + nw + " " + w + "px");
 		$foo.stop(true);
 
-		nw = $foo.width();
-		ok( nw != w, "Stop didn't reset the animation " + nw + "px " + w + "px");
+		nw = $foo.css("width");
+		ok( parseFloat( nw ) != w, "Stop didn't reset the animation " + nw + " " + w + "px");
 
 		equal( $foo.queue().length, 0, "The animation queue was cleared" );
 		setTimeout(function(){
-			equal( nw, $foo.width(), "The animation didn't continue" );
+			equal( nw, $foo.css("width"), "The animation didn't continue" );
 			start();
 		}, 100);
 	}, 100);
@@ -631,18 +631,18 @@ test("stop(clearQueue, gotoEnd)", function() {
 
 	var $foo = jQuery("#foo");
 	var w = 0;
-	$foo.hide().width(200).width();
+	$foo.hide().css( "width", 200 ).css("width");
 
 	$foo.animate({ width: "show" }, 1000);
 	$foo.animate({ width: "hide" }, 1000);
 	$foo.animate({ width: "show" }, 1000);
 	$foo.animate({ width: "hide" }, 1000);
 	setTimeout(function(){
-		var nw = $foo.width();
-		ok( nw != w, "An animation occurred " + nw + "px " + w + "px");
+		var nw = $foo.css("width");
+		ok( parseFloat( nw ) != w, "An animation occurred " + nw + " " + w + "px");
 		$foo.stop(false, true);
 
-		nw = $foo.width();
+		nw = $foo.css("width");
 		// Disabled, being flaky
 		//equal( nw, 1, "Stop() reset the animation" );
 
@@ -660,14 +660,14 @@ asyncTest( "stop( queue, ..., ... ) - Stop single queues", function() {
 	var foo = jQuery( "#foo" ),
 		saved;
 
-	foo.width( 200 ).height( 200 );
+	foo.css( "width", 200 ).css( "height", 200 );
 	foo.animate({
 		width: 400
 	},{
 		duration: 1000,
 		complete: function() {
-			equal( foo.width(), 400, "Animation completed for standard queue" );
-			equal( foo.height(), saved, "Height was not changed after the second stop");
+			equal( parseFloat( foo.css("width") ), 400, "Animation completed for standard queue" );
+			equal( parseFloat( foo.css("height") ), saved, "Height was not changed after the second stop");
 			start();
 		}
 	});
@@ -679,15 +679,15 @@ asyncTest( "stop( queue, ..., ... ) - Stop single queues", function() {
 		queue: "height"
 	}).dequeue( "height" ).stop( "height", false, true );
 
-	equal( foo.height(), 400, "Height was stopped with gotoEnd" );
+	equal( parseFloat( foo.css("height") ), 400, "Height was stopped with gotoEnd" );
 
 	foo.animate({
 		height: 200
 	},{
 		duration: 1000,
 		queue: "height"
 	}).dequeue( "height" ).stop( "height", false, false );
-	saved = foo.height();
+	saved = parseFloat( foo.css("height") );
 });
 
 test("toggle()", function() {
@@ -1079,13 +1079,13 @@ test("jQuery.show('fast') doesn't clear radio buttons (bug #1095)", function ()
 
 jQuery.each({
 	"slideToggle": function( $elem ) {
-		return $elem.height();
+		return parseFloat( $elem.css("height") );
 	},
 	"fadeToggle": function( $elem ) {
 		return $elem.css("opacity");
 	},
 	"toggle": function( $elem ) {
-		return $elem.width();
+		return parseFloat( $elem.css("width") );
 	}
 },
 function( method, defProp ) {

test/unit/selector.js

@@ -43,13 +43,13 @@ test("pseudo - visibility", function() {
 
 	var $div = jQuery('<div/>').appendTo("body");
 	$div.css({ fontSize: 0, lineHeight: 0 });// IE also needs to set font-size and line-height to 0
-	$div.width(1).height(0);
+	$div.css( "width", 1 ).css( "height", 0 );
 	t( "Is Visible", '#nothiddendivchild:visible', ['nothiddendivchild'] );
 	t( "Is Not Visible", '#nothiddendivchild:hidden', [] );
-	$div.width(0).height(1);
+	$div.css( "width", 0 ).css( "height", 1 );
 	t( "Is Visible", '#nothiddendivchild:visible', ['nothiddendivchild'] );
 	t( "Is Not Visible", '#nothiddendivchild:hidden', [] );
-	$div.width(1).height(1);
+	$div.css( "width", 1 ).css( "height", 1 );
 	t( "Is Visible", '#nothiddendivchild:visible', ['nothiddendivchild'] );
 	t( "Is Not Visible", '#nothiddendivchild:hidden', [] );
 	$div.remove();