Integrated the custom fx test suite into the main test suite. All tests are now run automatically. Removed the old suite, as it was no longer needed.
This commit is contained in:
John Resig
parent
e6c067858e
commit
80a149b828
9 changed files with 403 additions and 373 deletions
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
|
@ -9,4 +9,105 @@ p.result { margin-left: 1em; }
|
|||
|
||||
#banner { height: 2em; border-bottom: 1px solid white; }
|
||||
h2.pass { background-color: green; }
|
||||
h2.fail { background-color: red; }
|
||||
h2.fail { background-color: red; }
|
||||
|
||||
div#fx-tests h4 {
|
||||
background: red;
|
||||
}
|
||||
|
||||
div#fx-tests h4.pass {
|
||||
background: green;
|
||||
}
|
||||
|
||||
div#fx-tests div.box {
|
||||
background: red url(data/cow.jpg) no-repeat;
|
||||
overflow: hidden;
|
||||
border: 2px solid #000;
|
||||
}
|
||||
|
||||
div#fx-tests div.overflow {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
div.inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
div.autoheight {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
div.autowidth {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
div.autoopacity {
|
||||
opacity: auto;
|
||||
}
|
||||
|
||||
div.largewidth {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
div.largeheight {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
div.largeopacity {
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
|
||||
}
|
||||
|
||||
div.medwidth {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
div.medheight {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
div.medopacity {
|
||||
opacity: 0.5;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
|
||||
}
|
||||
|
||||
div.nowidth {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
div.noheight {
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
div.noopacity {
|
||||
opacity: 0;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
|
||||
}
|
||||
|
||||
div.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div#fx-tests div.widewidth {
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
div#fx-tests div.wideheight {
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
div#fx-tests div.widewidth.wideheight {
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
div#fx-tests div.noback {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
div.chain, div.chain div { width: 100px; height: 20px; position: relative; float: left; }
|
||||
div.chain div { position: absolute; top: 0px; left: 0px; }
|
||||
|
||||
div.chain.test { background: red; }
|
||||
div.chain.test div { background: green; }
|
||||
|
||||
div.chain.out { background: green; }
|
||||
div.chain.out div { background: red; display: none; }
|
||||
|
|
|
|||
|
|
@ -1,350 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>Animation Test Suite</title>
|
||||
<script src="../dist/jquery.js"></script>
|
||||
<style>
|
||||
div#tests h4 {
|
||||
background: red;
|
||||
}
|
||||
|
||||
div#tests h4.pass {
|
||||
background: green;
|
||||
}
|
||||
|
||||
div#tests div.box {
|
||||
background: red url(cow.jpg) no-repeat;
|
||||
overflow: hidden;
|
||||
border: 2px solid #000;
|
||||
}
|
||||
|
||||
div#tests div.overflow {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
div.inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
div.autoheight {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
div.autowidth {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
div.autoopacity {
|
||||
opacity: auto;
|
||||
}
|
||||
|
||||
div.largewidth {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
div.largeheight {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
div.largeopacity {
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
|
||||
}
|
||||
|
||||
div.medwidth {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
div.medheight {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
div.medopacity {
|
||||
opacity: 0.5;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
|
||||
}
|
||||
|
||||
div.nowidth {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
div.noheight {
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
div.noopacity {
|
||||
opacity: 0;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
|
||||
}
|
||||
|
||||
div.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div#tests div.widewidth {
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
div#tests div.wideheight {
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
div#tests div.widewidth.wideheight {
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
div#tests div.noback {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
div.chain, div.chain div { width: 100px; height: 20px; position: relative; float: left; }
|
||||
div.chain div { position: absolute; top: 0px; left: 0px; }
|
||||
|
||||
div.chain.test { background: red; }
|
||||
div.chain.test div { background: green; }
|
||||
|
||||
div.chain.out { background: green; }
|
||||
div.chain.out div { background: red; display: none; }
|
||||
</style>
|
||||
<script>
|
||||
var visible = {
|
||||
Normal: function(elem){},
|
||||
"CSS Hidden": function(elem){
|
||||
$(this).addClass("hidden");
|
||||
},
|
||||
"JS Hidden": function(elem){
|
||||
$(this).hide();
|
||||
}
|
||||
};
|
||||
|
||||
var from = {
|
||||
"CSS Auto": function(elem,prop){
|
||||
$(elem).addClass("auto" + prop)
|
||||
.text("This is a long string of text.");
|
||||
return "";
|
||||
},
|
||||
"JS Auto": function(elem,prop){
|
||||
$(elem).css(prop,"auto")
|
||||
.text("This is a long string of text.");
|
||||
return "";
|
||||
},
|
||||
"CSS 100": function(elem,prop){
|
||||
$(elem).addClass("large" + prop);
|
||||
return "";
|
||||
},
|
||||
"JS 100": function(elem,prop){
|
||||
$(elem).css(prop,prop == "opacity" ? 1 : "100px");
|
||||
return prop == "opacity" ? 1 : 100;
|
||||
},
|
||||
"CSS 50": function(elem,prop){
|
||||
$(elem).addClass("med" + prop);
|
||||
return "";
|
||||
},
|
||||
"JS 50": function(elem,prop){
|
||||
$(elem).css(prop,prop == "opacity" ? 0.50 : "50px");
|
||||
return prop == "opacity" ? 0.5 : 50;
|
||||
},
|
||||
"CSS 0": function(elem,prop){
|
||||
$(elem).addClass("no" + prop);
|
||||
return "";
|
||||
},
|
||||
"JS 0": function(elem,prop){
|
||||
$(elem).css(prop,prop == "opacity" ? 0 : "0px");
|
||||
return 0;
|
||||
}
|
||||
};
|
||||
|
||||
var to = {
|
||||
/*"Auto": function(elem,prop){
|
||||
$(elem).addClass("wide"+prop);
|
||||
return "auto";
|
||||
},*/
|
||||
/*"toggle (show)": function(elem,prop){
|
||||
$(elem).hide().addClass("wide"+prop);
|
||||
return "show";
|
||||
},*/
|
||||
"show": function(elem,prop){
|
||||
$(elem).hide().addClass("wide"+prop);
|
||||
return "show";
|
||||
},
|
||||
"hide": function(elem,prop){
|
||||
$(elem).addClass("wide"+prop);
|
||||
return "hide";
|
||||
},
|
||||
"100": function(elem,prop){
|
||||
$(elem).addClass("wide"+prop);
|
||||
return prop == "opacity" ? 1 : 100;
|
||||
},
|
||||
"50": function(elem,prop){
|
||||
return prop == "opacity" ? 0.50 : 50;
|
||||
},
|
||||
"0": function(elem,prop){
|
||||
$(elem).addClass("noback");
|
||||
return 0;
|
||||
}
|
||||
};
|
||||
|
||||
/*var oldAttr = jQuery.attr;
|
||||
|
||||
jQuery.attr = function( elem, name, value ){
|
||||
if ( arguments.length == 3 ) {
|
||||
var prev = elem.previousSibling;
|
||||
if ( prev && prev.nodeName == "UL" ) {
|
||||
$(prev).append( name + ": " + value );
|
||||
}
|
||||
}
|
||||
|
||||
return oldAttr.apply( jQuery, arguments );
|
||||
};*/
|
||||
|
||||
$(document).ready(function(){
|
||||
makeTest( "JS Overflow and Display" )
|
||||
.addClass("widewidth")
|
||||
.css({ overflow: "visible", display: "inline" })
|
||||
.add( makeTest( "CSS Overflow and Display" ).addClass("overflow inline") )
|
||||
.addClass("widewidth")
|
||||
.text("Some sample text.")
|
||||
.before("text before")
|
||||
.after("text after")
|
||||
.animate({ opacity: 0.5 }, "slow", function(){
|
||||
var o = jQuery.css( this, "overflow" );
|
||||
if ( o != "visible" )
|
||||
return msg(this, "Overflow should be visible: " + o);
|
||||
|
||||
if ( jQuery.css( this, "display" ) != "inline" )
|
||||
return msg(this, "Display has been tampered with.");
|
||||
|
||||
pass( this );
|
||||
});
|
||||
|
||||
jQuery.each( from, function(fn, f){
|
||||
jQuery.each( to, function(tn, t){
|
||||
var elem = makeTest( fn + " to " + tn );
|
||||
|
||||
var t_w = t( elem, "width" );
|
||||
var f_w = f( elem, "width" );
|
||||
var t_h = t( elem, "height" );
|
||||
var f_h = f( elem, "height" );
|
||||
var t_o = t( elem, "opacity" );
|
||||
var f_o = f( elem, "opacity" );
|
||||
|
||||
var anim = { width: t_w, height: t_h, opacity: t_o };
|
||||
|
||||
elem.animate(anim, "slow", function(){
|
||||
if ( t_w == "show" && this.style.display != "block" )
|
||||
return msg(this, "Showing, display not block: " + this.style.display);
|
||||
|
||||
if ( (t_w == "hide"||t_w == "show") && this.style.width.indexOf(f_w) != 0 )
|
||||
return msg(this, "Width not reset to " + f_w + ": " + this.style.width);
|
||||
|
||||
if ( (t_h == "hide"||t_h == "show") && this.style.height.indexOf(f_h) != 0 )
|
||||
return msg(this, "Height not reset to " + f_h + ": " + this.style.height);
|
||||
|
||||
var cur_o = jQuery.attr(this.style, "opacity");
|
||||
if ( cur_o !== "" ) cur_o = parseFloat( cur_o );
|
||||
|
||||
if ( (t_o == "hide"||t_o == "show") && cur_o != f_o ) {
|
||||
return msg(this, "Opacity not reset to " + f_o + ": " + cur_o);
|
||||
}
|
||||
|
||||
if ( t_w == "hide" && this.style.display != "none" )
|
||||
return msg(this, "Hiding, display not none: " + this.style.display);
|
||||
|
||||
if ( t_o.constructor == Number && cur_o != t_o )
|
||||
return msg(this, "Final opacity is not " + t_o + ": " + cur_o);
|
||||
|
||||
if ( t_w.constructor == Number && this.style.width != t_w + "px" )
|
||||
return msg(this, "Final width is not " + t_w + ": " + this.style.width);
|
||||
|
||||
if ( t_h.constructor == Number && this.style.height != t_h + "px" )
|
||||
return msg(this, "Final height is not " + t_h + ": " + this.style.height);
|
||||
|
||||
var cur_w = jQuery.css(this,"width");
|
||||
if ( t_w.constructor == Number && this.style.width == "" && cur_w != t_w )
|
||||
return msg(this, "Width should be explicitly set to " + t_w + ", is instead: " + cur_w);
|
||||
|
||||
var cur_h = jQuery.css(this,"height");
|
||||
if ( t_h.constructor == Number && this.style.height == "" && cur_h != t_h )
|
||||
return msg(this, "Height should be explicitly set to " + t_h + ", is instead: " + cur_w);
|
||||
|
||||
if ( t_o.constructor == Number && jQuery.curCSS(this, "opacity") == "" && cur_o != t_o )
|
||||
return msg(this, "Opacity should be explicitly set to " + t_o + ", is instead: " + cur_o);
|
||||
|
||||
if ( t_h == "show" ) {
|
||||
var old_h = jQuery.curCSS(this, "height");
|
||||
$(elem).append("<br>Some more text<br>and some more...");
|
||||
if ( old_h == jQuery.css(this, "height" ) )
|
||||
return msg(this, "Height is not truly auto.");
|
||||
}
|
||||
|
||||
pass( this );
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Chaining Tests
|
||||
$('#fadein div').fadeOut('fast').fadeIn('fast');
|
||||
$('#fadeout div').fadeIn('fast').fadeOut('fast');
|
||||
|
||||
$('#show div').hide('fast').show('fast');
|
||||
$('#hide div').show('fast').hide('fast');
|
||||
|
||||
$('#togglein div').toggle('fast').toggle('fast');
|
||||
$('#toggleout div').toggle('fast').toggle('fast');
|
||||
|
||||
$('#slidedown div').slideDown('fast').slideUp('fast');
|
||||
$('#slideup div').slideUp('fast').slideDown('fast');
|
||||
|
||||
$('#slidetogglein div').slideToggle('fast').slideToggle('fast');
|
||||
$('#slidetoggleout div').slideToggle('fast').slideToggle('fast');
|
||||
});
|
||||
|
||||
function pass( elem ) {
|
||||
$(elem).prev().addClass("pass");
|
||||
}
|
||||
|
||||
function makeTest( text ){
|
||||
var elem = $("<div></div>")
|
||||
.attr("id", "test" + makeTest.id++)
|
||||
.addClass("box");
|
||||
|
||||
$("<h4></h4>")
|
||||
.text( text )
|
||||
.appendTo("#tests")
|
||||
.click(function(){
|
||||
$(this).next().toggle();
|
||||
})
|
||||
.after( elem );
|
||||
|
||||
return elem;
|
||||
}
|
||||
|
||||
makeTest.id = 1;
|
||||
|
||||
function msg(elem,txt){
|
||||
$(elem).prev().append( "<tt> " + txt + "</tt>" );
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<b>Chain Tests:</b><br/>
|
||||
<div id="fadein" class='chain test'>fadeIn<div>fadeIn</div></div>
|
||||
<div id="fadeout" class='chain test out'>fadeOut<div>fadeOut</div></div>
|
||||
|
||||
<div id="show" class='chain test'>show<div>show</div></div>
|
||||
<div id="hide" class='chain test out'>hide<div>hide</div></div>
|
||||
|
||||
<div id="togglein" class='chain test'>togglein<div>togglein</div></div>
|
||||
<div id="toggleout" class='chain test out'>toggleout<div>toggleout</div></div>
|
||||
<br style="clear:both;"/>
|
||||
|
||||
<div id="slideup" class='chain test'>slideUp<div>slideUp</div></div>
|
||||
<div id="slidedown" class='chain test out'>slideDown<div>slideDown</div></div>
|
||||
|
||||
<div id="slidetogglein" class='chain test'>slideToggleIn<div>slideToggleIn</div></div>
|
||||
<div id="slidetoggleout" class='chain test out'>slideToggleOut<div>slideToggleOut</div></div>
|
||||
<br style="clear:both;"/>
|
||||
|
||||
<div id="tests"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<html id="html">
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr" id="html">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/css; charset=utf-8" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>jQuery Test Suite</title>
|
||||
<link rel="Stylesheet" media="screen" href="data/testsuite.css" />
|
||||
<script type="text/javascript" src="../dist/jquery.js"></script>
|
||||
|
|
@ -95,6 +96,26 @@
|
|||
<input type="text" id="idTest" name="id"/>
|
||||
</form>
|
||||
<table id="table"></table>
|
||||
|
||||
<div id="fx-queue">
|
||||
<div id="fadein" class='chain test'>fadeIn<div>fadeIn</div></div>
|
||||
<div id="fadeout" class='chain test out'>fadeOut<div>fadeOut</div></div>
|
||||
|
||||
<div id="show" class='chain test'>show<div>show</div></div>
|
||||
<div id="hide" class='chain test out'>hide<div>hide</div></div>
|
||||
|
||||
<div id="togglein" class='chain test'>togglein<div>togglein</div></div>
|
||||
<div id="toggleout" class='chain test out'>toggleout<div>toggleout</div></div>
|
||||
|
||||
|
||||
<div id="slideup" class='chain test'>slideUp<div>slideUp</div></div>
|
||||
<div id="slidedown" class='chain test out'>slideDown<div>slideDown</div></div>
|
||||
|
||||
<div id="slidetogglein" class='chain test'>slideToggleIn<div>slideToggleIn</div></div>
|
||||
<div id="slidetoggleout" class='chain test out'>slideToggleOut<div>slideToggleOut</div></div>
|
||||
</div>
|
||||
|
||||
<div id="fx-tests"></div>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue