aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorDave Methvin <dave.methvin@gmail.com>2015-10-09 15:52:29 -0400
committerTimmy Willison <timmywillisn@gmail.com>2015-10-18 12:30:00 -0400
commit67d7a2eefee768b59eb3d51cb1fb2c671873e58a (patch)
tree50f099cedd0c00039f80209e8aaa1e13ccc5ae14
parente271f665dd8fb617a5015051e1c9df8cebd6c97b (diff)
downloadjquery-67d7a2eefee768b59eb3d51cb1fb2c671873e58a.tar.gz
jquery-67d7a2eefee768b59eb3d51cb1fb2c671873e58a.zip
CSS: Make show/hide/toggle methods a module
Unit test changes some uses of .show() and .hide() to .css( "display", ... ), there was already an implicit assumption in several of the existing tests. Fixes gh-2193 Close gh-2648
-rw-r--r--Gruntfile.js1
-rw-r--r--README.md3
-rw-r--r--src/css.js22
-rw-r--r--src/css/showHide.js27
-rw-r--r--test/unit/basic.js10
-rw-r--r--test/unit/css.js57
-rw-r--r--test/unit/dimensions.js16
-rw-r--r--test/unit/queue.js3
8 files changed, 81 insertions, 58 deletions
diff --git a/Gruntfile.js b/Gruntfile.js
index 143c6631a..aa919bb08 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -70,6 +70,7 @@ module.exports = function( grunt ) {
ajax: [ "manipulation/_evalUrl", "event/ajax" ],
callbacks: [ "deferred" ],
css: [ "effects", "dimensions", "offset" ],
+ "css/showHide": [ "effects" ],
sizzle: [ "css/hiddenVisibleSelectors", "effects/animatedSelector" ]
}
}
diff --git a/README.md b/README.md
index de6e1bb82..53b6f3fd7 100644
--- a/README.md
+++ b/README.md
@@ -81,7 +81,8 @@ Some example modules that can be excluded are:
- **ajax/xhr**: The XMLHTTPRequest AJAX transport only.
- **ajax/script**: The `<script>` AJAX transport only; used to retrieve scripts.
- **ajax/jsonp**: The JSONP AJAX transport only; depends on the ajax/script transport.
-- **css**: The `.css()` method plus non-animated `.show()`, `.hide()` and `.toggle()`. Also removes **all** modules depending on css (including **effects**, **dimensions**, and **offset**).
+- **css**: The `.css()` method. Also removes **all** modules depending on css (including **effects**, **dimensions**, and **offset**).
+- **css/showHide**: Non-animated `.show()`, `.hide()` and `.toggle()`; can be excluded if you use classes or explicit `.css()` calls to set the `display` property. Also removes the **effects** module.
- **deprecated**: Methods documented as deprecated but not yet removed.
- **dimensions**: The `.width()` and `.height()` methods, including `inner-` and `outer-` variations.
- **effects**: The `.animate()` method and its shorthands such as `.slideUp()` or `.hide("slow")`.
diff --git a/src/css.js b/src/css.js
index ccf0cc85e..3ab0d2f01 100644
--- a/src/css.js
+++ b/src/css.js
@@ -14,13 +14,12 @@ define( [
"./css/adjustCSS",
"./css/addGetHookIf",
"./css/support",
- "./css/showHide",
"./core/init",
"./core/ready",
"./selector" // contains
], function( jQuery, pnum, access, rmargin, document, rcssNum, rnumnonpx, cssExpand,
- isHidden, getStyles, swap, curCSS, adjustCSS, addGetHookIf, support, showHide ) {
+ isHidden, getStyles, swap, curCSS, adjustCSS, addGetHookIf, support ) {
var
@@ -401,25 +400,6 @@ jQuery.fn.extend( {
jQuery.style( elem, name, value ) :
jQuery.css( elem, name );
}, name, value, arguments.length > 1 );
- },
- show: function() {
- return showHide( this, true );
- },
- hide: function() {
- return showHide( this );
- },
- toggle: function( state ) {
- if ( typeof state === "boolean" ) {
- return state ? this.show() : this.hide();
- }
-
- return this.each( function() {
- if ( isHidden( this ) ) {
- jQuery( this ).show();
- } else {
- jQuery( this ).hide();
- }
- } );
}
} );
diff --git a/src/css/showHide.js b/src/css/showHide.js
index 35e15bde8..327291eb1 100644
--- a/src/css/showHide.js
+++ b/src/css/showHide.js
@@ -1,6 +1,7 @@
define( [
- "../data/var/dataPriv"
-], function( dataPriv ) {
+ "../data/var/dataPriv",
+ "../css/var/isHidden"
+], function( dataPriv, isHidden ) {
function showHide( elements, show ) {
var display, elem,
@@ -43,6 +44,26 @@ function showHide( elements, show ) {
return elements;
}
-return showHide;
+jQuery.fn.extend( {
+ show: function() {
+ return showHide( this, true );
+ },
+ hide: function() {
+ return showHide( this );
+ },
+ toggle: function( state ) {
+ if ( typeof state === "boolean" ) {
+ return state ? this.show() : this.hide();
+ }
+
+ return this.each( function() {
+ if ( isHidden( this ) ) {
+ jQuery( this ).show();
+ } else {
+ jQuery( this ).hide();
+ }
+ } );
+ }
+} );
} );
diff --git a/test/unit/basic.js b/test/unit/basic.js
index 25e86d1a3..49b518d3f 100644
--- a/test/unit/basic.js
+++ b/test/unit/basic.js
@@ -54,11 +54,19 @@ QUnit.test( "attributes", function( assert ) {
if ( jQuery.css ) {
QUnit.test( "css", function( assert ) {
- assert.expect( 3 );
+ assert.expect( 1 );
var div = jQuery( "<div/>" ).appendTo( "#qunit-fixture" );
assert.strictEqual( div.css( "width", "50px" ).css( "width" ), "50px", ".css getter/setter" );
+} );
+}
+
+if ( jQuery.fn.show && jQuery.fn.hide ) {
+QUnit.test( "show/hide", function( assert ) {
+ assert.expect( 2 );
+
+ var div = jQuery( "<div/>" ).appendTo( "#qunit-fixture" );
div.hide();
assert.strictEqual( div.css( "display" ), "none", "div hidden" );
diff --git a/test/unit/css.js b/test/unit/css.js
index 75d1db84e..5c9f3e01f 100644
--- a/test/unit/css.js
+++ b/test/unit/css.js
@@ -471,6 +471,9 @@ QUnit.test( "css(Object) where values are Functions with incoming values", funct
jQuery( "#cssFunctionTest" ).remove();
} );
+// .show(), .hide(), can be excluded from the build
+if ( jQuery.fn.show && jQuery.fn.hide ) {
+
QUnit.test( "show(); hide()", function( assert ) {
assert.expect( 4 );
@@ -636,6 +639,35 @@ QUnit.test( "show() resolves correct default display for detached nodes", functi
span.remove();
} );
+QUnit.test( "hide hidden elements (bug #7141)", function( assert ) {
+ assert.expect( 3 );
+
+ var div = jQuery( "<div style='display:none'></div>" ).appendTo( "#qunit-fixture" );
+ assert.equal( div.css( "display" ), "none", "Element is hidden by default" );
+ div.hide();
+ assert.ok( !jQuery._data( div, "olddisplay" ), "olddisplay is undefined after hiding an already-hidden element" );
+ div.show();
+ assert.equal( div.css( "display" ), "block", "Show a double-hidden element" );
+
+ div.remove();
+} );
+
+QUnit.test( "show() after hide() should always set display to initial value (#14750)", function( assert ) {
+ assert.expect( 1 );
+
+ var div = jQuery( "<div />" ),
+ fixture = jQuery( "#qunit-fixture" );
+
+ fixture.append( div );
+
+ div.css( "display", "inline" ).hide().show().css( "display", "list-item" ).hide().show();
+ assert.equal( div.css( "display" ), "list-item", "should get last set display value" );
+} );
+
+}
+
+if ( jQuery.fn.toggle ) {
+
QUnit.test( "toggle()", function( assert ) {
assert.expect( 9 );
var div, oldHide,
@@ -669,18 +701,7 @@ QUnit.test( "toggle()", function( assert ) {
jQuery.fn.hide = oldHide;
} );
-QUnit.test( "hide hidden elements (bug #7141)", function( assert ) {
- assert.expect( 3 );
-
- var div = jQuery( "<div style='display:none'></div>" ).appendTo( "#qunit-fixture" );
- assert.equal( div.css( "display" ), "none", "Element is hidden by default" );
- div.hide();
- assert.ok( !jQuery._data( div, "olddisplay" ), "olddisplay is undefined after hiding an already-hidden element" );
- div.show();
- assert.equal( div.css( "display" ), "block", "Show a double-hidden element" );
-
- div.remove();
-} );
+}
QUnit.test( "jQuery.css(elem, 'height') doesn't clear radio buttons (bug #1095)", function( assert ) {
assert.expect( 4 );
@@ -1128,18 +1149,6 @@ QUnit.test(
}
);
-QUnit.test( "show() after hide() should always set display to initial value (#14750)", function( assert ) {
- assert.expect( 1 );
-
- var div = jQuery( "<div />" ),
- fixture = jQuery( "#qunit-fixture" );
-
- fixture.append( div );
-
- div.css( "display", "inline" ).hide().show().css( "display", "list-item" ).hide().show();
- assert.equal( div.css( "display" ), "list-item", "should get last set display value" );
-} );
-
// Support: IE < 11
// We have to jump through the hoops here in order to test work with "order" CSS property,
// that some browsers do not support. This test is not, strictly speaking, correct,
diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js
index 91bcf8ca6..aa628ee71 100644
--- a/test/unit/dimensions.js
+++ b/test/unit/dimensions.js
@@ -35,9 +35,9 @@ function testWidth( val, assert ) {
$div = jQuery( "#nothiddendiv" );
$div.width( val( 30 ) );
assert.equal( $div.width(), 30, "Test set to 30 correctly" );
- $div.hide();
+ $div.css( "display", "none" );
assert.equal( $div.width(), 30, "Test hidden div" );
- $div.show();
+ $div.css( "display", "" );
$div.width( val( -1 ) ); // handle negative numbers by setting to 0 #11604
assert.equal( $div.width(), 0, "Test negative width normalized to 0" );
$div.css( "padding", "20px" );
@@ -88,9 +88,9 @@ function testHeight( val, assert ) {
$div = jQuery( "#nothiddendiv" );
$div.height( val( 30 ) );
assert.equal( $div.height(), 30, "Test set to 30 correctly" );
- $div.hide();
+ $div.css( "display", "none" );
assert.equal( $div.height(), 30, "Test hidden div" );
- $div.show();
+ $div.css( "display", "" );
$div.height( val( -1 ) ); // handle negative numbers by setting to 0 #11604
assert.equal( $div.height(), 0, "Test negative height normalized to 0" );
$div.css( "padding", "20px" );
@@ -153,7 +153,7 @@ QUnit.test( "innerWidth()", function( assert ) {
assert.equal( $div.innerWidth(), 30, "Test with margin and border" );
$div.css( "padding", "20px" );
assert.equal( $div.innerWidth(), 70, "Test with margin, border and padding" );
- $div.hide();
+ $div.css( "display", "none" );
assert.equal( $div.innerWidth(), 70, "Test hidden div" );
// reset styles
@@ -188,7 +188,7 @@ QUnit.test( "innerHeight()", function( assert ) {
assert.equal( $div.innerHeight(), 30, "Test with margin and border" );
$div.css( "padding", "20px" );
assert.equal( $div.innerHeight(), 70, "Test with margin, border and padding" );
- $div.hide();
+ $div.css( "display", "none" );
assert.equal( $div.innerHeight(), 70, "Test hidden div" );
// reset styles
@@ -227,7 +227,7 @@ QUnit.test( "outerWidth()", function( assert ) {
assert.equal( $div.outerWidth(), 74, "Test with padding, border and margin without margin option" );
$div.css( "position", "absolute" );
assert.equal( $div.outerWidth( true ), 94, "Test with padding, border and margin with margin option" );
- $div.hide();
+ $div.css( "display", "none" );
assert.equal( $div.outerWidth( true ), 94, "Test hidden div with padding, border and margin with margin option" );
// reset styles
@@ -383,7 +383,7 @@ QUnit.test( "outerHeight()", function( assert ) {
$div.css( "margin", "10px" );
assert.equal( $div.outerHeight(), 74, "Test with padding, border and margin without margin option" );
assert.equal( $div.outerHeight( true ), 94, "Test with padding, border and margin with margin option" );
- $div.hide();
+ $div.css( "display", "none" );
assert.equal( $div.outerHeight( true ), 94, "Test hidden div with padding, border and margin with margin option" );
// reset styles
diff --git a/test/unit/queue.js b/test/unit/queue.js
index 780e20058..fa8b6717a 100644
--- a/test/unit/queue.js
+++ b/test/unit/queue.js
@@ -231,6 +231,8 @@ QUnit.asyncTest( "fn.promise( \"queue\" ) - called whenever last queue function
foo.dequeue( "queue" );
} );
+if ( jQuery.fn.animate ) {
+
QUnit.asyncTest( "fn.promise( \"queue\" ) - waits for animation to complete before resolving", 2, function( assert ) {
var foo = jQuery( "#foo" ),
test = 1;
@@ -251,6 +253,7 @@ QUnit.asyncTest( "fn.promise( \"queue\" ) - waits for animation to complete befo
} );
} );
+}
QUnit.test( ".promise(obj)", function( assert ) {
assert.expect( 2 );