Skip to content
Permalink
Browse files

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

  • Loading branch information...
mikesherov authored and rwaldron committed Jun 5, 2012
1 parent 8265fa0 commit 3225d6149655f68939111ffc76a1dffeb329afe9
Showing with 60 additions and 56 deletions.
  1. +1 −1 grunt.js
  2. +11 −18 test/unit/css.js
  3. +11 −0 test/unit/dimensions.js
  4. +34 −34 test/unit/effects.js
  5. +3 −3 test/unit/selector.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"
]
@@ -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");
@@ -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" );
});

}
@@ -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 ) {
@@ -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.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.