From 4f9aa62a858f28b8ed310ac73f9d2cd788bf1eed Mon Sep 17 00:00:00 2001 From: jeresig Date: Sat, 23 Jan 2010 20:49:59 -0500 Subject: [PATCH] Added in .height(fn) and .width(fn) support. Fixes #5915. --- src/dimensions.js | 7 ++++ test/unit/dimensions.js | 78 +++++++++++++++++++++++++++++------------ 2 files changed, 63 insertions(+), 22 deletions(-) diff --git a/src/dimensions.js b/src/dimensions.js index 3acbb1d76..aeaaa78ba 100644 --- a/src/dimensions.js +++ b/src/dimensions.js @@ -23,6 +23,13 @@ jQuery.each([ "Height", "Width" ], function( i, name ) { if ( !elem ) { return size == null ? null : this; } + + if ( jQuery.isFunction( size ) ) { + return this.each(function( i ) { + var self = jQuery( this ); + self[ type ]( size.call( this, i, self[ type ]() ) ); + }); + } return ("scrollTo" in elem && elem.document) ? // does it walk and quack like a window? // Everyone else use document.documentElement or document.body depending on Quirks vs Standards mode diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js index 8653de42c..74405cee7 100644 --- a/test/unit/dimensions.js +++ b/test/unit/dimensions.js @@ -1,27 +1,28 @@ module("dimensions"); -test("width()", function() { +function pass( val ) { + return val; +} + +function fn( val ) { + return function(){ return val; }; +} + +function testWidth( val ) { expect(7); var $div = jQuery("#nothiddendiv"); - $div.width(30); + $div.width( val(30) ); equals($div.width(), 30, "Test set to 30 correctly"); $div.hide(); equals($div.width(), 30, "Test hidden div"); $div.show(); - $div.width(-1); // handle negative numbers by ignoring #1599 + $div.width( val(-1) ); // handle negative numbers by ignoring #1599 equals($div.width(), 30, "Test negative width ignored"); $div.css("padding", "20px"); equals($div.width(), 30, "Test padding specified with pixels"); $div.css("border", "2px solid #fff"); equals($div.width(), 30, "Test border specified with pixels"); - //$div.css("padding", "2em"); - //equals($div.width(), 30, "Test padding specified with ems"); - //$div.css("border", "1em solid #fff"); - //DISABLED - Opera 9.6 fails this test, returns 8 - //equals($div.width(), 30, "Test border specified with ems"); - //$div.css("padding", "2%"); - //equals($div.width(), 30, "Test padding specified with percent"); $div.css({ display: "", border: "", padding: "" }); @@ -30,36 +31,69 @@ test("width()", function() { jQuery("#nothiddendiv, #nothiddendivchild").css({ border: "", padding: "", width: "" }); var blah = jQuery("blah"); - equals( blah.width(10), blah, "Make sure that setting a width on an empty set returns the set." ); + equals( blah.width( val(10) ), blah, "Make sure that setting a width on an empty set returns the set." ); +} + +test("width()", function() { + testWidth( pass ); }); -test("height()", function() { +test("width() with function", function() { + testWidth( fn ); +}); + +test("width() with function args", function() { + expect( 2 ); + + var $div = jQuery("#nothiddendiv"); + $div.width( 30 ).width(function(i, width) { + equals( width, 30, "Make sure previous value is corrrect." ); + return width + 1; + }); + + equals( $div.width(), 31, "Make sure value was modified correctly." ); +}); + +function testHeight( val ) { expect(6); var $div = jQuery("#nothiddendiv"); - $div.height(30); + $div.height( val(30) ); equals($div.height(), 30, "Test set to 30 correctly"); $div.hide(); equals($div.height(), 30, "Test hidden div"); $div.show(); - $div.height(-1); // handle negative numbers by ignoring #1599 + $div.height( val(-1) ); // handle negative numbers by ignoring #1599 equals($div.height(), 30, "Test negative height ignored"); $div.css("padding", "20px"); equals($div.height(), 30, "Test padding specified with pixels"); $div.css("border", "2px solid #fff"); equals($div.height(), 30, "Test border specified with pixels"); - //$div.css("padding", "2em"); - //equals($div.height(), 30, "Test padding specified with ems"); - //$div.css("border", "1em solid #fff"); - //DISABLED - Opera 9.6 fails this test, returns 8 - //equals($div.height(), 30, "Test border specified with ems"); - //$div.css("padding", "2%"); - //equals($div.height(), 30, "Test padding specified with percent"); $div.css({ display: "", border: "", padding: "", height: "1px" }); var blah = jQuery("blah"); - equals( blah.height(10), blah, "Make sure that setting a height on an empty set returns the set." ); + equals( blah.height( val(10) ), blah, "Make sure that setting a height on an empty set returns the set." ); +} + +test("height()", function() { + testHeight( pass ); +}); + +test("width() with function", function() { + testHeight( fn ); +}); + +test("height() with function args", function() { + expect( 2 ); + + var $div = jQuery("#nothiddendiv"); + $div.height( 30 ).height(function(i, height) { + equals( height, 30, "Make sure previous value is corrrect." ); + return height + 1; + }); + + equals( $div.height(), 31, "Make sure value was modified correctly." ); }); test("innerWidth()", function() { -- 2.39.5