Skip to content
Permalink
Browse files
Make dimensions modular, adds optional build flag. Fixes #11856
  • Loading branch information
@mikesherov @rwaldron
mikesherov authored and rwaldron committed Jun 5, 2012
1 parent 8265fa0 commit 3225d6149655f68939111ffc76a1dffeb329afe9
Showing 5 changed files with 60 additions and 56 deletions.
2 grunt.js
View file
@@ -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"
]
29 test/unit/css.js
View file
@@ -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");
11 test/unit/dimensions.js
View file
@@ -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" );
});

}
68 test/unit/effects.js
View file
@@ -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 ) {
6 test/unit/selector.js
View file
@@ -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();

0 comments on commit 3225d61

Please sign in to comment.