From: Alexander Schmitz Date: Mon, 24 Aug 2015 13:32:42 +0000 (-0400) Subject: Effects: Style updates X-Git-Tag: 1.12.0-beta.1~139 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=f520f9ef4231a0abf58c24d0811bb8f598e4dd86;p=jquery-ui.git Effects: Style updates Ref #14246 --- diff --git a/tests/unit/effects/core.js b/tests/unit/effects/core.js index 5f634a782..ca7d56034 100644 --- a/tests/unit/effects/core.js +++ b/tests/unit/effects/core.js @@ -45,13 +45,13 @@ asyncTest( ".hide() with step", function() { step = $.noop; }; - element.hide({ + element.hide( { step: function() { step(); }, complete: start - }); -}); + } ); +} ); test( "Immediate Return Conditions", function() { var hidden = $( "div.hidden" ), @@ -59,19 +59,19 @@ test( "Immediate Return Conditions", function() { expect( 3 ); hidden.hide( "blind", function() { equal( ++count, 1, "Hide on hidden returned immediately" ); - }).show().show( "blind", function() { + } ).show().show( "blind", function() { equal( ++count, 2, "Show on shown returned immediately" ); - }); + } ); equal( ++count, 3, "Both Functions worked properly" ); -}); +} ); test( ".hide() with hidden parent", function() { expect( 1 ); var element = $( "div.hidden" ).children(); element.hide( "blind", function() { equal( element.css( "display" ), "none", "display: none" ); - }); -}); + } ); +} ); asyncTest( "Parse of null for options", function() { var hidden = $( "div.hidden" ), @@ -80,8 +80,8 @@ asyncTest( "Parse of null for options", function() { hidden.show( "blind", null, 1, function() { equal( ++count, 1, "null for options still works" ); start(); - }); -}); + } ); +} ); test( "removeClass", function() { expect( 3 ); @@ -92,28 +92,28 @@ test( "removeClass", function() { equal( "destroyed", element[ 0 ].className ); element.removeClass(); equal( "", element[ 0 ].className ); -}); +} ); module( "effects.core: animateClass" ); asyncTest( "animateClass works with borderStyle", function() { - var test = $("div.animateClass"); - expect(3); - test.toggleClass("testAddBorder", minDuration, function() { - test.toggleClass("testAddBorder", minDuration, function() { - equal( test.css("borderLeftStyle"), "none", "None border set" ); + var test = $( "div.animateClass" ); + expect( 3 ); + test.toggleClass( "testAddBorder", minDuration, function() { + test.toggleClass( "testAddBorder", minDuration, function() { + equal( test.css( "borderLeftStyle" ), "none", "None border set" ); start(); - }); - equal( test.css("borderLeftStyle"), "solid", "None border not immedately set" ); - }); - equal( test.css("borderLeftStyle"), "solid", "Solid border immedately set" ); -}); + } ); + equal( test.css( "borderLeftStyle" ), "solid", "None border not immedately set" ); + } ); + equal( test.css( "borderLeftStyle" ), "solid", "Solid border immedately set" ); +} ); asyncTest( "animateClass works with colors", function() { - var test = $("div.animateClass"), + var test = $( "div.animateClass" ), oldStep = jQuery.fx.step.backgroundColor; - expect(2); + expect( 2 ); // We want to catch the first frame of animation jQuery.fx.step.backgroundColor = function( fx ) { @@ -122,21 +122,21 @@ asyncTest( "animateClass works with colors", function() { // Make sure it has animated somewhere we can detect if ( fx.pos > 255 / 2000 ) { jQuery.fx.step.backgroundColor = oldStep; - notPresent( test.css("backgroundColor"), + notPresent( test.css( "backgroundColor" ), [ "#000000", "#ffffff", "#000", "#fff", "rgb(0, 0, 0)", "rgb(255,255,255)" ], "Color is not endpoints in middle." ); test.stop( true, true ); } }; - test.toggleClass("testChangeBackground", { + test.toggleClass( "testChangeBackground", { duration: 2000, complete: function() { - present( test.css("backgroundColor"), [ "#ffffff", "#fff", "rgb(255, 255, 255)" ], "Color is final" ); + present( test.css( "backgroundColor" ), [ "#ffffff", "#fff", "rgb(255, 255, 255)" ], "Color is final" ); start(); } - }); -}); + } ); +} ); asyncTest( "animateClass calls step option", 1, function() { var test = jQuery( "div.animateClass" ), @@ -150,23 +150,23 @@ asyncTest( "animateClass calls step option", 1, function() { step: function() { step(); } - }); -}); + } ); +} ); asyncTest( "animateClass works with children", 3, function() { var animatedChild, - test = $("div.animateClass"), - h2 = test.find("h2"); + test = $( "div.animateClass" ), + h2 = test.find( "h2" ); - test.toggleClass("testChildren", { + test.toggleClass( "testChildren", { children: true, duration: duration, complete: function() { - equal( h2.css("fontSize"), "20px", "Text size is final during complete"); - test.toggleClass("testChildren", { + equal( h2.css( "fontSize" ), "20px", "Text size is final during complete" ); + test.toggleClass( "testChildren", { duration: duration, complete: function() { - equal( h2.css("fontSize"), "10px", "Text size revertted after class removed"); + equal( h2.css( "fontSize" ), "10px", "Text size revertted after class removed" ); start(); }, @@ -175,7 +175,7 @@ asyncTest( "animateClass works with children", 3, function() { ok( false, "Error - Animating property on h2" ); } } - }); + } ); }, step: function( val, fx ) { if ( fx.prop === "fontSize" && fx.elem === h2[ 0 ] && !animatedChild ) { @@ -183,12 +183,12 @@ asyncTest( "animateClass works with children", 3, function() { animatedChild = true; } } - }); -}); + } ); +} ); asyncTest( "animateClass clears style properties when stopped", function() { - var test = $("div.animateClass"), - style = test[0].style, + var test = $( "div.animateClass" ), + style = test[ 0 ].style, orig = style.cssText; expect( 2 ); @@ -199,7 +199,7 @@ asyncTest( "animateClass clears style properties when stopped", function() { test.stop( true, true ); equal( orig, $.trim( style.cssText ), "cssText is the same after stopping animation midway" ); start(); -}); +} ); asyncTest( "animateClass: css and class changes during animation are not lost (#7106)", function( assert ) { @@ -217,7 +217,7 @@ function( assert ) { test.addClass( "animate", minDuration, animationComplete ) .addClass( "testClass" ) .height( 100 ); -}); +} ); test( "createPlaceholder: only created for static or relative elements", function() { expect( 4 ); @@ -226,16 +226,16 @@ test( "createPlaceholder: only created for static or relative elements", functio ok( $.effects.createPlaceholder( $( ".static" ) ).length, "placeholder created for static element" ); ok( !$.effects.createPlaceholder( $( ".absolute" ) ), "placeholder not created for absolute element" ); ok( !$.effects.createPlaceholder( $( ".fixed" ) ), "placeholder not created for fixed element" ); -}); +} ); test( "createPlaceholder: preserves layout affecting properties", function() { expect( 7 ); var position = 5, - element = $( ".relative" ).css({ + element = $( ".relative" ).css( { top: position, left: position - }), + } ), before = { offset: element.offset(), outerWidth: element.outerWidth( true ), @@ -253,10 +253,10 @@ test( "createPlaceholder: preserves layout affecting properties", function() { deepEqual( before.position.top - position, placeholder.position().top, "position top preserved" ); deepEqual( before.position.left - position, placeholder.position().left, "position left preserved" ); - deepEqual( before[ "float" ], placeholder.css( "float" ), "float preserved" ); + deepEqual( before.float, placeholder.css( "float" ), "float preserved" ); deepEqual( before.outerWidth, placeholder.outerWidth( true ), "width preserved" ); deepEqual( before.outerHeight, placeholder.outerHeight( true ), "height preserved" ); -}); +} ); module( "transfer" ); @@ -321,47 +321,47 @@ $.each( $.effects.effect, function( effect ) { hidden .queue( queueTest() ) - .queue( duringTest(function() { + .queue( duringTest( function() { ok( hidden.is( ":animated" ), "Hidden is seen as animated during .show(\"" + effect + "\", time)" ); - }) ) - .show( effect, minDuration, queueTest(function() { + } ) ) + .show( effect, minDuration, queueTest( function() { equal( hidden.css( "display" ), "block", "Hidden is shown after .show(\"" + effect + "\", time)" ); ok( !$( ".ui-effects-placeholder" ).length, "No placeholder remains after .show(\"" + effect + "\", time)" ); - }) ) + } ) ) .queue( queueTest() ) - .queue( duringTest(function() { + .queue( duringTest( function() { ok( hidden.is( ":animated" ), "Hidden is seen as animated during .hide(\"" + effect + "\", time)" ); - }) ) - .hide( effect, minDuration, queueTest(function() { + } ) ) + .hide( effect, minDuration, queueTest( function() { equal( hidden.css( "display" ), "none", "Back to hidden after .hide(\"" + effect + "\", time)" ); ok( !$( ".ui-effects-placeholder" ).length, "No placeholder remains after .hide(\"" + effect + "\", time)" ); - }) ) - .queue( queueTest(function() { + } ) ) + .queue( queueTest( function() { deepEqual( hidden.queue(), [ "inprogress" ], "Only the inprogress sentinel remains" ); start(); - }) ); - }); + } ) ); + } ); asyncTest( "relative width & height - properties are preserved", function() { - var test = $("div.relWidth.relHeight"), + var test = $( "div.relWidth.relHeight" ), width = test.width(), height = test.height(), - cssWidth = test[0].style.width, cssHeight = test[0].style.height; + cssWidth = test[ 0 ].style.width, cssHeight = test[ 0 ].style.height; 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" ); + 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" ); - }); -}); + } ); +} ); } ); diff --git a/tests/unit/effects/scale.js b/tests/unit/effects/scale.js index 0558810c8..dc8e9ba71 100644 --- a/tests/unit/effects/scale.js +++ b/tests/unit/effects/scale.js @@ -41,7 +41,7 @@ function run( position, v, h, vo, ho ) { } test.css( css ); test.effect( effect ); - }); + } ); } function suite( position ) { @@ -55,18 +55,18 @@ function suite( position ) { */ } -$(function() { +$( function() { suite( "absolute" ); suite( "relative" ); var fixedElem = $( "
" ) - .css({ + .css( { position: "fixed", top: 10 - }) + } ) .appendTo( "body" ); if ( fixedElem.offset().top === 10 ) { suite( "fixed" ); } -}); +} ); } ); diff --git a/tests/visual/effects/effects.js b/tests/visual/effects/effects.js index 114dcc2a6..0b0de96f4 100644 --- a/tests/visual/effects/effects.js +++ b/tests/visual/effects/effects.js @@ -1,4 +1,4 @@ -$(function() { +$( function() { var duration = 1000, wait = 500; @@ -6,19 +6,20 @@ var duration = 1000, function effect( elem, name, options ) { $.extend( options, { easing: "easeOutQuint" - }); + } ); $( elem ).on( "click", function() { $( this ) .addClass( "current" ) + // delaying the initial animation makes sure that the queue stays in tact .delay( 10 ) .hide( name, options, duration ) .delay( wait ) .show( name, options, duration, function() { $( this ).removeClass( "current" ); - }); - }); + } ); + } ); } $( "#hide" ).on( "click", function() { @@ -28,8 +29,8 @@ $( "#hide" ).on( "click", function() { .delay( wait ) .show( duration, function() { $( this ).removeClass( "current" ); - }); -}); + } ); +} ); effect( "#blindLeft", "blind", { direction: "left" } ); effect( "#blindUp", "blind", { direction: "up" } ); @@ -68,16 +69,16 @@ $( "#sizeToggle" ).on( "click", function() { .delay( wait ) .toggle( "size", options, duration, function() { $( this ).removeClass( "current" ); - }); -}); + } ); +} ); $( "#shake" ).on( "click", function() { $( this ) .addClass( "current" ) .effect( "shake", {}, 100, function() { $( this ).removeClass( "current" ); - }); -}); + } ); +} ); effect( "#slideDown", "slide", { direction: "down" } ); effect( "#slideUp", "slide", { direction: "up" } ); @@ -89,19 +90,19 @@ $( "#transfer" ).on( "click", function() { .addClass( "current" ) .effect( "transfer", { to: "div:eq(0)" }, 1000, function() { $( this ).removeClass( "current" ); - }); -}); + } ); +} ); $( "#addClass" ).on( "click", function() { $( this ).addClass( "current", duration, function() { $( this ).removeClass( "current" ); - }); -}); + } ); +} ); $( "#removeClass" ).on( "click", function() { $( this ).addClass( "current" ).removeClass( "current", duration ); -}); +} ); $( "#toggleClass" ).on( "click", function() { $( this ).toggleClass( "current", duration ); -}); +} ); -}); +} );