transition.html revision c8e4d490297a285316d25bb12037408129938310
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney<link type="text/css" rel="stylesheet" href="/build/logreader/assets/skins/sam/logreader.css">
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney<script type="text/javascript" src="/build/yui/yui.js"></script>
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney background: #ccc;
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney border: 5px solid green;
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney width: 200px;
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney height: 200px;
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney width: 200px;
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney height: 200px;
c8e4d490297a285316d25bb12037408129938310Matt Sweeney background: #fff;
c8e4d490297a285316d25bb12037408129938310Matt Sweeney position: absolute;
c8e4d490297a285316d25bb12037408129938310Matt Sweeney width: 30em;
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney filter: "raw",
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney logInclude: { TestRunner: true }
c8e4d490297a285316d25bb12037408129938310Matt Sweeney}).use('transition', 'test', 'test-console', function (Y) {
c8e4d490297a285316d25bb12037408129938310Matt Sweeney new Y.Test.Console({node: '#yui-log'}).render('#yui-log');
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney var suite = new Y.Test.Suite('Transition Tests');
056ec5e3a7c6ad7819398c8c3e6e225386c4bbd0Matt Sweeney name: 'property onend Tests',
056ec5e3a7c6ad7819398c8c3e6e225386c4bbd0Matt Sweeney 'should run the onend for the property': function() {
056ec5e3a7c6ad7819398c8c3e6e225386c4bbd0Matt Sweeney var node = Y.one('.demo'),
056ec5e3a7c6ad7819398c8c3e6e225386c4bbd0Matt Sweeney test = this;
056ec5e3a7c6ad7819398c8c3e6e225386c4bbd0Matt Sweeney end: function() {
056ec5e3a7c6ad7819398c8c3e6e225386c4bbd0Matt Sweeney Y.Assert.areEqual('0px', node.getComputedStyle('height'));
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney name: 'onstart Tests',
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney 'should run the onstart prior to setting target values': function() {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney var node = Y.one('.demo'),
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney test = this,
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney onstart = function() {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney height: function() {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney start: onstart
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney }, function() {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney Y.Assert.areEqual(h, node.getComputedStyle('height'));
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney name: 'onend Tests',
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney 'should run the onend after transition completes': function() {
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney var node = Y.one('.demo'),
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney test = this;
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney onend = function() {
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney Y.Assert.areEqual('0px', node.getComputedStyle('height'));
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney 'should run the onend before callback': function() {
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney var node = Y.one('.demo'),
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney test = this,
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney onend = function() {
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney Y.Assert.areEqual(h, node.getComputedStyle('height'));
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney height: function() {
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney }, function() {
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney Y.Assert.areEqual(h, node.getComputedStyle('height'));
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney name: 'Show Transition Tests',
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney 'should show the node with the default transition': function() {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney var node = Y.one('.demo'),
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney test = this;
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney node.setStyle('display', 'none');
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney node.setStyle('opacity', '0');
c8e4d490297a285316d25bb12037408129938310Matt Sweeney Y.later(550, null, function() {
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney Y.Assert.areEqual(1, node.getStyle('opacity'));
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney Y.Assert.areEqual('block', node.getStyle('display'));
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney 'should show the node with the default transition and fire callback': function() {
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney var node = Y.one('.demo'),
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney test = this;
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney node.setStyle('display', 'none');
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney node.setStyle('opacity', '0');
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney node.show(true, function() {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney Y.Assert.areEqual(1, node.getStyle('opacity'));
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney Y.Assert.areEqual('block', node.getStyle('display'));
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney 'should show the node with the named transition': function() {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney var node = Y.one('.demo'),
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney test = this,
c8e4d490297a285316d25bb12037408129938310Matt Sweeney Y.later(600, null, function() {
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney Y.Assert.areEqual(h, node.getComputedStyle('height'));
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney Y.Assert.areEqual(w, node.getComputedStyle('width'));
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney 'should show the node with the named transition using passed config': function() {
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney var node = Y.one('.demo'),
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney test = this,
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney Y.Assert.areEqual(0, node.getComputedStyle('opacity'));
c8e4d490297a285316d25bb12037408129938310Matt Sweeney duration: 0.2,
c8e4d490297a285316d25bb12037408129938310Matt Sweeney Y.later(250, null, function() {
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney Y.Assert.areEqual(h, node.getComputedStyle('height'));
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney Y.Assert.areEqual(w, node.getComputedStyle('width'));
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney Y.Assert.areEqual(1, node.getComputedStyle('opacity'));
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney 'should show the node with the named transition and fire callback': function() {
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney var node = Y.one('.demo'),
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney test = this,
c8e4d490297a285316d25bb12037408129938310Matt Sweeney node.show('sizeIn', {duration: 0.2}, function() {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney Y.Assert.areEqual(h, node.getComputedStyle('height'));
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney Y.Assert.areEqual(w, node.getComputedStyle('width'));
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney 'should override the default duration': function() {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney var node = Y.one('.demo'),
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney test = this;
c8e4d490297a285316d25bb12037408129938310Matt Sweeney node.show({duration: 0.25}, function(e) {
c8e4d490297a285316d25bb12037408129938310Matt Sweeney Y.Assert.areEqual(2, parseInt(e.elapsedTime * 10));
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney name: 'Hide Transition Tests',
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney 'should hide the node with the default transition': function() {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney var node = Y.one('.demo'),
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney test = this;
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney node.hide(true, function() {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney Y.Assert.areEqual(0, node.getStyle('opacity'));
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney Y.Assert.areEqual('none', node.getStyle('display'));
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney node.setStyle('display', 'block');
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney node.setStyle('opacity', '1');
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney Y.Assert.areEqual('block', node.getStyle('display'));
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney name: 'Named Transition Tests',
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney 'should run named effect': function() {
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney var node = Y.one('.demo'),
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney test = this;
c8e4d490297a285316d25bb12037408129938310Matt Sweeney Y.later(550, null, function(e) {
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney Y.Assert.areEqual(0, node.getStyle('opacity'));
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney 'should run named effect with passed config': function() {
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney var node = Y.one('.demo'),
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney test = this;
c8e4d490297a285316d25bb12037408129938310Matt Sweeney node.transition('fadeOut', {duration: 0.2, height: '0px'});
c8e4d490297a285316d25bb12037408129938310Matt Sweeney Y.later(250, null, function(e) {
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney Y.Assert.areEqual(0, node.getStyle('opacity'));
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney Y.Assert.areEqual('0px', node.getStyle('height'));
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney //node.setStyle('opacity', 1);
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney 'should run named effect and fire callback': function() {
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney var node = Y.one('.demo'),
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney test = this;
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney node.transition('fadeOut', function(e) {
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney Y.Assert.areEqual(0, node.getStyle('opacity'));
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney 'should override effect duration': function() {
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney var node = Y.one('.demo'),
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney test = this;
c8e4d490297a285316d25bb12037408129938310Matt Sweeney node.transition('fadeIn', {duration: 0.25}, function(e) {
c8e4d490297a285316d25bb12037408129938310Matt Sweeney Y.Assert.areEqual(2, parseInt(e.elapsedTime * 10));
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney Y.Assert.areEqual(1, node.getStyle('opacity'));
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney name: 'Multiple Transition Tests',
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney setUp: function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney Y.one('.demo').setStyles({
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney height: '200px',
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney width: '200px',
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney opacity: '1'
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney 'all chained callbacks should fire': function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney var node = Y.one('.demo'),
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney test = this;
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney }, function(e) {
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney Y.Assert.areEqual('0px', node.getComputedStyle('width'));
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney }, function(e) {
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney Y.Assert.areEqual('0px', node.getComputedStyle('height'));
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney 'setStyle should not transition 1': function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney var node = Y.one('.demo'),
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney test = this;
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney node.setStyle('height', '100px');
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney Y.Assert.areEqual('100px', node.getComputedStyle('height'));
85a258143f630b36522d3d1835a8e5a916dbad2cMatt Sweeney 'last transition should win for same property': function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney var node = Y.one('.demo'),
85a258143f630b36522d3d1835a8e5a916dbad2cMatt Sweeney test = this;
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney height: '100px'
85a258143f630b36522d3d1835a8e5a916dbad2cMatt Sweeney }, function(e) {
85a258143f630b36522d3d1835a8e5a916dbad2cMatt Sweeney test.resume(function() { // shouldnt fire
85a258143f630b36522d3d1835a8e5a916dbad2cMatt Sweeney }, function(e) {
85a258143f630b36522d3d1835a8e5a916dbad2cMatt Sweeney test.resume(function() { // shouldnt fire
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney height: '100px'
85a258143f630b36522d3d1835a8e5a916dbad2cMatt Sweeney }, function(e) {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney Y.Assert.areEqual('100px', node.getComputedStyle('height'));
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney 'setStyle should not transition 2': function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney var node = Y.one('.demo'),
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney test = this;
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney node.setStyle('height', '100px');
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney Y.Assert.areEqual('100px', node.getComputedStyle('height'));
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney 'all serial callbacks should fire': function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney var node = Y.one('.demo'),
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney test = this;
0dfbad86367ee46837c580e51d7d76e8bd6d88b7Matt Sweeney duration: 2,
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney }, function(e) {
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney Y.Assert.areEqual('0px', node.getComputedStyle('width'));
0dfbad86367ee46837c580e51d7d76e8bd6d88b7Matt Sweeney duration: 1,
0dfbad86367ee46837c580e51d7d76e8bd6d88b7Matt Sweeney }, function(e) {
0dfbad86367ee46837c580e51d7d76e8bd6d88b7Matt Sweeney Y.Assert.areEqual('0px', node.getComputedStyle('height'));
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney 'setStyle should not transition 3': function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney var node = Y.one('.demo'),
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney test = this;
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney node.setStyle('height', '100px');
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney Y.Assert.areEqual('100px', node.getComputedStyle('height'));
0dfbad86367ee46837c580e51d7d76e8bd6d88b7Matt Sweeney 'all serial callbacks should fire (duration)': function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney var node = Y.one('.demo'),
0dfbad86367ee46837c580e51d7d76e8bd6d88b7Matt Sweeney test = this;
0dfbad86367ee46837c580e51d7d76e8bd6d88b7Matt Sweeney duration: 1,
0dfbad86367ee46837c580e51d7d76e8bd6d88b7Matt Sweeney }, function(e) {
0dfbad86367ee46837c580e51d7d76e8bd6d88b7Matt Sweeney Y.Assert.areEqual('0px', node.getComputedStyle('width'));
0dfbad86367ee46837c580e51d7d76e8bd6d88b7Matt Sweeney duration: 2,
0dfbad86367ee46837c580e51d7d76e8bd6d88b7Matt Sweeney }, function(e) {
0dfbad86367ee46837c580e51d7d76e8bd6d88b7Matt Sweeney Y.Assert.areEqual('0px', node.getComputedStyle('height'));
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney 'setStyle should not transition 4': function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney var node = Y.one('.demo'),
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney test = this;
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney node.setStyle('height', '100px');
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney Y.Assert.areEqual('100px', node.getComputedStyle('height'));
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney 'parallel transition should steal attribute': function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney var node = Y.one('.demo'),
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney test = this;
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney }, function(e) { // should never fire
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney duration: 1,
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney }, function(e) {
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney Y.Assert.areEqual('0px', node.getComputedStyle('width'));
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney 'setStyle should not transition 5': function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney var node = Y.one('.demo'),
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney test = this;
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney node.setStyle('width', '100px');
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney Y.Assert.areEqual('100px', node.getComputedStyle('width'));
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney 'parallel transition should shorten duration': function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney var node = Y.one('.demo'),
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney test = this;
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney easing: 'ease-in',
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney duration: 2,
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney }, function(e) {
c8e4d490297a285316d25bb12037408129938310Matt Sweeney Y.Assert.areEqual(20, parseInt(e.elapsedTime * 10));
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney duration: 1,
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney }, function(e) {
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney Y.Assert.areEqual('0', node.getComputedStyle('opacity'));
c8e4d490297a285316d25bb12037408129938310Matt Sweeney Y.Assert.areEqual(10, parseInt(e.elapsedTime * 10));
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney 'setStyle should not transition 6': function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney var node = Y.one('.demo'),
bf3c648d6ab588c8b04fb824a7281898c469bd67Matt Sweeney test = this;
bf3c648d6ab588c8b04fb824a7281898c469bd67Matt Sweeney node.setStyle('height', '100px');
bf3c648d6ab588c8b04fb824a7281898c469bd67Matt Sweeney Y.Assert.areEqual('100px', node.getComputedStyle('height'));
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney name: 'Multiple Element Tests',
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney setUp: function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney Y.all('.demo').setStyles({
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney height: '200px',
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney width: '200px',
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney opacity: '1'
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney 'multiple elements should transition together': function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney var nodes = Y.all('.demo'),
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney test = this;
c8e4d490297a285316d25bb12037408129938310Matt Sweeney duration: 0.15,
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney height: '100px',
c8e4d490297a285316d25bb12037408129938310Matt Sweeney duration: 0.25
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney }, function(e) {
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney Y.Assert.areEqual('0px', node1.getComputedStyle('height'), 'item 1 height');
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney Y.Assert.areEqual('100px', node2.getComputedStyle('height'), 'item 2 height');
c8e4d490297a285316d25bb12037408129938310Matt Sweeney Y.Assert.areEqual(2, parseInt(e.elapsedTime * 10));
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney 'nodelist should transition together': function() {
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney var test = this,
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney resumed = false;
c8e4d490297a285316d25bb12037408129938310Matt Sweeney Y.all('.demo').transition({duration: 0.15, opacity: 0}, function(e) {
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney if (!resumed) {
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney resumed = true;
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney var nodes = Y.all('.demo');
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney Y.Assert.areEqual(0, nodes.item(0).getStyle('opacity'));
c8e4d490297a285316d25bb12037408129938310Matt Sweeney Y.Assert.areEqual(1, parseInt(e.elapsedTime * 10));
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney name: 'Single Transition Tests',
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney setUp: function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney Y.all('.demo').setStyles({
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney height: '200px',
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney width: '200px',
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney borderWidth: '5px',
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney paddingTop: 0,
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney opacity: '1'
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney 'should end at final value': function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney var node = Y.one('.demo'),
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney test = this;
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney }, function(e) {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney Y.Assert.areEqual('0px', node.getComputedStyle('width'));
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney 'should end at both final values': function() {
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney var node = Y.one('.demo'),
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney test = this;
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney easing: 'ease-out',
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney duration: 1.25,
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney easing: 'ease-out',
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney }, function(e) {
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney Y.Assert.areEqual('0px', node.getComputedStyle('height'));
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney Y.Assert.areEqual('0', node.getComputedStyle('opacity'));
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney 'callback should fire when transitioning to current value': function() {
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney var node = Y.one('.demo'),
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney test = this;
c8e4d490297a285316d25bb12037408129938310Matt Sweeney duration: 0.15,
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney height: '200px',
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney }, function(e) {
c8e4d490297a285316d25bb12037408129938310Matt Sweeney Y.Assert.areEqual(1, parseInt(e.elapsedTime * 10));
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney Y.Assert.areEqual('200px', node.getComputedStyle('height'));
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney Y.Assert.areEqual('0px', node.getComputedStyle('width'));
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney 'callback should fire when transitioning to current number value': function() {
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney var node = Y.one('.demo'),
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney test = this;
c8e4d490297a285316d25bb12037408129938310Matt Sweeney duration: 0.15,
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney }, function(e) {
c8e4d490297a285316d25bb12037408129938310Matt Sweeney Y.Assert.areEqual(1, parseInt(e.elapsedTime * 10));
5985d0db35cae8ef4c1a022bb03ac15792ff51adMatt Sweeney Y.Assert.areEqual('0px', node.getComputedStyle('width'));
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney 'should end at all final values': function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney var node = Y.one('.demo'),
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney test = this;
c8e4d490297a285316d25bb12037408129938310Matt Sweeney duration: 0.15,
2e49faa8717cc2acbd7ab2aac237061848568a6cMatt Sweeney borderTopWidth: '1px',
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney foo: 0, // ignore non-supported
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney paddingTop: '100px'
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney }, function(e) {
c8e4d490297a285316d25bb12037408129938310Matt Sweeney Y.Assert.areEqual(1, parseInt(e.elapsedTime * 10));
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney Y.Assert.areEqual('0px', node.getComputedStyle('width'));
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney Y.Assert.areEqual('0px', node.getComputedStyle('height'));
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney Y.Assert.areEqual('0', node.getComputedStyle('opacity'));
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney Y.Assert.areEqual('100px', node.getComputedStyle('paddingTop'));
2e49faa8717cc2acbd7ab2aac237061848568a6cMatt Sweeney Y.Assert.areEqual('1px', node.getStyle('borderTopWidth'));
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney 'callback should fire after longest duration': function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney var node = Y.one('.demo'),
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney test = this;
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney easing: 'ease-in',
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney duration: 1,
c8e4d490297a285316d25bb12037408129938310Matt Sweeney duration: 0.25
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney }, function(e) {
c8e4d490297a285316d25bb12037408129938310Matt Sweeney Y.Assert.areEqual(10, parseInt(e.elapsedTime * 10));
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney node.setStyle('height', '100px');
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney node.setStyle('opacity', '1');
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney Y.Assert.areEqual(1, node.getStyle('opacity'));
3f4cbe6edb218980892f798d09f41c804aeaa301Matt Sweeney/* deprecated
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney 'transition:end should fire after longest duration': function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney var node = Y.one('.demo'),
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney test = this,
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney easing: 'ease-in',
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney duration: 1,
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney node.once('transition:end', function(e) {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney node.setStyle('height', '100px');
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney node.setStyle('opacity', '1');
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney Y.Assert.areEqual(1, node.getStyle('opacity'));
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney 'native transform should map to vendor prefix': function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney var node = Y.one('.demo'),
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney test = this;
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney easing: 'ease',
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney duration: 1,
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney transform: 'rotate(180deg)'
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney }, function(e) {
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney node.setStyle('height', '100px');
2e49faa8717cc2acbd7ab2aac237061848568a6cMatt Sweeney Y.Assert.areEqual('matrix(-1, 0.00000000000000012246467991473532, -0.00000000000000012246467991473532, -1, 0, 0)', node.getComputedStyle('WebkitTransform'));
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney 'setStyle should not transition': function() {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney var node = Y.one('.demo'),
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney test = this;
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney node.setStyle('height', '100px');
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney Y.Assert.areEqual('100px', node.getComputedStyle('height'));
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney 'destroyed node should complete transition': function() {
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney var node = Y.one('.demo'),
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney test = this;
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney easing: 'ease',
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney duration: 1,
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney }, function(e) {
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney var node = Y.one('.demo');
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney Y.Assert.areEqual('0px', node.getComputedStyle('height'));
791ee0d70de75fc9e57367fbc95c336c39659666Matt Sweeney 'should clean up style object': function() {
f0d88feb1b7e3a775e0e9c8648faf84a32250546Matt Sweeney name: 'toggleView Tests',
f0d88feb1b7e3a775e0e9c8648faf84a32250546Matt Sweeney 'should force state with boolean first arg': function() {
f0d88feb1b7e3a775e0e9c8648faf84a32250546Matt Sweeney var node = Y.one('.demo'),
f0d88feb1b7e3a775e0e9c8648faf84a32250546Matt Sweeney test = this;
f0d88feb1b7e3a775e0e9c8648faf84a32250546Matt Sweeney node.toggleView(false, function() {
f0d88feb1b7e3a775e0e9c8648faf84a32250546Matt Sweeney Y.Assert.areEqual(0, node.getStyle('opacity'));
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney return suite;
c8e4d490297a285316d25bb12037408129938310Matt Sweeney Y.Test.Runner.subscribe(Y.Test.Runner.COMPLETE_EVENT, function(e) {
4a589644c0b4ea2684514116fbbad30d79536f8aMatt Sweeney //add to the testrunner and run