Merge commit 'd21ea7816e' as 'jquery-ui'

This commit is contained in:
Mark Schouten 2016-08-05 13:20:20 +02:00
commit e904a80717
629 changed files with 341074 additions and 0 deletions

View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title>
<script src="../../../external/jquery/jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<link rel="stylesheet" href="../qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../qunit-composite.js"></script>
<script src="../subsuite.js"></script>
<script>
testAllVersions( "effects" );
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
</div>
</body>
</html>

View file

@ -0,0 +1,115 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title>
<script src="../../jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script>
TestHelpers.loadResources({
js: [
"ui/effect.js",
"ui/effect-blind.js",
"ui/effect-bounce.js",
"ui/effect-clip.js",
"ui/effect-drop.js",
"ui/effect-explode.js",
"ui/effect-fade.js",
"ui/effect-fold.js",
"ui/effect-highlight.js",
"ui/effect-puff.js",
"ui/effect-pulsate.js",
"ui/effect-scale.js",
"ui/effect-shake.js",
"ui/effect-size.js",
"ui/effect-slide.js",
"ui/effect-transfer.js"
]
});
</script>
<script src="effects_core.js"></script>
<script src="effects_scale.js"></script>
<script src="../swarminject.js"></script>
<style>
#qunit-fixture {
width: 1000px;
height: 1000px;
}
.hidden {
display: none;
}
.test {
background: #000;
border: 0;
width: 100px;
height: 100px;
}
.testAddBorder {
border: 10px solid #000;
}
.testChildren,
.testChangeBackground {
background: #fff;
}
.test h2 {
font-size: 10px;
}
.testChildren h2 {
font-size: 20px;
}
.relWidth {
width: 50%;
}
.relHeight {
height: 50%;
}
.testScale {
border: 5px solid #000;
padding: 5px;
margin: 5px;
width: 50px;
height: 50px;
}
.ticket7106 {
width: 50px;
height: 50px;
}
.ticket7106.animate {
width: 100px;
}
</style>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div id="elem" class="test">
</div>
<div class="hidden test">
<div>.</div>
</div>
<div class="animateClass test">
<h2>Child Element Test</h2>
</div>
<div class="relWidth relHeight testAddBorder">
<h2>Slide with relative width</h2>
</div>
<div class="testScale">
</div>
<div class="ticket7106">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,271 @@
(function($) {
function present( value, array, message ) {
QUnit.push( jQuery.inArray( value, array ) !== -1 , value, array, message );
}
function notPresent( value, array, message ) {
QUnit.push( jQuery.inArray( value, array ) === -1 , value, array, message );
}
// minDuration is used for "short" animate tests where we are only concerned about the final
var minDuration = 15,
// duration is used for "long" animates where we plan on testing properties during animation
duration = 200;
module( "effects.core" );
// TODO: test all signatures of .show(), .hide(), .toggle().
// Look at core's signatures and UI's signatures.
asyncTest( ".hide() with step", function() {
expect( 1 );
var element = $( "#elem" ),
step = function() {
ok( true, "step callback invoked" );
step = $.noop;
};
element.hide({
step: function() {
step();
},
complete: start
});
});
test( "Immediate Return Conditions", function() {
var hidden = $( "div.hidden" ),
count = 0;
expect( 3 );
hidden.hide( "blind", function() {
equal( ++count, 1, "Hide on hidden returned immediately" );
}).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" ),
count = 0;
expect( 1 );
hidden.show( "blind", null, 1, function() {
equal( ++count, 1, "null for options still works" );
start();
});
});
test( "removeClass", function() {
expect( 3 );
var element = $( "<div>" );
equal( "", element[ 0 ].className );
element.addClass( "destroyed" );
equal( "destroyed", element[ 0 ].className );
element.removeClass();
equal( "", element[ 0 ].className );
});
/* TODO: Disabled - Can't figure out why this is failing in IE 6/7
test( "createWrapper and removeWrapper retain focused elements (#7595)", function() {
expect( 2 );
var test = $( "div.hidden" ).show(),
input = $( "<input type='text'>" ).appendTo( test ).focus();
$.effects.createWrapper( test );
equal( document.activeElement, input[ 0 ], "Active element is still input after createWrapper" );
$.effects.removeWrapper( test );
equal( document.activeElement, input[ 0 ], "Active element is still input after removeWrapper" );
});
*/
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" );
start();
});
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"),
oldStep = jQuery.fx.step.backgroundColor;
expect(2);
// we want to catch the first frame of animation
jQuery.fx.step.backgroundColor = function( fx ) {
oldStep.apply( this, arguments );
// make sure it has animated somewhere we can detect
if ( fx.pos > 255 / 2000 ) {
jQuery.fx.step.backgroundColor = oldStep;
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", {
duration: 2000,
complete: function() {
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" ),
step = function() {
ok( true, "Step Function Called" );
test.stop();
start();
step = $.noop;
};
test.toggleClass( "testChangeBackground", {
step: function() {
step();
}
});
});
asyncTest( "animateClass works with children", 3, function() {
var animatedChild,
test = $("div.animateClass"),
h2 = test.find("h2");
test.toggleClass("testChildren", {
children: true,
duration: duration,
complete: function() {
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");
start();
},
step: function( val, fx ) {
if ( fx.elem === h2[ 0 ] ) {
ok( false, "Error - Animating property on h2" );
}
}
});
},
step: function( val, fx ) {
if ( fx.prop === "fontSize" && fx.elem === h2[ 0 ] && !animatedChild ) {
equal( fx.end, 20, "animating font size on child" );
animatedChild = true;
}
}
});
});
asyncTest( "animateClass clears style properties when stopped", function() {
var test = $("div.animateClass"),
style = test[0].style,
orig = style.cssText;
expect( 2 );
test.addClass( "testChangeBackground", duration );
notEqual( orig, style.cssText, "cssText is not the same after starting animation" );
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() {
expect( 2 );
var test = $( "div.ticket7106" );
// ensure the class stays and that the css property stays
function animationComplete() {
ok( test.hasClass( "testClass" ), "class change during animateClass was not lost" );
equal( test.height(), 100, "css change during animateClass was not lost" );
start();
}
// add a class and change a style property after starting an animated class
test.addClass( "animate", minDuration, animationComplete )
.addClass( "testClass" )
.height( 100 );
});
$.each( $.effects.effect, function( effect ) {
module( "effects." + effect );
TestHelpers.testJshint( "effect-" + effect );
if ( effect === "transfer" ) {
return;
}
asyncTest( "show/hide", function() {
expect( 8 );
var hidden = $( "div.hidden" ),
count = 0,
test = 0;
function queueTest( fn ) {
count++;
var point = count;
return function( next ) {
test++;
equal( point, test, "Queue function fired in order" );
if ( fn ) {
fn();
} else {
setTimeout( next, minDuration );
}
};
}
hidden.queue( queueTest() ).show( effect, minDuration, queueTest(function() {
equal( hidden.css("display"), "block", "Hidden is shown after .show(\"" +effect+ "\", time)" );
})).queue( queueTest() ).hide( effect, minDuration, queueTest(function() {
equal( hidden.css("display"), "none", "Back to hidden after .hide(\"" +effect+ "\", time)" );
})).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"),
width = test.width(), height = test.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" );
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" );
});
});
})(jQuery);

View file

@ -0,0 +1,68 @@
(function( $ ) {
module( "effect.scale: Scale" );
function run( position, v, h, vo, ho ) {
var desc = "End Position Correct: " + position + " (" + v + "," + h + ") - origin: (" + vo + "," + ho + ")";
asyncTest( desc, function() {
expect( 2 );
function complete() {
equal( parseInt( test.css( h ), 10 ), target[ h ], "Horizontal Position Correct " + desc );
equal( parseInt( test.css( v ), 10 ), target[ v ], "Vertical Position Correct " + desc );
start();
}
var test = $( ".testScale" ),
css = {
position: position
},
effect = {
effect: "scale",
mode: "effect",
percent: 200,
origin: [ vo, ho ],
complete: complete,
duration: 1
},
target = {},
relative = position === "relative";
css[ h ] = 33;
css[ v ] = 33;
target[ h ] = h === ho ? css[ h ] : ho === "center" ? css[ h ] - 35 : css[ h ] - 70;
target[ v ] = v === vo ? css[ v ] : vo === "middle" ? css[ v ] - 35 : css[ v ] - 70;
if ( relative && h === "right" ) {
target[ h ] += 70;
}
if ( relative && v === "bottom" ) {
target[ v ] += 70;
}
test.css( css );
test.effect( effect );
});
}
function suite( position ) {
run( position, "top", "left", "top", "left" );
run( position, "top", "left", "middle", "center" );
run( position, "top", "left", "bottom", "right" );
/* Firefox is currently not capable of supporting detection of bottom and right....
run( position, "bottom", "right", "top", "left" );
run( position, "bottom", "right", "middle", "center" );
run( position, "bottom", "right", "bottom", "right" );
*/
}
$(function() {
suite( "absolute" );
suite( "relative" );
var fixedElem = $( "<div>" )
.css({
position: "fixed",
top: 10
})
.appendTo( "body" );
if ( fixedElem.offset().top === 10 ) {
suite( "fixed" );
}
});
})( jQuery );