transition.html revision 2e49faa8717cc2acbd7ab2aac237061848568a6c
0N/A<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
328N/A<html>
0N/A<head>
0N/A<title>Transition tests</title>
0N/A<link type="text/css" rel="stylesheet" href="/build/logreader/assets/skins/sam/logreader.css">
0N/A<script type="text/javascript" src="/build/yui/yui.js"></script>
180N/A<style>
0N/A.demo {
180N/A background: #ccc;
0N/A border: 5px solid green;
0N/A width: 200px;
0N/A height: 200px;
0N/A}
0N/A
0N/A.demo div {
0N/A width: 200px;
0N/A height: 200px;
0N/A}
0N/A</style>
0N/A</head>
180N/A<body class="yui3-skin-sam">
180N/A <h1>Transition Tests</h1>
180N/A <div class="demo"><div></div></div>
0N/A <div class="demo"><div></div></div>
0N/A
5N/A<script type="text/javascript">
5N/AYUI({
338N/A filter: "raw",
338N/A logInclude: { TestRunner: true }
338N/A}).use('transition', 'test', 'console', function (Y) {
338N/A Y.namespace('Tests');
338N/A Y.Tests.Transition = (function(){
338N/A var suite = new Y.Test.Suite('Transition Tests');
338N/A
338N/A suite.add(new Y.Test.Case({
338N/A name: 'property onend Tests',
338N/A
338N/A 'should run the onend for the property': function() {
338N/A
338N/A var node = Y.one('.demo'),
338N/A test = this;
338N/A
338N/A node.transition({
338N/A height: {
338N/A value: 0,
338N/A on: {
338N/A end: function() {
338N/A test.resume(function() {
338N/A Y.Assert.areEqual('0px', node.getComputedStyle('height'));
338N/A node.setStyle('height', '');
338N/A });
338N/A }
338N/A }
338N/A }
338N/A });
0N/A
8N/A test.wait(1000);
0N/A }
0N/A
0N/A }));
0N/A
0N/A suite.add(new Y.Test.Case({
0N/A name: 'onstart Tests',
0N/A
0N/A 'should run the onstart prior to setting target values': function() {
0N/A var node = Y.one('.demo'),
27N/A test = this,
0N/A h = node.getComputedStyle('height'),
27N/A onstart = function() {
27N/A node.setStyle('height', 0);
27N/A };
0N/A
0N/A node.setStyle('height', h);
0N/A node.transition({
0N/A height: function() {
0N/A return h;
0N/A },
0N/A
0N/A on: {
0N/A start: onstart
0N/A }
286N/A }, function() {
27N/A test.resume(function() {
27N/A Y.Assert.areEqual(h, node.getComputedStyle('height'));
27N/A node.setStyle('height', '');
27N/A });
27N/A });
27N/A
27N/A test.wait(1000);
27N/A }
27N/A
32N/A }));
32N/A
315N/A suite.add(new Y.Test.Case({
315N/A name: 'onend Tests',
311N/A
311N/A 'should run the onend after transition completes': function() {
27N/A var node = Y.one('.demo'),
27N/A test = this;
27N/A onend = function() {
27N/A test.resume(function() {
27N/A Y.Assert.areEqual('0px', node.getComputedStyle('height'));
27N/A node.setStyle('height', '');
27N/A });
311N/A };
27N/A
27N/A node.transition({
27N/A height: 0,
27N/A on: {
311N/A end: onend
27N/A }
27N/A });
27N/A
27N/A test.wait(1000);
27N/A },
27N/A
311N/A 'should run the onend before callback': function() {
311N/A var node = Y.one('.demo'),
311N/A test = this,
311N/A h = node.getComputedStyle('height'),
311N/A onend = function() {
311N/A test.resume(function() {
311N/A Y.Assert.areEqual(h, node.getComputedStyle('height'));
311N/A node.setStyle('height', h);
311N/A test.wait(1000);
27N/A });
189N/A };
332N/A
338N/A node.setStyle('height', 0);
311N/A node.transition({
27N/A height: function() {
27N/A return h;
27N/A },
27N/A
27N/A on: {
27N/A end: onend
27N/A }
27N/A }, function() {
27N/A test.resume(function() {
27N/A Y.Assert.areEqual(h, node.getComputedStyle('height'));
27N/A node.setStyle('height', '');
27N/A });
27N/A });
27N/A
27N/A test.wait(1000);
27N/A }
27N/A
27N/A }));
27N/A
27N/A suite.add(new Y.Test.Case({
27N/A name: 'Show Transition Tests',
27N/A
27N/A 'should show the node with the default transition': function() {
27N/A var node = Y.one('.demo'),
27N/A test = this;
27N/A
27N/A node.setStyle('display', 'none');
27N/A node.setStyle('opacity', '0');
27N/A node.show(true);
27N/A
27N/A Y.later(750, null, function() {
27N/A test.resume(function() {
27N/A Y.Assert.areEqual(1, node.getStyle('opacity'));
27N/A Y.Assert.areEqual('block', node.getStyle('display'));
27N/A });
27N/A });
613N/A test.wait(1000);
613N/A },
613N/A
613N/A 'should show the node with the default transition and fire callback': function() {
613N/A var node = Y.one('.demo'),
311N/A test = this;
311N/A
311N/A node.setStyle('display', 'none');
27N/A node.setStyle('opacity', '0');
613N/A node.show(true, function() {
613N/A test.resume(function() {
613N/A Y.Assert.areEqual(1, node.getStyle('opacity'));
27N/A Y.Assert.areEqual('block', node.getStyle('display'));
27N/A });
27N/A });
338N/A test.wait(1000);
613N/A },
338N/A
27N/A 'should show the node with the named transition': function() {
27N/A var node = Y.one('.demo'),
27N/A test = this,
27N/A h = node.getComputedStyle('height'),
27N/A w = node.getComputedStyle('width');
189N/A
189N/A node.setStyles({
189N/A height: 0,
189N/A width: 0
27N/A });
27N/A
27N/A node.show('sizeIn');
338N/A
338N/A Y.later(750, null, function() {
613N/A test.resume(function() {
27N/A Y.Assert.areEqual(h, node.getComputedStyle('height'));
27N/A Y.Assert.areEqual(w, node.getComputedStyle('width'));
142N/A });
27N/A });
27N/A test.wait(1000);
27N/A },
27N/A
27N/A 'should show the node with the named transition using passed config': function() {
142N/A var node = Y.one('.demo'),
27N/A test = this,
27N/A h = node.getComputedStyle('height'),
27N/A w = node.getComputedStyle('width');
27N/A
27N/A node.setStyles({
142N/A height: 0,
27N/A width: 0,
27N/A opacity: 0
27N/A });
27N/A
27N/A Y.Assert.areEqual(0, node.getComputedStyle('opacity'));
27N/A
27N/A node.show('sizeIn', {
27N/A opacity: 1
27N/A });
27N/A
311N/A Y.later(750, null, function() {
311N/A test.resume(function() {
27N/A Y.Assert.areEqual(h, node.getComputedStyle('height'));
613N/A Y.Assert.areEqual(w, node.getComputedStyle('width'));
27N/A Y.Assert.areEqual(1, node.getComputedStyle('opacity'));
27N/A });
27N/A });
27N/A test.wait(1000);
27N/A },
27N/A
27N/A 'should show the node with the named transition and fire callback': function() {
27N/A var node = Y.one('.demo'),
27N/A test = this,
27N/A h = node.getComputedStyle('height'),
27N/A w = node.getComputedStyle('width');
27N/A
27N/A node.setStyles({
27N/A height: 0,
27N/A width: 0
27N/A });
27N/A node.show('sizeIn', function() {
27N/A test.resume(function() {
27N/A Y.Assert.areEqual(h, node.getComputedStyle('height'));
27N/A Y.Assert.areEqual(w, node.getComputedStyle('width'));
27N/A });
27N/A });
27N/A test.wait(1000);
27N/A },
27N/A
27N/A 'should override the default duration': function() {
27N/A var node = Y.one('.demo'),
27N/A test = this;
189N/A
189N/A node.setStyle('opacity', 0);
189N/A
189N/A node.show({duration: 1}, function(e) {
27N/A test.resume(function() {
27N/A Y.Assert.areEqual(1, parseInt(e.elapsedTime));
338N/A });
27N/A });
142N/A test.wait(2000);
613N/A }
742N/A }));
27N/A
27N/A suite.add(new Y.Test.Case({
27N/A name: 'Hide Transition Tests',
27N/A
27N/A 'should hide the node with the default transition': function() {
27N/A var node = Y.one('.demo'),
27N/A test = this;
27N/A
27N/A node.hide(true, function() {
27N/A test.resume(function() {
27N/A Y.Assert.areEqual(0, node.getStyle('opacity'));
27N/A Y.Assert.areEqual('none', node.getStyle('display'));
27N/A node.setStyle('display', 'block');
0N/A node.setStyle('opacity', '1');
332N/A });
332N/A });
332N/A
332N/A Y.Assert.areEqual('block', node.getStyle('display'));
332N/A test.wait(1000);
332N/A }
332N/A
332N/A }));
311N/A
311N/A
0N/A suite.add(new Y.Test.Case({
0N/A name: 'Named Transition Tests',
0N/A
0N/A/* serial effects not yet implemented
0N/A 'should run named effects in serial': function() {
27N/A var node = Y.one('.demo'),
27N/A test = this;
27N/A
27N/A node.transition(['fadeOut', 'fadeIn'], function(e) {
27N/A test.resume(function() {
27N/A Y.Assert.areEqual(2, parseInt(e.elapsedTime));
27N/A });
27N/A });
27N/A
27N/A test.wait(3000);
27N/A },
27N/A*/
0N/A
0N/A 'should run named effect': function() {
0N/A var node = Y.one('.demo'),
0N/A test = this;
0N/A
0N/A node.transition('fadeOut');
0N/A
0N/A Y.later(750, null, function(e) {
0N/A test.resume(function() {
0N/A Y.Assert.areEqual(0, node.getStyle('opacity'));
0N/A });
0N/A });
0N/A
0N/A test.wait(1000);
0N/A },
0N/A
0N/A 'should run named effect with passed config': function() {
0N/A var node = Y.one('.demo'),
0N/A test = this;
0N/A
0N/A node.transition('fadeOut', {height: '0px'});
0N/A
0N/A Y.later(750, null, function(e) {
0N/A test.resume(function() {
0N/A Y.Assert.areEqual(0, node.getStyle('opacity'));
0N/A Y.Assert.areEqual('0px', node.getStyle('height'));
0N/A //node.setStyle('opacity', 1);
0N/A });
0N/A });
0N/A
0N/A
0N/A test.wait(1000);
0N/A },
0N/A
0N/A 'should run named effect and fire callback': function() {
0N/A var node = Y.one('.demo'),
0N/A test = this;
0N/A
0N/A node.transition('fadeOut', function(e) {
0N/A test.resume(function() {
0N/A Y.Assert.areEqual(0, node.getStyle('opacity'));
0N/A });
0N/A });
0N/A
0N/A test.wait(4000);
0N/A },
0N/A
0N/A 'should override effect duration': function() {
0N/A var node = Y.one('.demo'),
0N/A test = this;
0N/A
0N/A node.transition('fadeIn', {duration: 2}, function(e) {
0N/A test.resume(function() {
0N/A Y.Assert.areEqual(2, parseInt(e.elapsedTime));
0N/A Y.Assert.areEqual(1, node.getStyle('opacity'));
0N/A });
0N/A });
0N/A
0N/A test.wait(3000);
0N/A }
0N/A
0N/A }));
0N/A
0N/A suite.add(new Y.Test.Case({
0N/A name: 'Multiple Transition Tests',
0N/A setUp: function() {
0N/A Y.one('.demo').setStyles({
0N/A height: '200px',
0N/A width: '200px',
0N/A opacity: '1'
0N/A });
0N/A },
0N/A
0N/A 'all chained callbacks should fire': function() {
0N/A var node = Y.one('.demo'),
0N/A test = this;
0N/A
0N/A node.transition({
0N/A width: 0
0N/A }, function(e) {
0N/A test.resume(function() {
0N/A Y.Assert.areEqual('0px', node.getComputedStyle('width'));
0N/A node.transition({
0N/A height: 0
0N/A }, function(e) {
0N/A test.resume(function() {
0N/A Y.Assert.areEqual('0px', node.getComputedStyle('height'));
0N/A });
0N/A });
0N/A test.wait(1000);
0N/A });
0N/A });
0N/A
0N/A test.wait(1000);
0N/A },
0N/A 'setStyle should not transition 1': function() {
0N/A var node = Y.one('.demo'),
0N/A test = this;
0N/A
0N/A node.setStyle('height', '100px');
0N/A Y.Assert.areEqual('100px', node.getComputedStyle('height'));
0N/A },
0N/A
0N/A 'last transition should win for same property': function() {
0N/A var node = Y.one('.demo'),
0N/A test = this;
0N/A
0N/A node.transition({
0N/A height: '100px'
0N/A }, function(e) {
0N/A test.resume(function() { // shouldnt fire
0N/A Y.Assert.isNull(1);
0N/A });
0N/A });
289N/A
0N/A node.transition({
0N/A height: 0
289N/A }, function(e) {
0N/A test.resume(function() { // shouldnt fire
0N/A Y.Assert.isNull(1);
0N/A });
0N/A });
0N/A
0N/A node.transition({
0N/A height: '100px'
0N/A }, function(e) {
0N/A test.resume(function() {
0N/A Y.Assert.areEqual('100px', node.getComputedStyle('height'));
0N/A });
0N/A });
0N/A
0N/A test.wait(2000);
0N/A },
0N/A
0N/A 'setStyle should not transition 2': function() {
0N/A var node = Y.one('.demo'),
0N/A test = this;
0N/A
0N/A node.setStyle('height', '100px');
0N/A Y.Assert.areEqual('100px', node.getComputedStyle('height'));
0N/A },
0N/A
0N/A 'all serial callbacks should fire': function() {
0N/A var node = Y.one('.demo'),
0N/A test = this;
0N/A
0N/A node.transition({
0N/A duration: 2,
0N/A width: 0
0N/A }, function(e) {
0N/A test.resume(function() {
0N/A Y.Assert.areEqual('0px', node.getComputedStyle('width'));
0N/A });
0N/A });
0N/A
0N/A node.transition({
0N/A duration: 1,
0N/A height: 0
0N/A }, function(e) {
0N/A test.resume(function() {
0N/A Y.Assert.areEqual('0px', node.getComputedStyle('height'));
0N/A test.wait(2000);
0N/A });
0N/A });
0N/A
0N/A test.wait(2000);
0N/A },
0N/A
0N/A 'setStyle should not transition 3': function() {
0N/A var node = Y.one('.demo'),
0N/A test = this;
0N/A
276N/A node.setStyle('height', '100px');
0N/A Y.Assert.areEqual('100px', node.getComputedStyle('height'));
0N/A },
0N/A
0N/A 'all serial callbacks should fire (duration)': function() {
0N/A var node = Y.one('.demo'),
0N/A test = this;
189N/A
189N/A node.transition({
189N/A duration: 1,
222N/A width: 0
189N/A }, function(e) {
222N/A test.resume(function() {
222N/A Y.Assert.areEqual('0px', node.getComputedStyle('width'));
222N/A test.wait(2000);
222N/A });
189N/A });
189N/A
189N/A node.transition({
189N/A duration: 2,
189N/A height: 0
189N/A }, function(e) {
189N/A test.resume(function() {
189N/A Y.Assert.areEqual('0px', node.getComputedStyle('height'));
189N/A });
189N/A });
189N/A
189N/A test.wait(2000);
189N/A },
189N/A
189N/A 'setStyle should not transition 4': function() {
189N/A var node = Y.one('.demo'),
189N/A test = this;
189N/A
189N/A node.setStyle('height', '100px');
189N/A Y.Assert.areEqual('100px', node.getComputedStyle('height'));
189N/A },
189N/A
189N/A 'parallel transition should steal attribute': function() {
189N/A var node = Y.one('.demo'),
189N/A test = this;
222N/A
189N/A node.transition({
189N/A width: 0
189N/A }, function(e) { // should never fire
338N/A test.resume(function() {
338N/A Y.Assert.isNull(1);
189N/A test.wait(2000);
189N/A });
189N/A
189N/A });
189N/A
189N/A node.transition({
222N/A duration: 1,
189N/A width: 0
189N/A }, function(e) {
222N/A test.resume(function() {
222N/A Y.Assert.areEqual('0px', node.getComputedStyle('width'));
189N/A });
189N/A });
189N/A
0N/A test.wait(2000);
0N/A },
0N/A
0N/A 'setStyle should not transition 5': function() {
0N/A var node = Y.one('.demo'),
0N/A test = this;
0N/A
0N/A node.setStyle('width', '100px');
0N/A Y.Assert.areEqual('100px', node.getComputedStyle('width'));
222N/A },
613N/A
613N/A 'parallel transition should shorten duration': function() {
27N/A var node = Y.one('.demo'),
27N/A test = this;
27N/A
27N/A node.transition({
27N/A easing: 'ease-in',
27N/A duration: 2,
27N/A opacity: {
27N/A value: 0,
27N/A duration: 3
27N/A },
27N/A height: 0,
0N/A width: 0
5N/A }, function(e) {
5N/A 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(2000);
});
});
test.wait(2500);
},
'setStyle should not transition 6': function() {
var node = Y.one('.demo'),
test = this;
node.setStyle('height', '100px');
Y.Assert.areEqual('100px', node.getComputedStyle('height'));
}
}));
suite.add(new Y.Test.Case({
name: 'Multiple Element Tests',
setUp: function() {
Y.all('.demo').setStyles({
height: '200px',
width: '200px',
opacity: '1'
});
},
'multiple elements should transition together': function() {
var nodes = Y.all('.demo'),
node1 = nodes.item(0),
node2 = nodes.item(1),
test = this;
node1.transition({
duration: 1,
height: 0
});
node2.transition({
height: '100px',
duration: 2
}, function(e) {
test.resume(function () {
Y.Assert.areEqual('0px', node1.getComputedStyle('height'), 'item 1 height');
Y.Assert.areEqual('100px', node2.getComputedStyle('height'), 'item 2 height');
Y.Assert.areEqual(2, parseInt(e.elapsedTime));
});
});
test.wait(2500);
},
'nodelist should transition together': function() {
var test = this,
resumed = false;
Y.all('.demo').transition({duration: 1, opacity: 0}, function(e) {
if (!resumed) {
test.resume(function() {
resumed = true;
var nodes = Y.all('.demo');
Y.Assert.areEqual(0, nodes.item(0).getStyle('opacity'));
Y.Assert.areEqual(1, parseInt(e.elapsedTime));
});
}
});
test.wait(2000);
}
}));
suite.add(new Y.Test.Case({
name: 'Single Transition Tests',
setUp: function() {
Y.all('.demo').setStyles({
height: '200px',
width: '200px',
borderWidth: '5px',
paddingTop: 0,
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(2000);
},
'should end at both final values': function() {
var node = Y.one('.demo'),
test = this;
node.transition({
opacity: {
easing: 'ease-out',
duration: 1.25,
value: 0
},
height: {
delay:1.25,
easing: 'ease-out',
value: 0
}
}, function(e) {
test.resume(function() {
Y.Assert.areEqual('0px', node.getComputedStyle('height'));
Y.Assert.areEqual('0', node.getComputedStyle('opacity'));
});
});
test.wait(2000);
},
'callback should fire when transitioning to current value': function() {
var node = Y.one('.demo'),
test = this;
node.transition({
duration: 1,
height: '200px',
width: 0
}, function(e) {
test.resume(function() {
Y.Assert.areEqual(1, parseInt(e.elapsedTime));
Y.Assert.areEqual('200px', node.getComputedStyle('height'));
Y.Assert.areEqual('0px', node.getComputedStyle('width'));
});
});
test.wait(2000);
},
'callback should fire when transitioning to current number value': function() {
var node = Y.one('.demo'),
test = this;
node.setStyle('width', 0);
node.transition({
duration: 1,
width: 0
}, function(e) {
test.resume(function() {
Y.Assert.areEqual(1, parseInt(e.elapsedTime));
Y.Assert.areEqual('0px', node.getComputedStyle('width'));
});
});
test.wait(2000);
},
'should end at all final values': function() {
var node = Y.one('.demo'),
test = this;
node.transition({
duration: 1,
width: 0,
height: 0,
opacity: 0,
borderTopWidth: '1px',
foo: 0, // ignore non-supported
paddingTop: '100px'
}, function(e) {
test.resume(function() {
Y.Assert.areEqual(1, parseInt(e.elapsedTime));
Y.Assert.areEqual('0px', node.getComputedStyle('width'));
Y.Assert.areEqual('0px', node.getComputedStyle('height'));
Y.Assert.areEqual('0', node.getComputedStyle('opacity'));
Y.Assert.areEqual('100px', node.getComputedStyle('paddingTop'));
Y.Assert.areEqual('1px', node.getStyle('borderTopWidth'));
});
});
test.wait(2000);
},
'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));
node.setStyle('height', '100px');
node.setStyle('opacity', '1');
Y.Assert.areEqual(1, node.getStyle('opacity'));
});
});
test.wait(3000);
},
/* deprecated
'transition:end should fire after longest duration': function() {
var node = Y.one('.demo'),
test = this,
config = {
easing: 'ease-in',
duration: 1,
opacity: {
value: 0,
duration: 2
},
height: 0,
width: 0
};
node.once('transition:end', function(e) {
test.resume(function() {
Y.Assert.areEqual(2, parseInt(e.elapsedTime));
Y.Assert.areSame(config, e.config);
node.setStyle('height', '100px');
node.setStyle('opacity', '1');
Y.Assert.areEqual(1, node.getStyle('opacity'));
});
});
node.transition(config);
test.wait(4000);
},
*/
'native transform should map to vendor prefix': function() {
var node = Y.one('.demo'),
test = this;
node.transition({
easing: 'ease',
duration: 1,
height: 0,
transform: 'rotate(180deg)'
}, function(e) {
test.resume(function() {
Y.Assert.areEqual(1, parseInt(e.elapsedTime));
node.setStyle('height', '100px');
if (Y.UA.webkit) {
Y.Assert.areEqual('matrix(-1, 0.00000000000000012246467991473532, -0.00000000000000012246467991473532, -1, 0, 0)', node.getComputedStyle('WebkitTransform'));
}
});
});
test.wait(2000);
},
'setStyle should not transition': function() {
var node = Y.one('.demo'),
test = this;
node.setStyle('height', '100px');
Y.Assert.areEqual('100px', node.getComputedStyle('height'));
},
'destroyed node should complete transition': function() {
var node = Y.one('.demo'),
test = this;
node.transition({
easing: 'ease',
duration: 1,
height: 0
}, function(e) {
test.resume(function() {
var node = Y.one('.demo');
Y.Assert.areEqual(1, parseInt(e.elapsedTime));
Y.Assert.areEqual('0px', node.getComputedStyle('height'));
});
});
node.destroy();
test.wait(2000);
}
}));
suite.add(new Y.Test.Case({
name: 'toggleView Tests',
'should force state with boolean first arg': function() {
var node = Y.one('.demo'),
test = this;
node.toggleView(false, function() {
test.resume(function() {
Y.Assert.areEqual(0, node.getStyle('opacity'));
node.destroy();
})
});
test.wait(2000);
}
}));
//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>