library-mirrors/jquery
1
0
Fork 0
mirror of https://github.com/jquery/jquery.git synced 2024-11-23 02:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mike Sherov 2012-06-05 15:29:46 -04:00 committed by Rick Waldron
parent 8265fa0837
commit 3225d61496
5 changed files with 60 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
grunt.js
View File

@ -70,7 +70,7 @@ module.exports = function( grunt ) {
"src/ajax/xhr.js", "src/ajax/xhr.js",
{ flag: "effects", src: "src/effects.js" }, { flag: "effects", src: "src/effects.js" },
"src/offset.js", "src/offset.js",
"src/dimensions.js", { flag: "dimensions", src: "src/dimensions.js" },
"src/exports.js", "src/exports.js",
"src/outro.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"); var $elem = jQuery("#nothiddendiv");
$elem.css({ width: 1, height: 1, paddingLeft: "1px", opacity: 1 }); $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("paddingLeft"), "1px", "Initial css set of paddingLeft works (hash)" );
equal( $elem.css("opacity"), "1", "Initial css set of opacity works (hash)" ); equal( $elem.css("opacity"), "1", "Initial css set of opacity works (hash)" );
$elem.css({ width: "+=9" }); $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" }); $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" }); $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" }); $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" ); $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" ) ; $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" ); $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" ); $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" ); $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" ); $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" }); $elem.css({ paddingLeft: "+=4" });
equal( $elem.css("paddingLeft"), "5px", "'+=4' on paddingLeft (hash)" ); 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'"); 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() { 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>"), 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"); 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 }); module("dimensions", { teardown: moduleTeardown });
function pass( val ) { function pass( val ) {
@ -290,6 +292,13 @@ test("getting dimensions shouldnt modify runtimeStyle see #9233", function() {
$div.remove(); $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() { test("box-sizing:border-box child of a hidden elem (or unconnected node) has accurate inner/outer/Width()/Height() see #10413", function() {
expect(16); 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 ).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" ); ok( jQuery( document ).width() > jQuery( window ).width(), "document width is larger than window width" );
}); });
}

68
test/unit/effects.js vendored
View File

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

6
test/unit/selector.js
View File

@ -43,13 +43,13 @@ test("pseudo - visibility", function() {
var $div = jQuery('<div/>').appendTo("body"); 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.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 Visible", '#nothiddendivchild:visible', ['nothiddendivchild'] );
t( "Is Not Visible", '#nothiddendivchild:hidden', [] ); 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 Visible", '#nothiddendivchild:visible', ['nothiddendivchild'] );
t( "Is Not Visible", '#nothiddendivchild:hidden', [] ); 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 Visible", '#nothiddendivchild:visible', ['nothiddendivchild'] );
t( "Is Not Visible", '#nothiddendivchild:hidden', [] ); t( "Is Not Visible", '#nothiddendivchild:hidden', [] );
$div.remove(); $div.remove();