/bower_components/velocity/test/index.html |
@@ -0,0 +1,1812 @@ |
<!DOCTYPE HTML> |
<html> |
<head> |
<title>Velocity.js Tests</title> |
<link rel="stylesheet" href="qunit-1.14.0.css" type="text/css" media="screen" /> |
<script type="text/javascript" src="qunit-1.14.0.js"></script> |
<script type="text/javascript" src="jquery-1.12.4.js"></script> |
<script type="text/javascript" src="when.js"></script> |
<!--<script type="text/javascript" src="zepto.js"></script>--> |
<script type="text/javascript" src="../velocity.js"></script> |
<script type="text/javascript" src="../velocity.ui.js"></script> |
<style> |
#details { |
margin: 0 auto; |
margin-bottom: 1em; |
|
width: 800px; |
padding: 0; |
|
line-height: 1.35em; |
list-style: none; |
} |
</style> |
</head> |
<body> |
<ul id="details"> |
<li> |
Unit tests: <i><b>current document</b>.</i> |
</li> |
<li> |
Performance tests: <i>See <b>Performance</b> pane in <a href="../../index.html#performance">docs</a>.</i> |
</li> |
<li> |
Property support tests: <i>Run the Property Support pane's <a href="../../index.html#propertiesTest">auto-cycler</a>.</i> |
</li> |
<li> |
Visual tests: <i>See <a href="../../demo.html"><b>demo</b></a>. Read demo's source for intended behavior.</i> |
</li> |
</ul> |
<div id="qunit"></div> |
<div id="qunit-stage"></div> |
<script> |
|
// Needed tests: |
// - new stop behvaior |
// - e/p/o shorthands |
|
/********************* |
Helper Functions |
*********************/ |
|
/* IE detection: https://gist.github.com/julianshapiro/9098609 */ |
var IE = (function() { |
if (document.documentMode) { |
return document.documentMode; |
} else { |
for (var i = 7; i > 0; i--) { |
var div = document.createElement("div"); |
|
div.innerHTML = "<!" + "--[if IE " + i + "]><span></span><![endif]--" + ">"; |
|
if (div.getElementsByTagName("span").length) { |
div = null; |
|
return i; |
} |
|
div = null; |
} |
} |
|
return undefined; |
})(); |
|
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); |
var isAndroid = /Android/i.test(navigator.userAgent); |
|
function applyStartValues (element, startValues) { |
Velocity.Utilities.each(startValues, function(property, startValue) { |
element.style[property] = startValue; |
}); |
} |
|
/********************* |
IE<=7 Reversion |
*********************/ |
|
if (IE <= 7 && $.fn.velocity) { |
alert("Velocity wasn't reverted to jQuery's $.animate() for IE<=7."); |
} |
|
/******************* |
jQuery Shim |
*******************/ |
|
var $ = (window.jQuery || window.Zepto); |
|
Data = function(element) { |
return Velocity.Utilities.data(element, "velocity"); |
}; |
|
if ($ && $.Velocity) { |
window.Velocity = $.Velocity; |
} |
|
/******************* |
Setup: Targets |
*******************/ |
|
var $qunitStage = document.getElementById("qunit-stage"); |
|
var targetsFragment = document.createDocumentFragment(), |
targetsIndex = 0, |
$targets, |
$targetSet, |
defaultStyles = { |
opacity: 1, |
width: 1, |
height: 1, |
marginBottom: 1, |
colorGreen: 200 |
}; |
|
for (var i = 0; i < 200; i++) { |
var div = document.createElement("div"); |
|
div.className = "target"; |
div.style.opacity = defaultStyles.opacity; |
div.style.color = "rgb(125, " + defaultStyles.colorGreen + ", 125)"; |
div.style.width = defaultStyles.width + "px"; |
div.style.height = defaultStyles.height + "px"; |
div.style.marginBottom = defaultStyles.marginBottom + "px"; |
div.style.textShadow = "0px 0px " + defaultStyles.textShadowBlur + "px red"; |
|
targetsFragment.appendChild(div); |
div = null; |
} |
|
$qunitStage.appendChild(targetsFragment); |
$targets = $qunitStage.querySelectorAll(".target"); |
|
function getTarget () { |
var newTarget = $targets[targetsIndex++]; |
|
return newTarget; |
} |
|
/******************** |
Setup: Settings |
********************/ |
|
var pluginName = "velocity", |
defaultProperties = { |
opacity: defaultStyles.opacity / 2, |
width: defaultStyles.width * 2, |
height: defaultStyles.height * 2, |
colorGreen: defaultStyles.colorGreen / 2 |
}, |
defaultOptions = { |
queue: "", |
duration: 300, |
easing: "swing", |
begin: null, |
complete: null, |
progress: null, |
display: null, |
loop: false, |
delay: false, |
mobileHA: true, |
_cacheValues: true |
}, |
asyncCheckDuration = defaultOptions.duration / 2, |
completeCheckDuration = defaultOptions.duration * 2; |
|
Velocity.defaults = defaultOptions; |
|
/**************** |
Arguments |
****************/ |
|
QUnit.test("Arguments", function(assert) { |
var testComplete = function() { /* Do nothing */ }, |
testDuration = 1000, |
testEasing = "easeInSine", |
testOptions = { |
queue: defaultOptions.queue, |
duration: testDuration, |
easing: testEasing, |
begin: null, |
complete: testComplete, |
progress: null, |
display: "block", |
loop: false, |
delay: false, |
mobileHA: false, |
_cacheValues: defaultOptions._cacheValues |
}; |
|
/********************** |
Invalid Arguments |
**********************/ |
|
var $target1 = getTarget(); |
/* No arguments: Ensure an error isn't thrown and that the $targeted elements are returned to the chain. */ |
Velocity(); |
Velocity($target1); |
Velocity($target1, {}); |
Velocity($target1, {}, testDuration); |
/* Invalid arguments: Ensure an error isn't thrown. */ |
Velocity($target1, "fakeArg1", "fakeArg2"); |
|
/**************** |
Overloading |
****************/ |
|
var $target3 = getTarget(); |
Velocity($target3, defaultProperties, testDuration); |
assert.equal(Data($target3, pluginName).opts.duration, testDuration, "Overload variation #2."); |
|
var $target4 = getTarget(); |
Velocity($target4, defaultProperties, testEasing); |
assert.equal(Data($target4, pluginName).opts.easing, testEasing, "Overload variation #3."); |
|
var $target5 = getTarget(); |
Velocity($target5, defaultProperties, testComplete); |
assert.equal(Data($target5, pluginName).opts.complete, testComplete, "Overload variation #4."); |
|
var $target6 = getTarget(); |
Velocity($target6, defaultProperties, testDuration, [ 0.42, 0, 0.58, 1 ]); |
assert.equal(Data($target6, pluginName).opts.duration, testDuration, "Overload variation #5a."); |
assert.equal(Data($target6, pluginName).opts.easing(0.2), 0.0816598562658975, "Overload variation #5b."); |
|
var $target7 = getTarget(); |
Velocity($target7, defaultProperties, testDuration, testComplete); |
assert.equal(Data($target7, pluginName).opts.duration, testDuration, "Overload variation #6a."); |
assert.equal(Data($target7, pluginName).opts.complete, testComplete, "Overload variation #6b."); |
|
var $target8 = getTarget(); |
Velocity($target8, defaultProperties, testDuration, testEasing, testComplete); |
assert.equal(Data($target8, pluginName).opts.duration, testDuration, "Overload variation #7a."); |
assert.equal(Data($target8, pluginName).opts.easing, testEasing, "Overload variation #7b."); |
assert.equal(Data($target8, pluginName).opts.complete, testComplete, "Overload variation #7c."); |
|
var $target9 = getTarget(); |
Velocity($target9, defaultProperties, testOptions); |
assert.deepEqual(Data($target9, pluginName).opts, testOptions, "Overload variation #8: options object."); |
|
var $target10 = getTarget(); |
Velocity({ elements: $target10, properties: defaultProperties, options: testOptions }); |
assert.deepEqual(Data($target10, pluginName).opts, testOptions, "Overload variation #9: single object w/ map."); |
|
var $target11 = getTarget(); |
Velocity({ elements: $target11, properties: "fadeOut", options: testOptions }); |
assert.strictEqual(Data($target11, pluginName).tweensContainer.opacity.endValue, 0, "Overload variation #9: single object w/ redirect."); |
|
var $target12 = getTarget(); |
Velocity($target12, { opacity: [ 0.75, "spring", 0.25 ]}, testDuration); |
assert.equal(Data($target12, pluginName).tweensContainer.opacity.startValue, 0.25, "Overload variation #10a."); |
assert.equal(Data($target12, pluginName).tweensContainer.opacity.easing, "spring", "Overload variation #10b."); |
assert.equal(Data($target12, pluginName).tweensContainer.opacity.endValue, 0.75, "Overload variation #10c."); |
|
var $target13 = getTarget(); |
Velocity($target13, { opacity: [ 0.75, 0.25 ]}, testDuration); |
assert.equal(Data($target13, pluginName).tweensContainer.opacity.startValue, 0.25, "Overload variation #11a."); |
assert.equal(Data($target13, pluginName).tweensContainer.opacity.endValue, 0.75, "Overload variation #11b."); |
|
var $target14 = getTarget(); |
Velocity($target14, { opacity: [ 0.75, "spring" ]}, testDuration); |
assert.equal(Data($target14, pluginName).tweensContainer.opacity.endValue, 0.75, "Overload variation #12a."); |
assert.equal(Data($target14, pluginName).tweensContainer.opacity.easing, "spring", "Overload variation #12b."); |
|
var $target15 = getTarget(); |
Velocity($target15, defaultProperties, "fast", testEasing); |
assert.equal(Data($target15, pluginName).opts.duration, 200, "Overload variation #13a."); |
|
var $target16 = getTarget(); |
Velocity($target16, defaultProperties, "normal"); |
assert.equal(Data($target16, pluginName).opts.duration, 400, "Overload variation #13b."); |
|
if ($) { |
var $target17 = getTarget(); |
$($target17).velocity(defaultProperties, testOptions); |
assert.deepEqual(Data($target17, pluginName).opts, testOptions, "$.fn.: Utility function variation #1: options object."); |
|
var $target18 = getTarget(); |
$($target18).velocity({ properties: defaultProperties, options: testOptions }); |
assert.deepEqual(Data($target18, pluginName).opts, testOptions, "$.fn.: Utility function variation #2: single object."); |
|
var $target19 = getTarget(); |
$($target19).velocity(defaultProperties, testDuration, testEasing, testComplete); |
assert.equal(Data($target19, pluginName).opts.duration, testDuration, "$.fn.: Utility function variation #2a."); |
assert.equal(Data($target19, pluginName).opts.easing, testEasing, "$.fn.: Utility function variation #2b."); |
assert.equal(Data($target19, pluginName).opts.complete, testComplete, "$.fn.: Utility function variation #2c."); |
|
var $target20 = getTarget(); |
assert.deepEqual($($target20), $($target20).velocity(defaultProperties, testDuration, testEasing, testComplete).velocity(defaultProperties, testDuration, testEasing, testComplete), "$.fn.: Elements passed back to the call stack."); |
} |
}); |
|
/****************** |
CSS Object |
******************/ |
|
/* Note: We don't bother checking all of the GET/SET-related CSS object's functions, as most are repeatedly tested indirectly via the other tests. */ |
QUnit.test("CSS Object", function(assert) { |
var CSS = Velocity.CSS; |
|
var testHookRoot = "boxShadow", |
testHookRootValue = IE >=9 ? "1px 2px 3px 4px black" : "black 1px 2px 3px 4px", |
testHook = "boxShadowY", |
testHookValueExtracted = "2px", |
testHookValueInject = "10px", |
testHookRootValueInjected = "1px 10px 3px 4px"; |
|
/* Hooks manipulation. */ |
assert.equal(CSS.Hooks.getRoot(testHook), testHookRoot, "Hooks.getRoot() returned root."); |
|
/* Hooks have no effect if they're unsupported (which is the case for our hooks on <=IE8), thus we just ensure that errors aren't thrown. */ |
if (IE <=8) { |
CSS.Hooks.extractValue(testHook, testHookRootValue); |
CSS.Hooks.injectValue(testHook, testHookValueInject, testHookRootValue); |
} else { |
assert.equal(CSS.Hooks.extractValue(testHook, testHookRootValue), testHookValueExtracted, "Hooks.extractValue() returned value #1."); |
/* Check for a match anywhere in the string since browser differ in where they inject the color value. */ |
assert.equal(CSS.Hooks.injectValue(testHook, testHookValueInject, testHookRootValue).indexOf(testHookRootValueInjected) !== -1, true, "Hooks.extractValue() returned value #2."); |
} |
|
/* Varied start color formats. Ensure that all variations of red output contain the same color copmonents when Normalized: "255 0 0". */ |
var redVariations = [ |
"rgb(255, 0, 0)", |
"rgba(255,0,0,0.5)", |
"#ff0000", |
"red" |
]; |
|
Velocity.Utilities.each(redVariations, function(i, redVariation) { |
assert.equal(/255 0 0/.test(CSS.Normalizations.registered["color"]("extract", null, redVariation)), true, "Normalizations.extractValue() returned red color variation #" + i + "."); |
}); |
|
var testPropertyFake = "fakeProperty"; |
|
/* Property name functions. */ |
assert.equal(CSS.Names.prefixCheck(testPropertyFake)[0], testPropertyFake, "Names.prefixCheck() returned unmatched property untouched."); |
assert.equal(CSS.Names.prefixCheck(testPropertyFake)[1], false, "Names.prefixCheck() indicated that unmatched property waws unmatched."); |
assert.equal(CSS.Values.isCSSNullValue("rgba(0,0,0,0)"), true, "Values.isCSSNullValue() matched null value #1."); |
assert.equal(CSS.Values.isCSSNullValue("none"), true, "Values.isCSSNullValue() matched null value #2."); |
assert.equal(CSS.Values.isCSSNullValue(10), false, "Values.isCSSNullValue() didn't match non-null value."); |
|
var testUnitProperty1 = "rotateZ", |
testUnitPropertyUnit1 = "deg", |
testUnitProperty2 = "width", |
testUnitPropertyUnit2 = "px", |
testElementType1 = document.createElement("div"), |
testElementTypeDisplay1 = "block", |
testElementType2 = document.createElement("span"), |
testElementTypeDisplay2 = "inline"; |
|
/* CSS value functions. */ |
assert.equal(CSS.Values.getUnitType(testUnitProperty1), testUnitPropertyUnit1, "Unit type #1 was retrieved."); |
assert.equal(CSS.Values.getUnitType(testUnitProperty2), testUnitPropertyUnit2, "Unit type #2 was retrieved."); |
|
/* Class addition/removal. */ |
var $target1 = getTarget(); |
$target1.className = ""; |
CSS.Values.addClass($target1, "one"); |
assert.equal($target1.className, "one", "First class was added."); |
CSS.Values.addClass($target1, "two"); |
assert.equal($target1.className, "one two", "Second class was added."); |
|
CSS.Values.removeClass($target1, "two"); |
assert.equal($target1.className.replace(/^\s+|\s+$/g, ""), "one", "Second class was removed."); |
CSS.Values.removeClass($target1, "one"); |
assert.equal($target1.className.replace(/^\s+|\s+$/g, ""), "", "First class was removed."); |
}); |
|
/**************************** |
Start Value Calculation |
****************************/ |
|
QUnit.test("Start Value Calculation", function(assert) { |
var testStartValues = { paddingLeft: "10px", height: "100px", paddingRight: "50%", marginLeft: "100px", marginBottom: "33%", marginTop: "100px", lineHeight: "30px", wordSpacing: "40px", backgroundColorRed: "123" }; |
|
/* Properties not previously defined on the element. */ |
var $target1 = getTarget(); |
Velocity($target1, testStartValues); |
assert.equal(Data($target1, pluginName).tweensContainer.paddingLeft.startValue, 0, "Undefined standard start value was calculated."); |
assert.equal(Data($target1, pluginName).tweensContainer.backgroundColorRed.startValue, 255, "Undefined start value hook was calculated."); |
|
/* Properties previously defined on the element. */ |
var $target2 = getTarget(); |
Velocity($target2, defaultProperties); |
assert.equal(Data($target2, pluginName).tweensContainer.width.startValue, parseFloat(defaultStyles.width), "Defined start value #1 was calculated."); |
assert.equal(Data($target2, pluginName).tweensContainer.opacity.startValue, parseFloat(defaultStyles.opacity), "Defined start value #2 was calculated."); |
assert.equal(Data($target2, pluginName).tweensContainer.colorGreen.startValue, parseFloat(defaultStyles.colorGreen), "Defined hooked start value was calculated."); |
|
/* Properties that shouldn't cause start values to be unit-converted. */ |
var testPropertiesEndNoConvert = { paddingLeft: "20px", height: "40px", paddingRight: "75%" }; |
var $target3 = getTarget(); |
applyStartValues($target3, testStartValues); |
Velocity($target3, testPropertiesEndNoConvert); |
assert.equal(Data($target3, pluginName).tweensContainer.paddingLeft.startValue, parseFloat(testStartValues.paddingLeft), "Start value #1 wasn't unit converted."); |
assert.equal(Data($target3, pluginName).tweensContainer.height.startValue, parseFloat(testStartValues.height), "Start value #2 wasn't unit converted."); |
// assert.deepEqual(Data($target3, pluginName).tweensContainer.paddingRight.startValue, [Math.floor((parentWidth * parseFloat(testStartValues.paddingRight)) / 100), 0], "Start value #3 was pattern matched."); |
|
/* Properties that should cause start values to be unit-converted. */ |
var testPropertiesEndConvert = { paddingLeft: "20%", height: "40%", lineHeight: "0.5em", wordSpacing: "2rem", marginLeft: "10vw", marginTop: "5vh", marginBottom: "100px" }; |
parentWidth = $qunitStage.clientWidth, |
parentHeight = $qunitStage.clientHeight, |
parentFontSize = Velocity.CSS.getPropertyValue($qunitStage, "fontSize"), |
remSize = parseFloat(Velocity.CSS.getPropertyValue(document.body, "fontSize")); |
|
var $target4 = getTarget(); |
applyStartValues($target4, testStartValues); |
Velocity($target4, testPropertiesEndConvert); |
|
/* Long decimal results can be returned after unit conversion, and Velocity's code and the code here can differ in precision. So, we round floor values before comparison. */ |
// assert.deepEqual(Data($target4, pluginName).tweensContainer.paddingLeft.startValue, [parseFloat(testStartValues.paddingLeft), 0], "Horizontal property converted to %."); |
assert.equal(Math.floor(Data($target4, pluginName).tweensContainer.height.startValue), Math.floor((parseFloat(testStartValues.height) / parentHeight) * 100), "Vertical property converted to %."); |
// assert.equal(Data($target4, pluginName).tweensContainer.lineHeight.startValue, Math.floor(parseFloat(testStartValues.lineHeight) / parseFloat(parentFontSize)), "Property converted to em."); |
// assert.equal(Data($target4, pluginName).tweensContainer.wordSpacing.startValue, Math.floor(parseFloat(testStartValues.wordSpacing) / parseFloat(remSize)), "Property converted to rem."); |
assert.equal(Math.floor(Data($target4, pluginName).tweensContainer.marginBottom.startValue), parseFloat(testStartValues.marginBottom) / 100 * parseFloat($target4.parentNode.offsetWidth), "Property converted to px."); |
|
// if (!(IE<=8) && !isAndroid) { |
// assert.equal(Data($target4, pluginName).tweensContainer.marginLeft.startValue, Math.floor(parseFloat(testStartValues.marginLeft) / window.innerWidth * 100), "Horizontal property converted to vw."); |
// assert.equal(Data($target4, pluginName).tweensContainer.marginTop.startValue, Math.floor(parseFloat(testStartValues.marginTop) / window.innerHeight * 100), "Vertical property converted to vh."); |
// } |
|
// TODO: Tests for auto-parameters as the units are no longer converted. |
|
/* jQuery TRBL deferring. */ |
var testPropertiesTRBL = { left: "1000px" }; |
var $TRBLContainer = document.createElement("div"); |
|
$TRBLContainer.setAttribute("id", "TRBLContainer"); |
$TRBLContainer.style.marginLeft = testPropertiesTRBL.left; |
$TRBLContainer.style.width = "100px"; |
$TRBLContainer.style.height = "100px"; |
document.body.appendChild($TRBLContainer); |
|
var $target5 = getTarget(); |
$target5.style.position = "absolute"; |
$TRBLContainer.appendChild($target5); |
Velocity($target5, testPropertiesTRBL); |
|
assert.equal(Math.round(Data($target5, pluginName).tweensContainer.left.startValue), Math.round(parseFloat(testPropertiesTRBL.left) + parseFloat(Velocity.CSS.getPropertyValue(document.body, "marginLeft"))), "TRBL value was deferred to jQuery."); |
}); |
|
/************************** |
End Value Calculation |
**************************/ |
|
QUnit.asyncTest("End Value Calculation", function(assert) { |
/* Standard properties without operators. */ |
var $target1 = getTarget(); |
Velocity($target1, defaultProperties); |
setTimeout(function() { |
assert.equal(Data($target1, pluginName).tweensContainer.width.endValue, defaultProperties.width, "Standard end value #1 was calculated."); |
assert.equal(Data($target1, pluginName).tweensContainer.opacity.endValue, defaultProperties.opacity, "Standard end value #2 was calculated."); |
}, asyncCheckDuration); |
|
/* Standard properties with operators. */ |
var testIncrementWidth = "5px", |
testDecrementOpacity = 0.25, |
testMultiplyMarginBottom = 4, |
testDivideHeight = 2; |
|
var $target2 = getTarget(); |
Velocity($target2, { width: "+=" + testIncrementWidth, opacity: "-=" + testDecrementOpacity, marginBottom: "*=" + testMultiplyMarginBottom, height: "/=" + testDivideHeight }); |
setTimeout(function() { |
|
assert.equal(Data($target2, pluginName).tweensContainer.width.endValue, defaultStyles.width + parseFloat(testIncrementWidth), "Incremented end value was calculated."); |
assert.equal(Data($target2, pluginName).tweensContainer.opacity.endValue, defaultStyles.opacity - testDecrementOpacity, "Decremented end value was calculated."); |
assert.equal(Data($target2, pluginName).tweensContainer.marginBottom.endValue, defaultStyles.marginBottom * testMultiplyMarginBottom, "Multiplied end value was calculated."); |
assert.equal(Data($target2, pluginName).tweensContainer.height.endValue, defaultStyles.height / testDivideHeight, "Divided end value was calculated."); |
|
start(); |
}, asyncCheckDuration); |
}); |
|
/********************** |
End Value Setting |
**********************/ |
|
QUnit.asyncTest("End Value Setting (Note: Browser Tab Must Have Focus Due to rAF)", function(assert) { |
/* Transforms and the properties that are hooked by Velocity aren't supported below IE9. */ |
if (!(IE < 9)) { |
var testHooks = { |
boxShadowBlur: "10px", // "black 0px 0px 10px 0px" |
boxShadowSpread: "20px", // "black 0px 0px 0px 20px" |
textShadowBlur: "30px" // "black 0px 0px 30px" |
}; |
|
/* Hooks. */ |
var $target3 = getTarget(); |
Velocity($target3, testHooks); |
setTimeout(function() { |
/* Check for a match anywhere in the string since browser differ in where they inject the color value. */ |
assert.equal(/0px 0px 10px 20px/.test(Velocity.CSS.getPropertyValue($target3, "boxShadow")), true, "Hook end value #1 was set."); |
/* textShadow isn't supported below IE10. */ |
if (!IE || IE >= 10) { |
assert.equal(/0px 0px 30px/.test(Velocity.CSS.getPropertyValue($target3, "textShadow")), true, "Hook end value #2 was set."); |
} |
}, completeCheckDuration); |
|
if (!(IE < 10) && !Velocity.State.isGingerbread) { |
var testTransforms = { |
translateY: "10em", // Should stay the same |
translateX: "20px", // Should stay the same |
scaleX: "1.50", // Should remain unitless |
translateZ: "30", // Should become "10px" |
scaleY: "1.50deg" // Should be ignored entirely since it uses an invalid unit |
}, |
testTransformsOutput = "matrix3d(1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 20, 160, 30, 1)"; |
|
/* Transforms. */ |
var $target4 = getTarget(); |
Velocity($target4, testTransforms); |
setTimeout(function() { |
/* Check for a match anywhere in the string since browser differ in where they inject the color value. */ |
assert.equal(Velocity.CSS.getPropertyValue($target4, "transform"), testTransformsOutput, "Transform end value was set."); |
|
/* Ensure previous transform values are reused. */ |
Velocity($target4, { translateX: parseFloat(testTransforms.translateX) / 2 }); |
assert.equal(Data($target4, pluginName).tweensContainer.translateX.startValue, parseFloat(testTransforms.translateX), "Previous transform value was reused."); |
}, completeCheckDuration); |
} |
|
if (!Velocity.State.isGingerbread) { |
/* SVG. */ |
var $svgRoot = document.createElementNS("http://www.w3.org/2000/svg", "svg"), |
$svgRect = document.createElementNS("http://www.w3.org/2000/svg", "rect"), |
svgStartValues = { x: 100, y: 10, width: 250, height: "30%" }, |
svgEndValues = { x: 200, width: "50%", strokeDasharray: 10, height: "40%", rotateZ: "90deg", rotateX: "45deg" }; |
|
$svgRoot.setAttribute("width", 1000); |
$svgRoot.setAttribute("height", 1000); |
|
$svgRect.setAttribute("x", svgStartValues.x); |
$svgRect.setAttribute("y", svgStartValues.y); |
$svgRect.setAttribute("width", svgStartValues.width); |
$svgRect.setAttribute("height", svgStartValues.height); |
|
$svgRoot.appendChild($svgRect); |
$qunitStage.appendChild($svgRoot); |
|
Velocity($svgRect, svgEndValues, defaultOptions); |
setTimeout(function() { |
assert.equal(Math.round(Data($svgRect, pluginName).tweensContainer.x.startValue), svgStartValues.x, "SVG dimensional attribute #1 value was retrieved."); |
assert.equal(Math.round(parseFloat(Velocity.CSS.getPropertyValue($svgRect, "x"))), svgEndValues.x, "SVG dimensional attribute #1 end value was set."); |
|
assert.equal(Math.round(Data($svgRect, pluginName).tweensContainer.width.startValue), parseFloat(svgStartValues.width)/1000 * 100, "SVG dimensional attribute #2 value was retrieved."); |
assert.equal(Math.round(parseFloat(Velocity.CSS.getPropertyValue($svgRect, "width"))), parseFloat(svgEndValues.width)/100 * 1000, "SVG dimensional attribute #2 end value was set."); |
|
assert.equal(Math.round(Data($svgRect, pluginName).tweensContainer.height.startValue), parseFloat(svgStartValues.height), "SVG dimensional attribute #3 value was retrieved."); |
assert.equal(Math.round(parseFloat(Velocity.CSS.getPropertyValue($svgRect, "height"))), parseFloat(svgEndValues.height)/100 * 1000, "SVG dimensional attribute #3 end value was set."); |
|
assert.equal(Math.round(Data($svgRect, pluginName).tweensContainer.rotateZ.startValue), 0, "SVG 2D transform value was retrieved."); |
assert.equal(Math.round(parseFloat(Velocity.CSS.getPropertyValue($svgRect, "rotateZ"))), parseFloat(svgEndValues.rotateZ), "SVG 2D transform end value was set."); |
|
if (!IE) { |
assert.equal(Math.round(Data($svgRect, pluginName).tweensContainer.rotateX.startValue), 0, "SVG 3D transform value was retrieved."); |
assert.equal(Math.round(parseFloat(Velocity.CSS.getPropertyValue($svgRect, "rotateX"))), parseFloat(svgEndValues.rotateX), "SVG 3D transform end value was set."); |
} |
|
assert.equal(Math.round(Data($svgRect, pluginName).tweensContainer.strokeDasharray.startValue), 0, "SVG CSS style value was retrieved."); |
assert.equal(parseFloat(Velocity.CSS.getPropertyValue($svgRect, "strokeDasharray")), svgEndValues.strokeDasharray, "SVG CSS style end value was set."); |
}, completeCheckDuration); |
} |
} |
|
/* Standard properties. */ |
var $target1 = getTarget(); |
Velocity($target1, defaultProperties, { }); |
setTimeout(function() { |
assert.equal(parseFloat(Velocity.CSS.getPropertyValue($target1, "width")), defaultProperties.width, "Standard end value #1 was set."); |
assert.equal(parseFloat(Velocity.CSS.getPropertyValue($target1, "opacity")), defaultProperties.opacity, "Standard end value #2 was set."); |
|
start(); |
}, completeCheckDuration); |
}); |
|
/********************** |
End Value Caching |
**********************/ |
|
QUnit.asyncTest("End Value Caching", function(assert) { |
expect(4); |
|
var newProperties = { height: "50px", width: "250px" }; |
|
var $target1 = getTarget(); |
Velocity($target1, defaultProperties, function() { |
|
applyStartValues($target1, newProperties); |
/* Called after the last call is complete (stale). Ensure that the newly-set (via $.css()) properties are used. */ |
Velocity($target1, defaultProperties); |
|
setTimeout(function() { |
assert.equal(Data($target1, pluginName).tweensContainer.width.startValue, parseFloat(newProperties.width), "Stale end value #1 wasn't pulled."); |
assert.equal(Data($target1, pluginName).tweensContainer.height.startValue, parseFloat(newProperties.height), "Stale end value #2 wasn't pulled."); |
}, asyncCheckDuration); |
}); |
|
var $target2 = getTarget(); |
Velocity($target2, defaultProperties); |
Velocity($target2, newProperties, function() { |
/* Chained onto a previous call (fresh). */ |
assert.equal(Data($target2, pluginName).tweensContainer.width.startValue, defaultProperties.width, "Chained end value #1 was pulled."); |
assert.equal(Data($target2, pluginName).tweensContainer.height.startValue, defaultProperties.height, "Chained end value #2 was pulled."); |
|
start(); |
}); |
}); |
|
/**************** |
Queueing |
****************/ |
|
QUnit.asyncTest("Queueing", function(assert) { |
expect(1); |
|
var $target1 = getTarget(); |
Velocity($target1, { opacity: 0 }); |
Velocity($target1, { width: 2 }); |
|
setTimeout(function() { |
/* Ensure that the second call hasn't started yet. */ |
assert.equal(parseFloat(Velocity.CSS.getPropertyValue($target1, "width")), defaultStyles.width, "Queued calls chain."); |
|
start(); |
}, asyncCheckDuration); |
}); |
|
/****************** |
Option: Queue |
******************/ |
|
QUnit.asyncTest("Option: Queue", function(assert) { |
expect(5); |
|
var testQueue = "custom"; |
|
var $target1 = getTarget(); |
Velocity($target1, defaultProperties, { queue: testQueue }); |
Velocity($target1, defaultProperties, { queue: testQueue }); |
Velocity($target1, defaultProperties, { queue: testQueue }); |
|
assert.equal(Velocity.Utilities.queue($target1, testQueue).length, 3, "Custom queue was appended to."); |
assert.equal(Data($target1, pluginName).isAnimating, false, "Custom queue didn't auto-dequeue."); |
|
Velocity.Utilities.dequeue($target1, testQueue); |
assert.equal(Data($target1, pluginName).isAnimating, true, "Dequeue custom queue."); |
|
Velocity($target1, "stop", testQueue); |
assert.equal(Velocity.Utilities.queue($target1, testQueue).length, 0, "Stopped custom queue."); |
|
var $target2 = getTarget(); |
Velocity($target2, { opacity: 0 }); |
Velocity($target2, { width: 10 }, { queue: false }); |
|
setTimeout(function() { |
/* Ensure that the second call starts immediately. */ |
notEqual(Velocity.CSS.getPropertyValue($target2, "width"), defaultStyles.width, "Parallel calls don't queue."); |
|
start(); |
}, asyncCheckDuration); |
}); |
|
/* Helpful redirect for testing custom and parallel queues. */ |
// var $div2 = $("#DataBody-PropertiesDummy"); |
// $.fn.velocity.defaults.duration = 1000; |
// $div2.velocity("scroll", { queue: "test" }) |
// $div2.velocity({width: 100}, { queue: "test" }) |
// $div2.velocity({ borderWidth: 50 }, { queue: "test" }) |
// $div2.velocity({height: 20}, { queue: "test" }) |
// $div2.velocity({marginLeft: 200}, { queue: "test" }) |
// $div2.velocity({paddingTop: 60}); |
// $div2.velocity({marginTop: 100}); |
// $div2.velocity({paddingRight: 40}); |
// $div2.velocity({marginTop: 0}) |
// $div2.dequeue("test") |
|
/****************** |
Option: Delay |
******************/ |
|
QUnit.asyncTest("Option: Delay (Note: Browser Tab Must Have Focus Due to rAF)", function(assert) { |
expect(2); |
|
var testDelay = defaultOptions.duration * 2; |
|
var $target = getTarget(); |
Velocity($target, defaultProperties, { delay: testDelay }); |
|
setTimeout(function() { |
assert.equal(parseFloat(Velocity.CSS.getPropertyValue($target, "width")), defaultStyles.width, "Delayed calls don't start immediately"); |
}, asyncCheckDuration); |
|
setTimeout(function() { |
assert.equal(parseFloat(Velocity.CSS.getPropertyValue($target, "width")), defaultProperties.width, "Delayed calls eventually start."); |
|
start(); |
}, completeCheckDuration + testDelay); |
}); |
|
/******************** |
Option: Easing |
********************/ |
|
QUnit.asyncTest("Option: Easing", function(assert) { |
expect(5); |
|
var $target1 = getTarget(); |
/* Ensure that a fake easing doesn't throw an error. */ |
Velocity($target1, defaultProperties, { easing: "fake" }); |
assert.equal(true, true, "Fake easing didn't throw error."); |
|
/* Ensure that an improperly-formmated bezier curve array doesn't throw an error. */ |
var $target2 = getTarget(); |
Velocity($target2, defaultProperties, { easing: [ "a", 0.5, 0.5, 0.5 ] }); |
Velocity($target2, defaultProperties, { easing: [ 0.5, 0.5, 0.5 ] }); |
assert.equal(true, true, "Invalid bezier curve didn't throw error."); |
|
/* Ensure that a properly-formatted bezier curve array returns a bezier function. */ |
var $target3 = getTarget(); |
var easingBezierArray = [ 0.27, -0.65, 0.78, 0.19 ], |
easingBezierTestPercent = 0.25, |
easingBezierTestValue = /^-0\.23/; |
|
Velocity($target3, defaultProperties, { easing: easingBezierArray }); |
setTimeout(function() { |
assert.equal(easingBezierTestValue.test(Data($target3, pluginName).tweensContainer.width.easing(easingBezierTestPercent)), true, "Array converted into bezier function."); |
}, asyncCheckDuration); |
|
/* Ensure that a properly-formatted spring RK4 array returns a bezier function. */ |
var $target4 = getTarget(); |
var easingSpringRK4Array = [ 250, 12 ], |
easingSpringRK4TestPercent = 0.25, |
easingSpringRK4TestValue = /^1\.21/; |
|
Velocity($target4, defaultProperties, { easing: easingSpringRK4Array }); |
setTimeout(function() { |
assert.equal(easingSpringRK4TestValue.test(Data($target4, pluginName).tweensContainer.width.easing(easingSpringRK4TestPercent)), true, "Array converted into springRK4 function."); |
}, asyncCheckDuration); |
|
/* Ensure that a properly-formatted step easing array returns a step function. */ |
var $target5 = getTarget(); |
var easingStepArray = [ 4 ], |
easingStepTestPercent = 0.35, |
easingStepTestValue = /^0\.25/; |
|
Velocity($target5, defaultProperties, { easing: easingStepArray }); |
setTimeout(function() { |
assert.equal(easingStepTestValue.test(Data($target5, pluginName).tweensContainer.width.easing(easingStepTestPercent)), true, "Array converted into Step function."); |
|
start(); |
}, asyncCheckDuration); |
}); |
|
/******************** |
Option: Display |
********************/ |
|
QUnit.asyncTest("Option: Display", function(assert) { |
var testDisplayBlock = "block", |
testDisplayNone = "none", |
testDisplayBlank = ""; |
|
var $target1 = getTarget(); |
/* Async checks are used since the display property is set inside processCallsTick(). */ |
Velocity($target1, defaultProperties, { display: testDisplayBlock }); |
setTimeout(function() { |
assert.equal(Velocity.CSS.getPropertyValue($target1, "display"), testDisplayBlock, "Display:'block' was set immediately."); |
}, asyncCheckDuration); |
|
var $target2 = getTarget(); |
Velocity($target2, defaultProperties, { display: testDisplayNone }); |
setTimeout(function() { |
notEqual(Velocity.CSS.getPropertyValue($target2, "display"), 0, "Display:'none' was not set immediately."); |
}, asyncCheckDuration); |
setTimeout(function() { |
assert.equal(Velocity.CSS.getPropertyValue($target2, "display"), 0, "Display:'none' was set upon completion."); |
}, completeCheckDuration); |
|
var $target3 = getTarget(); |
Velocity($target3, defaultProperties, { display: testDisplayBlank }); |
setTimeout(function() { |
assert.equal(Velocity.CSS.getPropertyValue($target3, "display"), "block", "Display:'' was set immediately."); |
|
start(); |
}, completeCheckDuration); |
}); |
|
/*********************** |
Option: Visibility |
***********************/ |
|
QUnit.asyncTest("Option: Visibility", function(assert) { |
var testVisibilityBlock = "visible", |
testVisibilityNone = "hidden", |
testVisibilityBlank = ""; |
|
var $target1 = getTarget(); |
/* Async checks are used since the visibility property is set inside processCallsTick(). */ |
Velocity($target1, defaultProperties, { visibility: testVisibilityBlock }); |
setTimeout(function() { |
assert.equal(Velocity.CSS.getPropertyValue($target1, "visibility"), testVisibilityBlock, "visibility:'visible' was set immediately."); |
}, asyncCheckDuration); |
|
var $target2 = getTarget(); |
Velocity($target2, defaultProperties, { visibility: testVisibilityNone }); |
setTimeout(function() { |
notEqual(Velocity.CSS.getPropertyValue($target2, "visibility"), 0, "visibility:'hidden' was not set immediately."); |
}, asyncCheckDuration); |
setTimeout(function() { |
assert.equal(Velocity.CSS.getPropertyValue($target2, "visibility"), "hidden", "visibility:'hidden' was set upon completion."); |
}, completeCheckDuration); |
|
var $target3 = getTarget(); |
Velocity($target3, defaultProperties, { display: testVisibilityBlank }); |
setTimeout(function() { |
assert.equal(/visible|inherit/.test(Velocity.CSS.getPropertyValue($target3, "visibility")), true, "visibility:'' was set immediately."); |
|
start(); |
}, completeCheckDuration); |
}); |
|
/****************** |
Option: Loop |
******************/ |
|
QUnit.asyncTest("Option: Loop", function(assert) { |
expect(6); |
|
var testOptions = { delay: 500, easing: "spring" }; |
|
var $target1 = getTarget(); |
Velocity($target1, defaultProperties, { loop: 2, delay: testOptions.delay, easing: testOptions.easing }); |
|
/* We expect 1 delay followed by 1 call for a total of 4 cycles, which equates to 8 queue items. */ |
assert.equal(Velocity.Utilities.queue($target1).length, 8, "Loop call produced 'reverse' calls."); |
|
var $target2 = getTarget(); |
Velocity($target2, defaultProperties, { loop: true, delay: testOptions.delay, easing: testOptions.easing }); |
setTimeout(function() { |
assert.equal(Data($target1, pluginName).opts.delay, testOptions.delay, "Delay option was passed into second loop call (jQuery object)."); |
assert.equal(Data($target1, pluginName).opts.easing, testOptions.easing, "Easing option was passed into second loop call (jQuery object)."); |
|
assert.equal(Data($target2, pluginName).opts.delay, testOptions.delay, "Delay option was passed into second infinite loop call (jQuery object)."); |
assert.equal(Data($target2, pluginName).opts.easing, testOptions.easing, "Easing option was passed into second infinite loop call (jQuery object)."); |
|
assert.equal(Velocity.Utilities.queue($target2).length, 2, "Infinite loop is running."); |
|
start(); |
}, completeCheckDuration + testOptions.delay); |
}); |
|
/******************* |
Option: Begin |
*******************/ |
|
QUnit.asyncTest("Option: Begin", function(assert) { |
expect(1); |
|
var $targetSet = [ getTarget(), getTarget() ]; |
Velocity($targetSet, defaultProperties, { |
duration: asyncCheckDuration, |
begin: function() { |
assert.deepEqual(this, $targetSet, "Elements passed into callback."); |
|
start(); |
} |
}); |
}); |
|
/********************* |
Option: Complete |
*********************/ |
|
QUnit.asyncTest("Option: Complete", function(assert) { |
expect(1); |
|
var $targetSet = [ getTarget(), getTarget() ]; |
Velocity($targetSet, defaultProperties, { |
duration: asyncCheckDuration, |
complete: function() { |
assert.deepEqual(this, $targetSet, "Elements passed into callback."); |
|
start(); |
} |
}); |
}); |
|
/********************* |
Option: Progress |
*********************/ |
|
QUnit.asyncTest("Option: Progress", function(assert) { |
expect(3); |
|
var alreadyCalled = false; |
|
var $target = getTarget(); |
Velocity($target, defaultProperties, { |
duration: asyncCheckDuration, |
progress: function(elements, percentComplete, msRemaining) { |
if (!alreadyCalled) { |
assert.deepEqual(this, [ $target ], "Elements passed into progress."); |
assert.equal(percentComplete >= 0 && percentComplete <= 1, true, "percentComplete passed into progress."); |
assert.equal(msRemaining > asyncCheckDuration - 50, true, "msRemaining passed into progress."); |
|
alreadyCalled = true; |
start(); |
} |
} |
}); |
}); |
|
/********************* |
Command: Reverse |
*********************/ |
|
QUnit.asyncTest("Command: Reverse", function(assert) { |
expect(5); |
|
var testEasing = "spring"; |
|
var $target = getTarget(); |
/* Ensure an error isn't thrown when there's no previous animation to reverse to. */ |
Velocity($target, "reverse"); |
Velocity($target, { opacity: defaultProperties.opacity, width: defaultProperties.width }, { easing: testEasing }); |
Velocity($target, "reverse", function() { |
assert.equal(parseFloat(Velocity.CSS.getPropertyValue($target, "opacity")), defaultStyles.opacity, "Reversed to initial property #1."); |
assert.equal(parseFloat(Velocity.CSS.getPropertyValue($target, "width")), defaultStyles.width, "Reversed to initial property #2."); |
}); |
/* Check chained reverses. */ |
Velocity($target, "reverse", function() { |
assert.equal(parseFloat(Velocity.CSS.getPropertyValue($target, "opacity")), defaultProperties.opacity, "Reversed to reversed property #1."); |
assert.equal(parseFloat(Velocity.CSS.getPropertyValue($target, "width")), defaultProperties.width, "Reversed to reversed property #2."); |
|
/* Ensure the options were passed through until the end. */ |
assert.equal(Data($target, pluginName).opts.easing, testEasing, "Options object passed through."); |
|
start(); |
}); |
}); |
|
/****************** |
Command: Stop |
******************/ |
|
QUnit.asyncTest("Command: Stop", function(assert) { |
expect(4); |
|
var $target1 = getTarget(); |
/* Ensure an error isn't thrown when "stop" is called on a $target that isn't animating. */ |
Velocity($target1, "stop"); |
Velocity($target1, defaultProperties, defaultOptions); |
Velocity($target1, { top: 0 }, defaultOptions); |
Velocity($target1, { width: 0 }, defaultOptions); |
Velocity($target1, "stop", true); |
|
/* Ensure "stop" has removed all queued animations. */ |
/* We're using the element's queue length as a proxy. 0 and 1 both mean that the element's queue has been cleared -- a length of 1 just indicates that the animation is in progress. */ |
setTimeout(function() { |
assert.equal(Velocity.Utilities.queue($target1).length <= 1, true, "Queue cleared."); |
}, 1); |
|
var $target2 = getTarget(); |
Velocity($target2, { opacity: 0 }, Velocity.Utilities.extend({}, defaultOptions, { delay: 1000 })); |
Velocity($target2, { width: 0 }, defaultOptions); |
Velocity($target2, "stop"); |
|
var $target3 = getTarget(); |
Velocity($target3, { opacity: 0 }, Velocity.Utilities.extend({}, defaultOptions, { delay: 1000 })); |
Velocity($target3, { width: 0 }, defaultOptions); |
Velocity($target3, { width: 100 }, defaultOptions); |
Velocity($target3, "stop", true); |
|
setTimeout(function() { |
assert.equal(Data($target2, pluginName).tweensContainer.opacity, undefined, "Active call stopped."); |
notEqual(Data($target2, pluginName).tweensContainer.width, undefined, "Next queue item started."); |
|
assert.equal(Velocity.Utilities.queue($target3, "").length, 0, "Full queue array cleared."); |
|
start(); |
}, asyncCheckDuration); |
}); |
|
/**************************** |
Command: Pause / Resume |
*****************************/ |
|
QUnit.asyncTest("Command: Pause / Resume", function() { |
expect(10); |
|
var $target1 = getTarget(); |
var $target1d = getTarget(); //delayed |
/* Ensure an error isn't thrown when "pause" is called on a $target that isn't animating. */ |
Velocity($target1, "pause"); |
Velocity($target1d, "pause"); |
|
/* Ensure an error isn't thrown when "pause" is called on a $target that isn't animating. */ |
Velocity($target1, "resume"); |
Velocity($target1d, "resume"); |
|
/* Ensure a paused $target ceases to animate */ |
Velocity($target1, { opacity: 0 }, defaultOptions); |
notEqual(Data($target1, pluginName).isPaused, true, "Newly active call not paused."); |
Velocity($target1d, { opacity: 0 }, Velocity.Utilities.extend({}, defaultOptions, { delay: 200 })); |
notEqual(Data($target1d, pluginName).isPaused, true, "New call with delay not paused."); |
|
Velocity($target1, "pause"); |
Velocity($target1d, "pause"); |
|
setTimeout(function() { |
equal(parseFloat(Velocity.CSS.getPropertyValue($target1, "opacity")), 1, "Property value unchanged after pause."); |
}, completeCheckDuration); |
|
setTimeout(function() { |
equal(parseFloat(Velocity.CSS.getPropertyValue($target1d, "opacity")), 1, "Property value unchanged after pause during delay."); |
}, 201); |
|
/* Ensure a resumed $target proceeds to animate */ |
var $target2 = getTarget(); |
var $target2d = getTarget(); |
Velocity($target2, { opacity: 0 }, defaultOptions); |
Velocity($target2d, { opacity: 0 }, Velocity.Utilities.extend({}, defaultOptions, { delay: 100 })); |
|
Velocity($target2, "pause"); |
|
setTimeout(function() { |
Velocity($target2d, "pause"); |
}, 40); |
|
Velocity($target2, "resume"); |
|
setTimeout(function() { |
Velocity($target2d, "resume"); |
}, 80); |
|
setTimeout(function() { |
equal(parseFloat(Velocity.CSS.getPropertyValue($target2, "opacity")), 0, "Tween completed after pause/resume."); |
}, completeCheckDuration); |
|
setTimeout(function() { |
equal(parseFloat(Velocity.CSS.getPropertyValue($target2d, "opacity")), 1, "Delayed tween did not start early after pause."); |
}, 130); |
|
setTimeout(function() { |
equal(parseFloat(Velocity.CSS.getPropertyValue($target2d, "opacity")), 0, "Delayed tween completed after pause/resume."); |
}, completeCheckDuration + 200); |
|
/* Ensure the property values of a pause tween are midway between start and end values */ |
var $target3 = getTarget(), |
percent = 0, |
isPaused = false; |
|
Velocity($target3, { opacity: 0 }, { |
duration: 200, |
easing:"linear", |
progress: function(elements, _percentComplete, _msRemaining) { |
if(isPaused) { |
throw new Error("Progress callback run after pause."); |
} |
percent = _percentComplete; |
} |
}); |
|
/* Pause element midway through tween */ |
setTimeout(function() { |
Velocity($target3, "pause"); |
isPaused = true; |
}, 100); |
|
setTimeout(function() { |
Velocity($target3, "resume"); |
isPaused = false; |
}, 200); |
|
|
setTimeout(function() { |
/* Property value should be linearly proportional to */ |
var val = parseFloat(Velocity.CSS.getPropertyValue($target3, "opacity")); |
|
/* Prop value and percentage complete should correlate after pause. We need to test this since |
the timing variables used to calculate and return the percentage complete and msRemaining are |
modified after pause and resume comamands have been issued on the call */ |
ok(Math.round(1 - val, 4) == Math.round(percent, 4) , "Tween value and percentageComplete correlate correctly after pause."); |
|
}, 250); |
|
|
/* Ensure a all elements in a call are paused if any element is paused, likewise for resume */ |
var $targetA = getTarget(), $targetB = getTarget(); |
Velocity([$targetA, $targetB], { opacity: 0 }, { |
duration:100, |
progress:function(elements, percent, msRemaining) { |
throw new Error("Tween does not proceed for any elements"); |
} |
}); |
|
Velocity($targetA, "pause"); |
|
/* Ensure proper behavior with queue:false */ |
var $target4 = getTarget(); |
Velocity($target4, { opacity: 0 }, { |
duration: 200, |
}); |
|
var isResumed = false; |
|
setTimeout(function() { |
Velocity($target4, "pause"); |
Velocity($target4, { left: -20 }, { |
duration: 100, |
easing:"linear", |
queue: false, |
begin: function(elements) { |
ok(true, "Animation with {queue:false} will run regardless of previously paused animations.") |
} |
}); |
|
Velocity($target4, { top: 20 }, { |
duration: 100, |
easing:"linear", |
begin: function(elements) { |
if(!isResumed) { |
throw new Error("Queued animation doesn't begin until previous animation was resumed."); |
} else { |
ok(true, "Queued animation began after previously paused animation completed"); |
} |
} |
}); |
}, 100); |
|
setTimeout(function() { |
isResumed = true; |
Velocity($target4, "resume"); |
}, 200); |
|
setTimeout(function() { |
start(); |
/* Clear out any existing test animations to prevent errors from being thrown |
in another test */ |
try { |
Velocity([$targetA, $target3, $target4], "stop"); |
} catch (e) {} |
}, 800); |
|
}); |
|
/********************************* |
Command: PauseAll / ResumeAll |
**********************************/ |
|
QUnit.asyncTest("Command: Global Pause / Resume", function() { |
expect(3); |
|
var $target1 = getTarget(); |
var $target2 = getTarget(); |
var $target3 = getTarget(); |
var $target4 = getTarget(); |
|
var isPaused = false; |
var hasProgressed2 = false; |
Velocity($target1, { opacity: 0 }, Velocity.Utilities.extend({}, defaultOptions, { |
delay: 100, |
queue:false, |
progress: function(elements, progress, msRemaining) { |
if(isPaused) { |
throw new Error("Delayed Tween should not progress when globally paused"); |
} |
} |
})); |
|
Velocity($target2, { opacity: 0 }, Velocity.Utilities.extend({}, defaultOptions, { |
progress: function(elements, progress, msRemaining) { |
if(isPaused) { |
throw new Error("Tween should not progress when globally paused"); |
} else if(!hasProgressed2) { |
hasProgressed2 = true; |
ok (true, "Tween resumes on individual pause after global resume"); |
} |
} |
})); |
|
Velocity.pauseAll(); |
isPaused = true; |
|
/* Testing with custom queues */ |
var hasProgressed3 = false; |
Velocity($target3, { opacity: 0 }, Velocity.Utilities.extend({}, defaultOptions, { |
queue: "queue1", |
progress: function(elements, progress, msRemaining) { |
if(!hasProgressed3) { |
hasProgressed3 = true; |
ok (true, "Tweens created after global pause begin immediately"); |
} |
} |
})); |
|
var hasProgressed4 = false; |
Velocity($target4, { opacity: 0 }, Velocity.Utilities.extend({}, defaultOptions, { |
queue: "queue2", |
progress: function(elements, progress, msRemaining) { |
if(isPaused) { |
throw new Error("Tween on paused queue should not progress"); |
} else if(!hasProgressed4) { |
hasProgressed4 = true; |
ok (true, "Paused tweens on a queue resume after a global resumeAll call"); |
} |
} |
})); |
|
/* Begin queued animations */ |
Velocity.Utilities.dequeue($target4, "queue2"); |
Velocity.Utilities.dequeue($target3, "queue1"); |
|
/* Only $target4 should pause */ |
Velocity.pauseAll("queue2"); |
|
setTimeout(function() { |
isPaused = false; |
Velocity.resumeAll(); |
}, 200); |
|
setTimeout(function() { |
start(); |
Velocity.resumeAll(); |
}, 400); |
|
}); |
|
/****************** |
Command: Finish |
******************/ |
|
QUnit.asyncTest("Command: Finish / FinishAll", function(assert) { |
expect(9); |
|
var $target1 = getTarget(); |
/* Ensure an error isn't thrown when "finish" is called on a $target that isn't animating. */ |
Velocity($target1, "finish"); |
|
/* Animate to defaultProperties, and then "finish" to jump to the end of it. */ |
Velocity($target1, defaultProperties, Velocity.Utilities.extend({}, defaultOptions, { delay: 1000})); |
Velocity($target1, "finish"); |
|
setTimeout(function() { |
/* Ensure "finish" has removed all queued animations. */ |
/* We're using the element's queue length as a proxy. 0 and 1 both mean that the element's queue has been cleared -- a length of 1 just indicates that the animation is in progress. */ |
assert.equal(Velocity.Utilities.queue($target1).length <= 1, true, "Queue cleared."); |
|
/* End result of the animation should be applied */ |
assert.equal(parseFloat(Velocity.CSS.getPropertyValue($target1, "width")), defaultProperties.width, "Standard end value #1 was set."); |
assert.equal(parseFloat(Velocity.CSS.getPropertyValue($target1, "opacity")), defaultProperties.opacity, "Standard end value #2 was set."); |
}, asyncCheckDuration); |
|
var $target2 = getTarget(); |
Velocity($target2, { opacity: 0 }, Velocity.Utilities.extend({}, defaultOptions, { delay: 1000 })); |
Velocity($target2, { width: 0 }, defaultOptions); |
Velocity($target2, "finish"); |
|
var $target3 = getTarget(); |
Velocity($target3, { opacity: 0, width: 50 }, Velocity.Utilities.extend({}, defaultOptions, { delay: 1000 })); |
Velocity($target3, { width: 0 }, defaultOptions); |
Velocity($target3, { width: 100 }, defaultOptions); |
Velocity($target3, "finish", true); |
|
var $target4 = getTarget(); |
Velocity($target4, { opacity: 0, width: 50 }, Velocity.Utilities.extend({}, defaultOptions, { delay: 1000 })); |
Velocity($target4, { width: 0 }, defaultOptions); |
Velocity($target4, { width: 100 }, defaultOptions); |
Velocity($target4, "finishAll", true); |
|
setTimeout(function() { |
assert.equal(Data($target2, pluginName).tweensContainer.opacity, undefined, "Active call stopped."); |
notEqual(Data($target2, pluginName).tweensContainer.width, undefined, "Next queue item started."); |
|
assert.equal(Velocity.Utilities.queue($target3, "").length, 0, "Full queue array cleared."); |
assert.equal(parseFloat(Velocity.CSS.getPropertyValue($target3, "width")), 50, "Just the first call's width was applied."); |
|
assert.equal(Velocity.Utilities.queue($target4, "").length, 0, "Full queue array cleared."); |
assert.equal(parseFloat(Velocity.CSS.getPropertyValue($target4, "width")), 100, "The last call's width was applied."); |
|
start(); |
}, asyncCheckDuration); |
}); |
|
/*********************** |
Feature: Redirects |
***********************/ |
|
QUnit.asyncTest("Feature: Redirects", function(assert) { |
var $target1 = getTarget(), |
$target2 = getTarget(), |
redirectOptions = { duration: 1500 }; |
|
(window.jQuery || window.Zepto || window).Velocity.Redirects.test = function (element, options, elementIndex, elementsLength) { |
if (elementIndex === 0) { |
assert.deepEqual(element, $target1, "Element passed through #1."); |
assert.deepEqual(options, redirectOptions, "Options object passed through #1."); |
assert.equal(elementIndex, 0, "Element index passed through #1."); |
assert.equal(elementsLength, 2, "Elements length passed through #1."); |
} else if (elementIndex === 1) { |
assert.deepEqual(element, $target2, "Element passed through #2."); |
assert.deepEqual(options, redirectOptions, "Options object passed through #2."); |
assert.equal(elementIndex, 1, "Element index passed through #2."); |
assert.equal(elementsLength, 2, "Elements length passed through #2."); |
|
start(); |
} |
}; |
|
Velocity([ $target1, $target2 ], "test", redirectOptions); |
}); |
|
/************************ |
Feature: animating |
************************/ |
|
QUnit.asyncTest("Feature: 'velocity-animating' Class", function(assert) { |
var $target1 = getTarget(); |
|
Velocity($target1, defaultProperties, function(element) { |
assert.equal(/velocity-animating/.test($target1.className), false, "Class removed."); |
start(); |
} |
); |
|
setTimeout(function() { |
assert.equal(/velocity-animating/.test($target1.className), true, "Class added."); |
}, asyncCheckDuration); |
}); |
|
/*********************** |
Feature: Promises |
***********************/ |
|
QUnit.asyncTest("Feature: Promises", function(assert) { |
expect(5); |
|
var $target1 = getTarget(); |
|
Velocity($target1, defaultProperties, 10000).then(function(elements) { |
assert.deepEqual(elements, [ $target1 ], "Active call fulfilled."); |
}); |
|
Velocity($target1, defaultProperties, 10000).then(function(elements) { |
assert.deepEqual(elements, [ $target1 ], "Queued call fulfilled."); |
}); |
|
Velocity($target1, "stop", true).then(function(elements) { |
assert.deepEqual(elements, [ $target1 ], "Stop call fulfilled."); |
}); |
|
var $target2 = getTarget(), |
$target3 = getTarget(); |
|
Velocity([ $target2, $target3 ], "fake", defaultOptions)["catch"](function(error) { |
assert.equal(error instanceof Error, true, "Invalid command caused promise rejection."); |
}); |
|
Velocity([ $target2, $target3 ], defaultProperties, defaultOptions).then(function(elements) { |
assert.deepEqual(elements, [ $target2, $target3 ], "Elements passed back into resolved promise."); |
|
start(); |
}); |
}); |
|
/***************************** |
Feature: Value Functions |
*****************************/ |
|
QUnit.test("Feature: Value Functions", function(assert) { |
var testWidth = 10; |
|
var $target1 = getTarget(), |
$target2 = getTarget(); |
Velocity([ $target1, $target2 ], { width: function (i, total) { return (i + 1)/total * testWidth; } }); |
|
assert.equal(Data($target1, pluginName).tweensContainer.width.endValue, parseFloat(testWidth) / 2, "Function value #1 passed to tween."); |
assert.equal(Data($target2, pluginName).tweensContainer.width.endValue, parseFloat(testWidth), "Function value #2 passed to tween."); |
}); |
|
/*************************** |
Feature: Forcefeeding |
***************************/ |
|
QUnit.test("Feature: Forcefeeding", function(assert) { |
/* Note: Start values are always converted into pixels. W test the conversion ratio we already know to avoid additional work. */ |
var testStartWidth = "1rem", testStartWidthToPx = "16px", |
testStartHeight = "10px"; |
|
var $target = getTarget(); |
Velocity($target, { width: [ 100, "linear", testStartWidth ], height: [ 100, testStartHeight ], opacity: [ defaultProperties.opacity, "easeInQuad" ]}); |
|
assert.equal(Data($target, pluginName).tweensContainer.width.startValue, parseFloat(testStartWidthToPx), "Forcefed value #1 passed to tween."); |
assert.equal(Data($target, pluginName).tweensContainer.height.startValue, parseFloat(testStartHeight), "Forcefed value #2 passed to tween."); |
assert.equal(Data($target, pluginName).tweensContainer.opacity.startValue, defaultStyles.opacity, "Easing was misinterpreted as forcefed value."); |
}); |
|
/********************************* |
Feature: Colors (Shorthands) |
*********************************/ |
|
QUnit.test("Feature: Colors (Shorthands)", function(assert) { |
var $target = getTarget(); |
Velocity($target, { borderColor: "#7871c2", color: [ "#297dad", "spring", "#5ead29" ] }); |
|
assert.equal(Data($target, pluginName).tweensContainer.borderColorRed.endValue, 120, "Hex #1a component."); |
assert.equal(Data($target, pluginName).tweensContainer.borderColorGreen.endValue, 113, "Hex #1b component."); |
assert.equal(Data($target, pluginName).tweensContainer.borderColorBlue.endValue, 194, "Hex #1c component."); |
assert.equal(Data($target, pluginName).tweensContainer.colorRed.easing, "spring", "Per-property easing."); |
assert.equal(Data($target, pluginName).tweensContainer.colorRed.startValue, 94, "Forcefed hex #2a component."); |
assert.equal(Data($target, pluginName).tweensContainer.colorGreen.startValue, 173, "Forcefed hex #2b component."); |
assert.equal(Data($target, pluginName).tweensContainer.colorBlue.startValue, 41, "Forcefed hex #2c component."); |
assert.equal(Data($target, pluginName).tweensContainer.colorRed.endValue, 41, "Hex #3a component."); |
assert.equal(Data($target, pluginName).tweensContainer.colorGreen.endValue, 125, "Hex #3b component."); |
assert.equal(Data($target, pluginName).tweensContainer.colorBlue.endValue, 173, "Hex #3c component."); |
}); |
|
/********************************** |
Packaged Effect: slideUp/Down |
**********************************/ |
|
QUnit.asyncTest("Packaged Effect: slideUp/Down", function(assert) { |
var $target1 = getTarget(), |
$target2 = getTarget(); |
|
var initialStyles = { |
display: "none", |
paddingTop: "123px" |
}; |
|
$target1.style.display = initialStyles.display; |
$target1.style.paddingTop = initialStyles.paddingTop; |
|
Velocity($target1, "slideDown", |
{ |
begin: function(elements) { |
assert.deepEqual(elements, [ $target1 ], "slideDown: Begin callback returned."); |
}, |
complete: function(elements) { |
assert.deepEqual(elements, [ $target1 ], "slideDown: Complete callback returned."); |
assert.equal(Velocity.CSS.getPropertyValue($target1, "display"), Velocity.CSS.Values.getDisplayType($target1), "slideDown: display set to default."); |
notEqual(Velocity.CSS.getPropertyValue($target1, "height"), 0, "slideDown: height set."); |
assert.equal(Velocity.CSS.getPropertyValue($target1, "paddingTop"), initialStyles.paddingTop, "slideDown: paddingTop set."); |
} |
} |
).then(function(elements) { |
assert.deepEqual(elements, [ $target1 ], "slideDown: Promise fulfilled."); |
}); |
|
Velocity($target2, "slideUp", |
{ |
begin: function(elements) { |
assert.deepEqual(elements, [ $target2 ], "slideUp: Begin callback returned."); |
}, |
complete: function(elements) { |
assert.deepEqual(elements, [ $target2 ], "slideUp: Complete callback returned."); |
assert.equal(Velocity.CSS.getPropertyValue($target2, "display"), 0, "slideUp: display set to none."); |
notEqual(Velocity.CSS.getPropertyValue($target2, "height"), 0, "slideUp: height reset."); |
assert.equal(Velocity.CSS.getPropertyValue($target1, "paddingTop"), initialStyles.paddingTop, "slideUp: paddingTop reset."); |
} |
} |
).then(function(elements) { |
assert.deepEqual(elements, [ $target2 ], "slideUp: Promise fulfilled."); |
|
start(); |
}); |
}); |
|
/*********************** |
UI Pack: Callbacks |
***********************/ |
|
QUnit.asyncTest("UI Pack: Callbacks", function(assert) { |
expect(3); |
|
var $targets = [ getTarget(), getTarget() ]; |
|
Velocity($targets, "transition.bounceIn", |
{ |
begin: function(elements) { |
assert.deepEqual(elements, $targets, "Begin callback returned."); |
}, |
complete: function(elements) { |
assert.deepEqual(elements, $targets, "Complete callback returned."); |
} |
} |
).then(function(elements) { |
assert.deepEqual(elements, $targets, "Promise fulfilled."); |
|
start(); |
}); |
}); |
|
/********************* |
UI Pack: In/Out |
*********************/ |
|
QUnit.asyncTest("UI Pack: In/Out", function(assert) { |
expect(8); |
|
var $target1 = getTarget(); |
Velocity($target1, "transition.bounceIn", defaultOptions.duration); |
|
var $target2 = getTarget(); |
Velocity($target2, "transition.bounceIn", { duration: defaultOptions.duration, display: "inline" }); |
|
var $target3 = getTarget(); |
Velocity($target3, "transition.bounceOut", defaultOptions.duration); |
|
var $target4 = getTarget(); |
Velocity($target4, "transition.bounceOut", { duration: defaultOptions.duration, display: null }); |
|
var $target5 = getTarget(); |
$target5.style.visibility = "hidden"; |
Velocity($target5, "transition.bounceIn", { duration: defaultOptions.duration, visibility: "visible" }); |
|
var $target6 = getTarget(); |
$target6.style.visibility = "visible"; |
Velocity($target6, "transition.bounceOut", { duration: defaultOptions.duration, visibility: "hidden" }); |
|
setTimeout(function() { |
notEqual(Velocity.CSS.getPropertyValue($target3, "display"), 0, "Out: display not prematurely set to none."); |
notEqual(Velocity.CSS.getPropertyValue($target6, "visibility"), "hidden", "Out: visibility not prematurely set to hidden."); |
}, asyncCheckDuration); |
|
setTimeout(function() { |
assert.equal(Velocity.CSS.getPropertyValue($target1, "display"), Velocity.CSS.Values.getDisplayType($target1), "In: display set to default."); |
assert.equal(Velocity.CSS.getPropertyValue($target2, "display"), "inline", "In: Custom inline value set."); |
|
assert.equal(Velocity.CSS.getPropertyValue($target3, "display"), 0, "Out: display set to none."); |
assert.equal(Velocity.CSS.getPropertyValue($target4, "display"), Velocity.CSS.Values.getDisplayType($target3), "Out: No display value set."); |
|
assert.equal(Velocity.CSS.getPropertyValue($target5, "visibility"), "visible", "In: visibility set to visible."); |
assert.equal(Velocity.CSS.getPropertyValue($target6, "visibility"), "hidden", "Out: visibility set to hidden."); |
|
start(); |
}, completeCheckDuration); |
}); |
|
/************************** |
UI Pack: Call Options |
**************************/ |
|
QUnit.asyncTest("UI Pack: Call Options", function(assert) { |
expect(7); |
|
var UICallOptions1 = { |
delay: 123, |
duration: defaultOptions.duration, |
loop: true, // Should get ignored |
easing: "spring" // Should get ignored |
}; |
|
var $target1 = getTarget(); |
Velocity($target1, "transition.slideLeftIn", UICallOptions1); |
|
setTimeout(function() { |
// Note: We can do this because transition.slideLeftIn is composed of a single call. |
assert.equal(Data($target1, pluginName).opts.delay, UICallOptions1.delay, "Whitelisted option passed in."); |
notEqual(Data($target1, pluginName).opts.loop, UICallOptions1.loop, "Non-whitelisted option not passed in #1a."); |
notEqual(Data($target1, pluginName).opts.easing, UICallOptions1.easing, "Non-whitelisted option not passed in #1a."); |
assert.equal(!/velocity-animating/.test(Data($target1, pluginName).className), true, "Duration option passed in."); |
}, completeCheckDuration); |
|
var UICallOptions2 = { |
stagger: 100, |
duration: defaultOptions.duration, |
backwards: true |
}; |
|
var $targets = [ getTarget(), getTarget(), getTarget() ]; |
Velocity($targets, "transition.slideLeftIn", UICallOptions2); |
|
setTimeout(function() { |
assert.equal(Data($targets[0], pluginName).opts.delay, UICallOptions2.stagger * 2, "Backwards stagger delay passed in #1a."); |
assert.equal(Data($targets[1], pluginName).opts.delay, UICallOptions2.stagger * 1, "Backwards stagger delay passed in #1b."); |
assert.equal(Data($targets[2], pluginName).opts.delay, UICallOptions2.stagger * 0, "Backwards stagger delay passed in #1c."); |
|
start(); |
}, completeCheckDuration); |
}); |
|
/**************************** |
UI Pack: RegisterEffect |
****************************/ |
|
QUnit.asyncTest("UI Pack: RegisterEffect", function(assert) { |
expect(2); |
|
var effectDefaultDuration = 800; |
Velocity.RegisterUI("callout.twirl", { |
defaultDuration: effectDefaultDuration, |
calls: [ |
[ { rotateZ: 1080 }, 0.50 ], |
[ { scaleX: 0.5 }, 0.25, { easing: "spring" } ], |
[ { scaleX: 1 }, 0.25, { easing: "spring" } ] |
] |
}); |
|
var $target1 = getTarget(); |
Velocity($target1, "callout.twirl"); |
|
setTimeout(function() { |
assert.equal(parseFloat(Velocity.CSS.getPropertyValue($target1, "rotateZ")), 1080, "First call's property animated."); |
assert.equal(parseFloat(Velocity.CSS.getPropertyValue($target1, "scaleX")), 1, "Last call's property animated."); |
|
start(); |
}, effectDefaultDuration * 1.50); |
}); |
|
/************************* |
UI Pack: RunSequence |
*************************/ |
|
QUnit.asyncTest("UI Pack: RunSequence", function(assert) { |
expect(3); |
|
var $target1 = getTarget(), |
$target2 = getTarget(), |
$target3 = getTarget(); |
|
var mySequence = [ |
{ elements: $target1, properties: { opacity: defaultProperties.opacity } }, |
{ elements: $target2, properties: { height: defaultProperties.height } }, |
{ elements: $target3, properties: { width: defaultProperties.width }, options: { |
delay: 100, |
sequenceQueue: false, |
complete: function() { |
assert.equal(parseFloat(Velocity.CSS.getPropertyValue($target1, "opacity")), defaultProperties.opacity, "First call's property animated."); |
assert.equal(parseFloat(Velocity.CSS.getPropertyValue($target2, "height")), defaultProperties.height, "Second call's property animated."); |
assert.equal(parseFloat(Velocity.CSS.getPropertyValue($target3, "width")), defaultProperties.width, "Last call's property animated."); |
|
start(); |
} |
} |
} |
]; |
|
Velocity.RunSequence(mySequence); |
}); |
|
/********************* |
Command: Scroll |
*********************/ |
|
if ($) { |
/* Window scrolling. */ |
QUnit.asyncTest("Command: Scroll (Window)", function(assert) { |
var $details = $("#details"), |
$scrollTarget1 = $("<div>Scroll target #1. Should stop 50 pixels above this point.</div>"), |
$scrollTarget2 = $("<div>Scroll target #2. Should stop 50 pixels before this point.</div>"), |
scrollOffset = -50; |
|
$scrollTarget1 |
.css({ position: "relative", top: 3000, height: 100, paddingBottom: 10000 }) |
.appendTo($("body")); |
|
$scrollTarget2 |
.css({ position: "absolute", top: 100, left: 3000, width: 100, paddingRight: 15000 }) |
.appendTo($("body")); |
|
$scrollTarget1 |
.velocity("scroll", { duration: 500, offset: scrollOffset, complete: function() { |
assert.equal(Math.abs(Velocity.State.scrollAnchor[Velocity.State.scrollPropertyTop] - ($scrollTarget1.offset().top + scrollOffset)) <= 100, true, "Page scrolled top with a scroll offset."); |
} |
}) |
.velocity({ opacity: 0.5 }, function() { |
$details |
.velocity({ opacity: 0.5 }, 500) |
.velocity("scroll", 500) |
.velocity({ opacity: 1 }, 500, function() { |
//alert(Velocity.State.scrollAnchor[Velocity.State.scrollPropertyTop] + " " + ($details.offset().top + scrollOffset)) |
assert.equal(Math.abs(Velocity.State.scrollAnchor[Velocity.State.scrollPropertyTop] - ($details.offset().top + scrollOffset)) <= 100, true, "Page scroll top was chained."); |
|
//$scrollTarget1.remove(); |
|
$scrollTarget2 |
.velocity("scroll", { duration: 500, axis: "x", offset: scrollOffset, complete: function() { |
/* Phones can reposition the browser's scroll position by a 10 pixels or so, so we just check for a value that's within that range. */ |
assert.equal(Math.abs(Velocity.State.scrollAnchor[Velocity.State.scrollPropertyLeft] - ($scrollTarget2.offset().left + scrollOffset)) <= 100, true, "Page scrolled left with a scroll offset."); |
} |
}) |
.velocity({ opacity: 0.5 }, function() { |
$details |
.velocity({ opacity: 0.5 }, 500) |
.velocity("scroll", { duration: 500, axis: "x" }) |
.velocity({ opacity: 1 }, 500, function() { |
assert.equal(Math.abs(Velocity.State.scrollAnchor[Velocity.State.scrollPropertyLeft] - ($details.offset().left + scrollOffset)) <= 100, true, "Page scroll left was chained."); |
start(); |
}); |
}); |
}); |
}); |
}); |
|
/* Element scrolling. */ |
QUnit.asyncTest("Command: Scroll (Element)", function(assert) { |
expect(2); |
|
var $scrollTarget1 = $("\ |
<div id='scroller'>\ |
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\ |
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\ |
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\ |
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\ |
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\ |
<div id='scrollerChild1'>\ |
Stop #1\ |
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb\ |
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb\ |
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb\ |
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb\ |
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb\ |
</div>\ |
cccccccccccccccccccccccccccccccccccccccccccccccccccccccc\ |
cccccccccccccccccccccccccccccccccccccccccccccccccccccccc\ |
cccccccccccccccccccccccccccccccccccccccccccccccccccccccc\ |
cccccccccccccccccccccccccccccccccccccccccccccccccccccccc\ |
cccccccccccccccccccccccccccccccccccccccccccccccccccccccc\ |
<div id='scrollerChild2'>\ |
Stop #2\ |
dddddddddddddddddddddddddddddddddddddddddddddddddddddddd\ |
dddddddddddddddddddddddddddddddddddddddddddddddddddddddd\ |
dddddddddddddddddddddddddddddddddddddddddddddddddddddddd\ |
dddddddddddddddddddddddddddddddddddddddddddddddddddddddd\ |
dddddddddddddddddddddddddddddddddddddddddddddddddddddddd\ |
</div>\ |
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee\ |
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee\ |
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee\ |
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee\ |
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee\ |
</div>\ |
"); |
|
$scrollTarget1 |
.css({ position: "absolute", backgroundColor: "white", top: 100, left: "50%", width: 500, height: 100, overflowY: "scroll" }) |
.appendTo($("body")); |
|
/* Test with a jQuery object container. */ |
$("#scrollerChild1").velocity("scroll", { container: $("#scroller"), duration: 750, complete: function() { |
/* Test with a raw DOM element container. */ |
$("#scrollerChild2").velocity("scroll", { container: $("#scroller")[0], duration: 750, complete: function() { |
/* This test is purely visual. */ |
ok(true); |
|
$scrollTarget1.remove(); |
|
var $scrollTarget2 = $("\ |
<div id='scroller'>\ |
<div id='scrollerChild1' style='float: left; width: 20%;'>\ |
Stop #1\ |
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb\ |
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb\ |
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb\ |
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb\ |
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb\ |
cccccccccccccccccccccccccccccccccccccccccccccccccccccccc\ |
cccccccccccccccccccccccccccccccccccccccccccccccccccccccc\ |
cccccccccccccccccccccccccccccccccccccccccccccccccccccccc\ |
cccccccccccccccccccccccccccccccccccccccccccccccccccccccc\ |
cccccccccccccccccccccccccccccccccccccccccccccccccccccccc\ |
</div>\ |
<div id='scrollerChild2' style='float: right; width: 20%;'>\ |
Stop #2\ |
dddddddddddddddddddddddddddddddddddddddddddddddddddddddd\ |
dddddddddddddddddddddddddddddddddddddddddddddddddddddddd\ |
dddddddddddddddddddddddddddddddddddddddddddddddddddddddd\ |
dddddddddddddddddddddddddddddddddddddddddddddddddddddddd\ |
dddddddddddddddddddddddddddddddddddddddddddddddddddddddd\ |
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee\ |
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee\ |
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee\ |
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee\ |
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee\ |
</div>\ |
</div>\ |
"); |
|
$scrollTarget2 |
.css({ position: "absolute", backgroundColor: "white", top: 100, left: "50%", width: 100, height: 500, overflowX: "scroll" }) |
.appendTo($("body")); |
|
/* Test with a jQuery object container. */ |
$("#scrollerChild2").velocity("scroll", { axis: "x", container: $("#scroller"), duration: 750, complete: function() { |
/* Test with a raw DOM element container. */ |
$("#scrollerChild1").velocity("scroll", { axis: "x", container: $("#scroller")[0], duration: 750, complete: function() { |
/* This test is purely visual. */ |
ok(true); |
|
$scrollTarget2.remove(); |
|
start(); |
} |
}); |
} |
}); |
} |
}); |
} |
}); |
}); |
} |
</script> |
</body> |
</html> |