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

diff --git a/grunt.js b/grunt.js
index 5bba8fe9206eb186a69ab802a255070712bd4284..a54b85c9f4d3a5b1429c970cf3312a1934d04e06 100644 (file)
--- a/grunt.js
+++ b/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"
                        ]

diff --git a/test/unit/css.js b/test/unit/css.js
index 5e9e109bb1ed1f2967754759c9e78c186d689eda..8f17ce74af82c1a8b29a3fe8d23daec98f3271bc 100644 (file)
--- a/test/unit/css.js
+++ b/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");

diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js
index 49f6bcbadb955853d42bee6b6259a2a14f1231c0..ed065f3c784f76a1d2064d33ad30443b340f07e1 100644 (file)
--- a/test/unit/dimensions.js
+++ b/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" );
 });
+
+}

diff --git a/test/unit/effects.js b/test/unit/effects.js
index e952ca8a9c5bf6a591818a369a3d3c16b6237d9a..9e244490d7e804f96349d052470352d4f05e6b0d 100644 (file)
--- a/test/unit/effects.js
+++ b/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,7 +679,7 @@ 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
@@ -687,7 +687,7 @@ asyncTest( "stop( queue, ..., ... ) - Stop single queues", function() {
                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 ) {

diff --git a/test/unit/selector.js b/test/unit/selector.js
index c1952e7202919d77dcdfeb113960cd263a6e42e6..f4a5f4954d9e5813b1095a6b08378c7e5b5c4821 100644 (file)
--- a/test/unit/selector.js
+++ b/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();