emile
Version:
no-thrills stand-alone CSS animation JavaScript framework
80 lines (70 loc) • 2.32 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Émile unit tests</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="../build/sink/src/sink.css" type="text/css">
<style type="text/css">
#fixtures {
position: absolute;
top: -999em;
}
</style>
<script src="../src/emile.js"></script>
<script src="../build/sink/src/sink.js"></script>
</head>
<body>
<div id="fixtures">
<div id="test_basic" style="position:absolute;left:0px;">test1</div>
<div id="test_with_negative_value" style="position:absolute;left:-20px;">test2</div>
<div id="test_after" style="position:absolute;left:0px;">test3</div>
</div>
<h1>Émile unit tests</h1>
<ol id="tests"></ol>
<script>
sink('Emile', function (test, ok, before, after) {
test('basic', 3, function () {
var element = document.getElementById('test_basic');
ok('0px' == element.style.left, 'element is 0px');
emile(element, {
left: 300,
duration: 100
});
ok('0px' == element.style.left, 'element still 0px');
setTimeout(function(){
ok('300px' == element.style.left, 'element is 300px');
}, 250);
});
test('negative values', 3, function () {
var element = document.getElementById('test_with_negative_value');
ok('-20px' == element.style.left, 'element is -20px');
emile(element, {
left: -10,
duration: 1
});
ok('-20px' == element.style.left, 'element is still -20px');
setTimeout(function(){
ok('-10px' == element.style.left, 'element is -10px');
}, 100);
});
test('after callbacks', 3, function () {
var element = document.getElementById('test_after'),
optionsAfter = false;
ok(!optionsAfter, 'no options after');
emile(element, {
left: '300px',
duration: 50,
after: function () {
optionsAfter = true;
}
});
ok(!optionsAfter, 'still no options after');
setTimeout(function(){
ok(optionsAfter, 'finally options after');
}, 250);
});
});
start();
</script>
</body>
</html>