transition.html revision b8e54cd0fdbfd4d5482a6c38e53b0d42e2e2baff
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe<html>
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe<head>
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe<title>Transition tests</title>
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe<link type="text/css" rel="stylesheet" href="/build/logreader/assets/skins/sam/logreader.css">
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe<script type="text/javascript" src="/build/yui/yui.js"></script>
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe<style>
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe#demo {
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe background: #ccc;
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe border: 5px solid green;
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe width: 200px;
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe height: 200px;
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe}
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe</style>
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe</head>
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe<body class="yui3-skin-sam">
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe <h1>Transition Tests</h1>
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe <div id="demo"></div>
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe
f71f7a61dec7c9089378d14493ad564a1dedf0b5neil_a_wilson<script type="text/javascript">
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipeYUI({
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe filter: "debug",
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe logInclude: { TestRunner: true }
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe}).use('transition', 'test', 'console', function (Y) {
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe Y.namespace('Tests');
a3d3ab94806056d2355afea6fe8daac41059b9fbludovicp Y.Tests.Transition = (function(){
0f8553e2af5fc49a510ecfcfc93e66d06713f631ludo var suite = new Y.Test.Suite('Transition Tests');
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe suite.add(new Y.Test.Case({
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe name: 'Multiple Transition Tests',
0f8553e2af5fc49a510ecfcfc93e66d06713f631ludo setUp: function() {
0f8553e2af5fc49a510ecfcfc93e66d06713f631ludo Y.one('#demo').setStyles({
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe height: '200px',
27f8adec83293fb8bd3bfa37175322b0ee3bb933jvergara width: '200px',
27f8adec83293fb8bd3bfa37175322b0ee3bb933jvergara opacity: '1'
266c5071a91fda6a5159b08ea8d45261228d03d5neil_a_wilson });
4edb61f8b0f8ce9f62d803c706612376498672b4al_xipe },
9da44d3de0a7180285a77b7e8d2426a72aca249ejvergara
'all chained callbacks should fire': function() {
var node = Y.one('#demo'),
test = this;
node.transition({
width: 0
}, function(e) {
test.resume(function() {
Y.log('callback 1');
Y.Assert.areEqual('0px', node.getComputedStyle('width'));
node.transition({
height: 0
}, function(e) {
Y.log('callback 2');
test.resume(function() {
Y.Assert.areEqual('0px', node.getComputedStyle('height'));
});
});
test.wait();
});
});
test.wait(4000);
},
'all serial callbacks should fire': function() {
var node = Y.one('#demo'),
test = this;
node.transition({
width: 0
}, function(e) {
test.resume(function() {
Y.Assert.areEqual('0px', node.getComputedStyle('width'));
test.wait(4000);
});
node.transition({
duration: 1,
height: 0
}, function(e) {
test.resume(function() {
Y.Assert.areEqual('0px', node.getComputedStyle('height'));
});
});
});
test.wait(4000);
},
'parallel transition should steal attribute': function() {
var node = Y.one('#demo'),
test = this;
node.transition({
width: 0
}, function(e) { // should never fire
test.resume(function() {
Y.Assert.isNull(1);
test.wait(4000);
});
});
node.transition({
duration: 1,
width: 0
}, function(e) {
test.resume(function() {
Y.Assert.areEqual('0px', node.getComputedStyle('width'));
});
});
test.wait(4000);
},
'parallel transition should shorten duration': function() {
var node = Y.one('#demo'),
test = this;
node.transition({
easing: 'ease-in',
duration: 2,
opacity: {
value: 0,
duration: 3
},
height: 0,
width: 0
}, function(e) {
test.resume(function() {
Y.Assert.areEqual(2, parseInt(e.elapsedTime));
});
});
node.transition({
duration: 1,
opacity: 0
}, function(e) {
test.resume(function() {
Y.Assert.areEqual('0', node.getComputedStyle('opacity'));
Y.Assert.areEqual(1, parseInt(e.elapsedTime));
test.wait(4000);
});
});
test.wait(4000);
}
}));
suite.add(new Y.Test.Case({
name: 'Single Transition Tests',
setUp: function() {
var node = Y.one('#demo');
if (node) {
node.setStyles({
height: '200px',
width: '200px',
opacity: '1'
});
}
},
'should end at final value': function() {
var node = Y.one('#demo'),
test = this;
node.transition({
width: 0
}, function(e) {
test.resume(function() {
Y.Assert.areEqual('0px', node.getComputedStyle('width'));
});
});
test.wait(4000);
},
'should end at final values': function() {
var node = Y.one('#demo'),
test = this;
node.transition({
width: 0,
height: 0,
opacity: 0
}, function(e) {
test.resume(function() {
Y.Assert.areEqual('0px', node.getComputedStyle('width'));
Y.Assert.areEqual('0px', node.getComputedStyle('height'));
Y.Assert.areEqual('0', node.getComputedStyle('opacity'));
});
});
test.wait(4000);
},
'callback should fire after longest duration': function() {
var node = Y.one('#demo'),
test = this;
node.transition({
easing: 'ease-in',
duration: 1,
opacity: {
value: 0,
duration: 2
},
height: 0,
width: 0
}, function(e) {
test.resume(function() {
Y.Assert.areEqual(2, parseInt(e.elapsedTime));
});
});
test.wait(4000);
}
}));
//return it
return suite;
})();
new Y.Console({
verbose : true,
height: 600,
newestOnTop : false
}).render();
//add to the testrunner and run
Y.Test.Runner.add(Y.Tests.Transition);
Y.Test.Runner.run();
/*if (parent && parent != window) {
YAHOO.tool.TestManager.load();
} else {
YAHOO.tool.TestRunner.run();
}*/
});
</script>
</body>
</html>