morpheus
Version:
A Brilliant Animator
263 lines (235 loc) • 8.51 kB
HTML
<html lang="en-us">
<head>
<title>Morpheus Tests</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css" media="screen">
#fixtures {
position: absolute;
top: -999px;
}
#test {
left: 5px;
top: 5px;
position: relative;
}
</style>
<link rel="stylesheet" href="../node_modules/sink-test/src/sink.css" type="text/css">
<script src="../node_modules/sink-test/src/sink.js"></script>
<script src="../src/morpheus.js" type="text/javascript"></script>
</head>
<body>
<h1>Morpheus Tests</h1>
<div id="fixtures">
<div id="test"></div>
</div>
<ol id="tests"></ol>
<script>
sink('Basic', function(test, ok, before, after) {
var el = document.getElementById('test')
test('should take roughly the correct duration', 1, function () {
var start = +new Date()
, duration = 500
el.style.width = '10px'
morpheus(el, {
width: '500px',
duration: duration,
complete: function () {
var delta = +new Date() - start
ok(Math.abs(delta - duration) < duration * 0.2, 'duration is +/- 20% of requested (' + delta + ')')
}
})
})
test('should retain all options', 2, function () {
var n = 0
var options = {
width: 100,
duration: 50,
complete: function () {
ok(true, 'called complete ' + (++n) + ' time(s)')
if (n < 2) {
morpheus(el, options)
}
}
}
morpheus(el, options)
})
})
sink('Integers', function(test, ok, before, after) {
var el = document.getElementById('test')
before(function () {
el.style.left = 0
el.style.top = '10px'
})
test('should accept raw number value sans-unit', 1, function () {
morpheus(el, {
left: 5,
duration: 10,
complete: function () {
ok(el.style.left == '5px', 'el.style.left == "5px"')
}
})
})
test('should accept pixel value', 1, function () {
morpheus(el, {
left: '10px',
duration: 10,
complete: function () {
ok(el.style.left == '10px', 'el.style.left == "10px"')
}
})
})
test('should accept negative value with unit', 1, function () {
morpheus(el, {
left: '-10%',
duration: 10,
complete: function () {
ok(el.style.left == '-10%', 'el.style.left == "-10%"')
}
})
})
test('should accept positive += offset', 2, function () {
morpheus(el, {
top: '+=10px',
left: '+=10',
duration: 10,
complete: function () {
ok(el.style.top == '20px', '10px +=10px == "20px"')
ok(el.style.left == '10px', '0 +=10 == "10px"')
}
})
})
test('should accept negative -= offset', 2, function () {
morpheus(el, {
top: '-=10px',
left: '-=10',
duration: 10,
complete: function () {
ok(el.style.top == '0px', '10px -=10px == "0px"')
ok(el.style.left == '-10px', '0 -=10 == "-10px"')
}
})
})
test('should move relative to negative numbers', 1, function () {
el.style.top = '-10px';
morpheus(el, {
top: '+=10px',
duration: 10,
complete: function () {
ok(el.style.top == '0px', '-10px +=10px == "0px"')
}
})
})
});
sink('Colors', function (test, ok) {
var el = document.getElementById('test')
test('should accept long hex', 1, function () {
morpheus(el, {
color: '#ff0000',
duration: 10,
complete: function () {
ok(el.style.color == 'rgb(255, 0, 0)', 'color is rgb(255, 0, 0)')
}
})
})
test('should accept short hex', 1, function () {
morpheus(el, {
color: '#f00',
duration: 10,
complete: function () {
ok(el.style.color == 'rgb(255, 0, 0)', 'color is rgb(255, 0, 0)')
}
})
})
});
sink('Syntax', function (test, ok) {
var el = document.getElementById('test');
test('should accept dashes in properties', 1, function () {
morpheus(el, {
'font-size': 30,
duration: 10,
complete: function () {
ok(el.style.fontSize == '30px', 'el.style.fontSize == "30px"')
}
})
})
test('should accept camelCase in properties', 1, function () {
morpheus(el, {
fontSize: 50,
duration: 10,
complete: function () {
ok(el.style.fontSize == '50px', 'el.style.fontSize == "50px"')
}
})
})
})
var transformTest = function(test, ok, title, start, transform, verify) {
verify = typeof verify == 'string' ? [verify] : verify
var el = document.getElementById('test')
test(title, verify.length, function() {
el.style[morpheus.transform] = start
morpheus(el, {
transform: transform,
duration: 10,
complete: function () {
var v = morpheus.parseTransform(el.style[morpheus.transform])
for (var i = 0; i < verify.length; i++) {
ok(eval(verify[i]), verify[i])
}
}
})
})
}
sink('Transform', function(test, ok, before, after) {
transformTest(test, ok, 'should accept absolute rotate','rotate(30deg)','rotate(40deg)','v.rotate == 40')
transformTest(test, ok, 'should accept relative rotate','rotate(10deg)','rotate(-=20deg)','v.rotate == -10 || v.rotate == 350')
transformTest(test, ok, 'should accept absolute scale','scale(1)','scale(3)','v.scale == 3')
transformTest(test, ok, 'should accept relative scale','scale(1)','scale(+=3)','v.scale == 4')
transformTest(test, ok, 'should accept absolute skew','skew(10deg,10deg)','skew(30deg,90deg)',['v.skewx == 30','v.skewy == 90'])
transformTest(test, ok, 'should accept relative skew','skew(10deg,10deg)','skew(+=30deg,-=6deg)',['v.skewx == 40','v.skewy == 4'])
transformTest(test, ok, 'should accept absolute translate','translate(-10px,0px)','translate(30px,99px)',['v.translatex == 30','v.translatey == 99'])
transformTest(test, ok, 'should accept relative translate','translate(100px,100px)','translate(+=30px,-=106px)',['v.translatex == 130','v.translatey == -6'])
})
sink('getStyle', function (test, ok) {
test('camelize', function (done) {
try {
var el = document.getElementById('test')
morpheus.getStyle(el, 'font-size')
ok(true, 'property was properly camelized')
} catch (ex) {
ok(false, 'should not error')
}
done()
})
})
sink('Out', function (test, ok) {
var el = document.getElementById('test')
test('stop() method should stop an animation and run callback', 1, function () {
var inst = morpheus(el, {
duration: 10000
, left: 100
, complete: function () {
ok(false, 'callback should not be called')
}
})
inst.stop()
setTimeout(function() {
ok(parseFloat(el.style.left) < 100, 'did not animate to full extent')
}, 10)
})
test('stop(jump) should stop animation, jump to end, and *not* fire callback', 2, function () {
var inst = morpheus(el, {
duration: 10000
, left: 100
, complete: function () {
ok(true, 'callback should have been called')
ok(parseFloat(el.style.left) == 100, 'jumped to end of animation')
}
})
inst.stop(true)
})
})
start()
</script>
</body>
</html>