From 007d492ba975a40708d092e79d90d41edd8680ee Mon Sep 17 00:00:00 2001 From: tomykaira Date: Fri, 20 May 2011 02:17:16 +0900 Subject: [PATCH 01/10] effects.slide: fix: reset width and height on the end of animation, get distance before wrapping. #5245-Slide Effect Broken With Relative Width --- ui/jquery.effects.slide.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/ui/jquery.effects.slide.js b/ui/jquery.effects.slide.js index 6b029675414..fa89333f5b9 100644 --- a/ui/jquery.effects.slide.js +++ b/ui/jquery.effects.slide.js @@ -18,7 +18,7 @@ $.effects.effect.slide = function( o ) { // Create element var el = $( this ), - props = ['position','top','bottom','left','right'], + props = ['position','top','bottom','left','right', "width", "height"], mode = $.effects.setMode( el, o.mode || 'show' ), direction = o.direction || 'left', ref = (direction == 'up' || direction == 'down') ? 'top' : 'left', @@ -29,13 +29,14 @@ $.effects.effect.slide = function( o ) { // Adjust $.effects.save( el, props ); el.show(); + distance = o.distance || el[ ref == 'top' ? "outerHeight" : "outerWidth" ]({ + margin: true + }); $.effects.createWrapper( el ).css({ overflow: 'hidden' - }); - - distance = o.distance || el[ ref == 'top' ? "outerHeight" : "outerWidth" ]({ - margin: true }); + el.css({ width: "100%", height: "100%" }); + if (mode == 'show') { el.css( ref, motion == 'pos' ? (isNaN(distance) ? "-" + distance : -distance) : distance ); } From 83800c06512dc9a9747d739d19a98ba26504d801 Mon Sep 17 00:00:00 2001 From: gnarf Date: Sat, 21 May 2011 02:49:07 -0500 Subject: [PATCH 02/10] effects.slide: Storing size of element before wrapping, and setting to force a px value instead of a % being carried over. Fixes #5245 - Slide Effect Broken With Relative Width --- ui/jquery.effects.slide.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/ui/jquery.effects.slide.js b/ui/jquery.effects.slide.js index fa89333f5b9..8fc5deca238 100644 --- a/ui/jquery.effects.slide.js +++ b/ui/jquery.effects.slide.js @@ -18,24 +18,31 @@ $.effects.effect.slide = function( o ) { // Create element var el = $( this ), - props = ['position','top','bottom','left','right', "width", "height"], + props = [ "position", "top", "bottom", "left", "right", "width", "height" ], mode = $.effects.setMode( el, o.mode || 'show' ), direction = o.direction || 'left', ref = (direction == 'up' || direction == 'down') ? 'top' : 'left', motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg', distance, - animation = {}; + animation = {}, + size; // Adjust - $.effects.save( el, props ); + $.effects.save( el, props ); el.show(); distance = o.distance || el[ ref == 'top' ? "outerHeight" : "outerWidth" ]({ margin: true }); + + // Store the size in case width/height are defined in % - Fixes #5245 + size = { + width: el.width(), + height: el.height() + }; $.effects.createWrapper( el ).css({ overflow: 'hidden' }); - el.css({ width: "100%", height: "100%" }); + el.css( size ); if (mode == 'show') { el.css( ref, motion == 'pos' ? (isNaN(distance) ? "-" + distance : -distance) : distance ); From 67df90cd6bee89550653b9658227bc88047b3441 Mon Sep 17 00:00:00 2001 From: gnarf Date: Sat, 21 May 2011 02:58:23 -0500 Subject: [PATCH 03/10] Unit Tests: Adding a unit test for #5245 - Slide Effect Broken With Relative Width --- tests/unit/effects/effects.html | 7 +++++++ tests/unit/effects/effects_core.js | 9 +++++++++ 2 files changed, 16 insertions(+) diff --git a/tests/unit/effects/effects.html b/tests/unit/effects/effects.html index 84fecd9ccc0..8a84ac88091 100644 --- a/tests/unit/effects/effects.html +++ b/tests/unit/effects/effects.html @@ -54,6 +54,10 @@ .testChildren h2 { font-size: 20px; } + + .relWidth { + width: 50%; + } @@ -70,6 +74,9 @@

Child Element Test

+
+

Slide with relative width +

diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index ed9fbf9ba0e..cbc8f198ff8 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -108,4 +108,13 @@ asyncTest( "animateClass works with children", function() { }}); }); +module("slide"); +test( "slide with % width", function() { + var test = $("div.slide.relWidth"), + width = test.width(); + + test.toggle( "slide", minDuration ); + equal( test.width(), width, "Width is the same after animation started" ); +}); + })(jQuery); From 1a3edf39c8ce4346fc36c7c5c2889b445fb3520f Mon Sep 17 00:00:00 2001 From: tomykaira Date: Sun, 22 May 2011 21:55:06 +0900 Subject: [PATCH 04/10] Effects.core: Storing size and setting in createWrapper for applied to all effects. Fixed #5245 - Relative width elements break when wrapped for effects --- ui/jquery.effects.core.js | 8 +++++++- ui/jquery.effects.slide.js | 6 ------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/ui/jquery.effects.core.js b/ui/jquery.effects.core.js index 7650aa8f4e6..00a803360b8 100644 --- a/ui/jquery.effects.core.js +++ b/ui/jquery.effects.core.js @@ -410,7 +410,12 @@ $.extend( $.effects, { border: "none", margin: 0, padding: 0 - }); + }), + // Store the size in case width/height are defined in % - Fixes #5245 + size = { + width: element.width(), + height: element.height() + }; element.wrap( wrapper ); wrapper = element.parent(); //Hotfix for jQuery 1.4 since some change in wrap() seems to actually loose the reference to the wrapped element @@ -438,6 +443,7 @@ $.extend( $.effects, { bottom: "auto" }); } + element.css(size); return wrapper.css( props ).show(); }, diff --git a/ui/jquery.effects.slide.js b/ui/jquery.effects.slide.js index 8fc5deca238..ccb13fa1beb 100644 --- a/ui/jquery.effects.slide.js +++ b/ui/jquery.effects.slide.js @@ -34,15 +34,9 @@ $.effects.effect.slide = function( o ) { margin: true }); - // Store the size in case width/height are defined in % - Fixes #5245 - size = { - width: el.width(), - height: el.height() - }; $.effects.createWrapper( el ).css({ overflow: 'hidden' }); - el.css( size ); if (mode == 'show') { el.css( ref, motion == 'pos' ? (isNaN(distance) ? "-" + distance : -distance) : distance ); From e956f66a5a9b7bb4f3821da524ae0d3ad2aa6255 Mon Sep 17 00:00:00 2001 From: tomykaira Date: Mon, 23 May 2011 09:37:50 +0900 Subject: [PATCH 05/10] Unit Tests: Apply a test to all effects for #5245 - Relative width elements break when wrapped for effects --- tests/unit/effects/effects_core.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index cbc8f198ff8..2e3c3c42f6e 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -54,6 +54,14 @@ $.each( $.effects.effect, function( effect ) { start(); })); }); + + test( "toggle with % width", function() { + var test = $("div.slide.relWidth"), + width = test.width(); + + test.toggle( effect, minDuration ); + equal( test.width(), width, "Width is the same after animation started" ); + }); }); module("animateClass"); @@ -108,13 +116,4 @@ asyncTest( "animateClass works with children", function() { }}); }); -module("slide"); -test( "slide with % width", function() { - var test = $("div.slide.relWidth"), - width = test.width(); - - test.toggle( "slide", minDuration ); - equal( test.width(), width, "Width is the same after animation started" ); -}); - })(jQuery); From 958079f48e9f8f51dd16d96b87841405f3be3600 Mon Sep 17 00:00:00 2001 From: tomykaira Date: Mon, 23 May 2011 10:13:18 +0900 Subject: [PATCH 06/10] Unit Tests: Add a test for relative height for #5245 - Relative width elements break when wrapped for effects --- tests/unit/effects/effects.html | 6 +++++- tests/unit/effects/effects_core.js | 5 +++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/tests/unit/effects/effects.html b/tests/unit/effects/effects.html index 8a84ac88091..6956ebcda21 100644 --- a/tests/unit/effects/effects.html +++ b/tests/unit/effects/effects.html @@ -58,6 +58,10 @@ .relWidth { width: 50%; } + + .relHeight { + height: 50%; + } @@ -74,7 +78,7 @@

Child Element Test

-
+

Slide with relative width

diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index 2e3c3c42f6e..402ee8f4fd2 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -56,11 +56,12 @@ $.each( $.effects.effect, function( effect ) { }); test( "toggle with % width", function() { - var test = $("div.slide.relWidth"), - width = test.width(); + var test = $("div.relWidth.relHeight"), + width = test.width(), height = test.height(); test.toggle( effect, minDuration ); equal( test.width(), width, "Width is the same after animation started" ); + equal( test.height(), height, "Height is the same after animation started" ); }); }); From 2dd03e338441749d569c6b9678a27f272884532d Mon Sep 17 00:00:00 2001 From: tomykaira Date: Mon, 23 May 2011 10:14:39 +0900 Subject: [PATCH 07/10] whitespace --- tests/unit/effects/effects_core.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index 402ee8f4fd2..d83188ce08d 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -55,14 +55,14 @@ $.each( $.effects.effect, function( effect ) { })); }); - test( "toggle with % width", function() { - var test = $("div.relWidth.relHeight"), - width = test.width(), height = test.height(); - - test.toggle( effect, minDuration ); - equal( test.width(), width, "Width is the same after animation started" ); - equal( test.height(), height, "Height is the same after animation started" ); - }); + test( "toggle with % width", function() { + var test = $("div.relWidth.relHeight"), + width = test.width(), height = test.height(); + + test.toggle( effect, minDuration ); + equal( test.width(), width, "Width is the same after animation started" ); + equal( test.height(), height, "Height is the same after animation started" ); + }); }); module("animateClass"); From 7f39ca9b4d9d9b82336c90fc42be845363543695 Mon Sep 17 00:00:00 2001 From: gnarf Date: Sun, 22 May 2011 20:45:30 -0500 Subject: [PATCH 08/10] Merged Squashed with tomykaira/bug-5245 --- tests/unit/effects/effects.html | 6 +++++- tests/unit/effects/effects_core.js | 18 +++++++++--------- ui/jquery.effects.core.js | 8 +++++++- ui/jquery.effects.slide.js | 6 ------ 4 files changed, 21 insertions(+), 17 deletions(-) diff --git a/tests/unit/effects/effects.html b/tests/unit/effects/effects.html index 8a84ac88091..6956ebcda21 100644 --- a/tests/unit/effects/effects.html +++ b/tests/unit/effects/effects.html @@ -58,6 +58,10 @@ .relWidth { width: 50%; } + + .relHeight { + height: 50%; + } @@ -74,7 +78,7 @@

Child Element Test

-
+

Slide with relative width

diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index cbc8f198ff8..d83188ce08d 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -54,6 +54,15 @@ $.each( $.effects.effect, function( effect ) { start(); })); }); + + test( "toggle with % width", function() { + var test = $("div.relWidth.relHeight"), + width = test.width(), height = test.height(); + + test.toggle( effect, minDuration ); + equal( test.width(), width, "Width is the same after animation started" ); + equal( test.height(), height, "Height is the same after animation started" ); + }); }); module("animateClass"); @@ -108,13 +117,4 @@ asyncTest( "animateClass works with children", function() { }}); }); -module("slide"); -test( "slide with % width", function() { - var test = $("div.slide.relWidth"), - width = test.width(); - - test.toggle( "slide", minDuration ); - equal( test.width(), width, "Width is the same after animation started" ); -}); - })(jQuery); diff --git a/ui/jquery.effects.core.js b/ui/jquery.effects.core.js index 7650aa8f4e6..00a803360b8 100644 --- a/ui/jquery.effects.core.js +++ b/ui/jquery.effects.core.js @@ -410,7 +410,12 @@ $.extend( $.effects, { border: "none", margin: 0, padding: 0 - }); + }), + // Store the size in case width/height are defined in % - Fixes #5245 + size = { + width: element.width(), + height: element.height() + }; element.wrap( wrapper ); wrapper = element.parent(); //Hotfix for jQuery 1.4 since some change in wrap() seems to actually loose the reference to the wrapped element @@ -438,6 +443,7 @@ $.extend( $.effects, { bottom: "auto" }); } + element.css(size); return wrapper.css( props ).show(); }, diff --git a/ui/jquery.effects.slide.js b/ui/jquery.effects.slide.js index 8fc5deca238..ccb13fa1beb 100644 --- a/ui/jquery.effects.slide.js +++ b/ui/jquery.effects.slide.js @@ -34,15 +34,9 @@ $.effects.effect.slide = function( o ) { margin: true }); - // Store the size in case width/height are defined in % - Fixes #5245 - size = { - width: el.width(), - height: el.height() - }; $.effects.createWrapper( el ).css({ overflow: 'hidden' }); - el.css( size ); if (mode == 'show') { el.css( ref, motion == 'pos' ? (isNaN(distance) ? "-" + distance : -distance) : distance ); From f06eaadbf72ae82c96c77f70fe00c2889dd9a751 Mon Sep 17 00:00:00 2001 From: gnarf Date: Sun, 22 May 2011 21:00:23 -0500 Subject: [PATCH 09/10] Unit Tests: ensuring height / width css inline properties don't stick around. --- tests/unit/effects/effects_core.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index d83188ce08d..4c685ebb667 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -55,13 +55,19 @@ $.each( $.effects.effect, function( effect ) { })); }); - test( "toggle with % width", function() { + asyncTest( "relative width & height - properties are preserved", function() { var test = $("div.relWidth.relHeight"), - width = test.width(), height = test.height(); + width = test.width(), height = test.height(), + cssWidth = test[0].style.width, cssHeight = test[0].style.height; - test.toggle( effect, minDuration ); - equal( test.width(), width, "Width is the same after animation started" ); - equal( test.height(), height, "Height is the same after animation started" ); + expect( 4 ); + test.toggle( effect, minDuration, function() { + equal( test[0].style.width, cssWidth, "Inline CSS Width has been reset after animation ended" ); + equal( test[0].style.height, cssHeight, "Inline CSS Height has been rest after animation ended" ); + start(); + }); + equal( test.width(), width, "Width is the same px after animation started" ); + equal( test.height(), height, "Height is the same px after animation started" ); }); }); From 9105dd546210049369038396449885900a0c8002 Mon Sep 17 00:00:00 2001 From: tomykaira Date: Mon, 23 May 2011 11:27:45 +0900 Subject: [PATCH 10/10] effects.core: Restoring height/width of an element after animation in all effects. Fixed #5245 - Relative width elements break when wrapped for effects --- ui/jquery.effects.blind.js | 2 +- ui/jquery.effects.bounce.js | 2 +- ui/jquery.effects.drop.js | 2 +- ui/jquery.effects.fold.js | 2 +- ui/jquery.effects.scale.js | 2 +- ui/jquery.effects.shake.js | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/ui/jquery.effects.blind.js b/ui/jquery.effects.blind.js index 7a59d8a75f5..3eab0d68366 100644 --- a/ui/jquery.effects.blind.js +++ b/ui/jquery.effects.blind.js @@ -21,7 +21,7 @@ $.effects.effect.blind = function( o ) { // Create element var el = $( this ), - props = [ "position", "top", "bottom", "left", "right" ], + props = [ "position", "top", "bottom", "left", "right", "height", "width" ], mode = $.effects.setMode( el, o.mode || "hide" ), direction = o.direction || "up", vertical = rvertical.test( direction ), diff --git a/ui/jquery.effects.bounce.js b/ui/jquery.effects.bounce.js index 9e1117ce982..78fedb0ceb5 100644 --- a/ui/jquery.effects.bounce.js +++ b/ui/jquery.effects.bounce.js @@ -16,7 +16,7 @@ $.effects.effect.bounce = function(o) { return this.queue( function( next ) { var el = $( this ), - props = [ "position", "top", "bottom", "left", "right" ], + props = [ "position", "top", "bottom", "left", "right", "height", "width" ], // defaults: mode = $.effects.setMode( el, o.mode || "effect" ), diff --git a/ui/jquery.effects.drop.js b/ui/jquery.effects.drop.js index 24fb89db0b9..4265b737b4e 100644 --- a/ui/jquery.effects.drop.js +++ b/ui/jquery.effects.drop.js @@ -17,7 +17,7 @@ $.effects.effect.drop = function( o ) { return this.queue( function() { var el = $( this ), - props = [ 'position', 'top', 'bottom', 'left', 'right', 'opacity' ], + props = [ 'position', 'top', 'bottom', 'left', 'right', 'opacity', "height", "width" ], mode = $.effects.setMode( el, o.mode || 'hide' ), direction = o.direction || 'left', ref = ( direction == 'up' || direction == 'down' ) ? 'top' : 'left', diff --git a/ui/jquery.effects.fold.js b/ui/jquery.effects.fold.js index 29da090cb89..6100c33a163 100644 --- a/ui/jquery.effects.fold.js +++ b/ui/jquery.effects.fold.js @@ -18,7 +18,7 @@ $.effects.effect.fold = function( o ) { // Create element var el = $( this ), - props = ['position','top','bottom','left','right'], + props = ['position','top','bottom','left','right','height','width'], mode = $.effects.setMode(el, o.mode || 'hide'), size = o.size || 15, percent = /([0-9]+)%/.exec(size), diff --git a/ui/jquery.effects.scale.js b/ui/jquery.effects.scale.js index b5c49ce7c64..41a8fbf6883 100644 --- a/ui/jquery.effects.scale.js +++ b/ui/jquery.effects.scale.js @@ -112,7 +112,7 @@ $.effects.effect.size = function( o ) { // Set options mode = $.effects.setMode( el, o.mode || 'effect' ), - restore = o.restore || false, + restore = mode === "effect" && !o.restore ? false : true, scale = o.scale || 'both', origin = o.origin, original, baseline, factor; diff --git a/ui/jquery.effects.shake.js b/ui/jquery.effects.shake.js index 550329ca408..52ab331e8b4 100644 --- a/ui/jquery.effects.shake.js +++ b/ui/jquery.effects.shake.js @@ -17,7 +17,7 @@ $.effects.effect.shake = function( o ) { return this.queue( function() { var el = $( this ), - props = [ "position", "top", "bottom", "left", "right" ], + props = [ "position", "top", "bottom", "left", "right", "height", "width" ], mode = $.effects.setMode( el, o.mode || "effect" ), direction = o.direction || "left", distance = o.distance || 20,