mirror of
https://github.com/jquery/jquery.git
synced 2024-11-23 02:54:22 +00:00
Make dimensions modular, adds optional build flag. Fixes #11856
This commit is contained in:
parent
8265fa0837
commit
3225d61496
2
grunt.js
2
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"
|
||||
]
|
||||
|
@ -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" );
|
||||
});
|
||||
|
||||
}
|
||||
|
68
test/unit/effects.js
vendored
68
test/unit/effects.js
vendored
@ -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 ) {
|
||||
|
@ -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();
|
||||
|
Loading…
Reference in New Issue
Block a user