Skip to content

Instantly share code, notes, and snippets.

@ericf

ericf/gist:6630093

Created September 19, 2013 21:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ericf/6630093 to your computer and use it in GitHub Desktop.
Save ericf/6630093 to your computer and use it in GitHub Desktop.
Download ZIP
Y.Transition diff v3.7.3...v3.12.0
Raw
gistfile1.diff
diff --git a/src/transition/HISTORY.md b/src/transition/HISTORY.md
index 499be0c..9cb05a0 100644
--- a/src/transition/HISTORY.md
+++ b/src/transition/HISTORY.md
@@ -1,6 +1,59 @@
Transition Change History
=========================
+3.12.0
+------
+
+* No changes.
+
+3.11.0
+------
+
+* No changes.
+
+3.10.3
+------
+
+* No changes.
+
+3.10.2
+------
+
+* No changes.
+
+3.10.1
+------
+
+* No changes.
+
+3.10.0
+------
+
+* No changes.
+
+3.9.1
+-----
+
+* No changes.
+
+3.9.0
+-----
+
+* Fixed `transitionend` event issues in Android 4.1 which claims it supports
+ non-prefixed transition properties, when it doesn't.
+
+* `transform` prefix is now handled separately from `transition` prefix.
+
+3.8.1
+-----
+
+* PR #398 Fix show, hide and toggleView methods in transition module [prajwalit]
+
+3.8.0
+-----
+
+ * No changes.
+
3.7.3
-----
diff --git a/src/transition/js/transition-native.js b/src/transition/js/transition-native.js
index c723f083..3339f6a 100644
--- a/src/transition/js/transition-native.js
+++ b/src/transition/js/transition-native.js
@@ -10,10 +10,9 @@ var CAMEL_VENDOR_PREFIX = '',
VENDOR_PREFIX = '',
DOCUMENT = Y.config.doc,
DOCUMENT_ELEMENT = 'documentElement',
- TRANSITION = 'transition',
+ DOCUMENT_STYLE = DOCUMENT[DOCUMENT_ELEMENT].style,
TRANSITION_CAMEL = 'transition',
TRANSITION_PROPERTY_CAMEL = 'transitionProperty',
- TRANSFORM_CAMEL = 'transform',
TRANSITION_PROPERTY,
TRANSITION_DURATION,
TRANSITION_TIMING_FUNCTION,
@@ -43,6 +42,9 @@ Transition = function() {
this.init.apply(this, arguments);
};
+// One off handling of transform-prefixing.
+Transition._TRANSFORM = 'transform';
+
Transition._toCamel = function(property) {
property = property.replace(/-([a-z])/gi, function(m0, m1) {
return m1.toUpperCase();
@@ -70,7 +72,12 @@ Transition.HIDE_TRANSITION = 'fadeOut';
Transition.useNative = false;
-if ('transition' in DOCUMENT[DOCUMENT_ELEMENT].style) {
+// Map transition properties to vendor-specific versions.
+if ('transition' in DOCUMENT_STYLE
+ && 'transitionProperty' in DOCUMENT_STYLE
+ && 'transitionDuration' in DOCUMENT_STYLE
+ && 'transitionTimingFunction' in DOCUMENT_STYLE
+ && 'transitionDelay' in DOCUMENT_STYLE) {
Transition.useNative = true;
Transition.supported = true; // TODO: remove
} else {
@@ -87,10 +94,20 @@ if ('transition' in DOCUMENT[DOCUMENT_ELEMENT].style) {
});
}
+// Map transform property to vendor-specific versions.
+// One-off required for cssText injection.
+if (typeof DOCUMENT_STYLE.transform === 'undefined') {
+ Y.Array.each(VENDORS, function(val) { // then vendor specific
+ var property = val + 'Transform';
+ if (typeof DOCUMENT_STYLE[property] !== 'undefined') {
+ Transition._TRANSFORM = property;
+ }
+ });
+}
+
if (CAMEL_VENDOR_PREFIX) {
TRANSITION_CAMEL = CAMEL_VENDOR_PREFIX + 'Transition';
TRANSITION_PROPERTY_CAMEL = CAMEL_VENDOR_PREFIX + 'TransitionProperty';
- TRANSFORM_CAMEL = CAMEL_VENDOR_PREFIX + 'Transform';
}
TRANSITION_PROPERTY = VENDOR_PREFIX + 'transition-property';
@@ -183,13 +200,13 @@ Transition.prototype = {
anim._count++; // properties per transition
// make 0 async and fire events
- dur = ((typeof config.duration != 'undefined') ? config.duration :
+ dur = ((typeof config.duration !== 'undefined') ? config.duration :
anim._duration) || 0.0001;
attrs[prop] = {
value: val,
duration: dur,
- delay: (typeof config.delay != 'undefined') ? config.delay :
+ delay: (typeof config.delay !== 'undefined') ? config.delay :
anim._delay,
easing: config.easing || anim._easing,
@@ -228,8 +245,8 @@ Transition.prototype = {
var attr,
node = this._node;
- if (config.transform && !config[TRANSFORM_CAMEL]) {
- config[TRANSFORM_CAMEL] = config.transform;
+ if (config.transform && !config[Transition._TRANSFORM]) {
+ config[Transition._TRANSFORM] = config.transform;
delete config.transform; // TODO: copy
}
@@ -290,7 +307,7 @@ Transition.prototype = {
return dur + 'ms';
},
- _runNative: function(time) {
+ _runNative: function() {
var anim = this,
node = anim._node,
uid = Y.stamp(node),
@@ -533,12 +550,26 @@ Y.Node.prototype.show = function(name, config, callback) {
return this;
};
+Y.NodeList.prototype.show = function(name, config, callback) {
+ var nodes = this._nodes,
+ i = 0,
+ node;
+
+ while ((node = nodes[i++])) {
+ Y.one(node).show(name, config, callback);
+ }
+
+ return this;
+};
+
+
+
var _wrapCallBack = function(anim, fn, callback) {
return function() {
if (fn) {
fn.call(anim);
}
- if (callback) {
+ if (callback && typeof callback === 'function') {
callback.apply(anim._node, arguments);
}
};
@@ -567,6 +598,18 @@ Y.Node.prototype.hide = function(name, config, callback) {
return this;
};
+Y.NodeList.prototype.hide = function(name, config, callback) {
+ var nodes = this._nodes,
+ i = 0,
+ node;
+
+ while ((node = nodes[i++])) {
+ Y.one(node).hide(name, config, callback);
+ }
+
+ return this;
+};
+
/**
* Animate one or more css properties to a given value. Requires the "transition" module.
* <pre>example usage:
@@ -609,14 +652,17 @@ Y.Node.prototype.toggleView = function(name, on, callback) {
this._toggles = this._toggles || [];
callback = arguments[arguments.length - 1];
- if (typeof name == 'boolean') { // no transition, just toggle
+ if (typeof name !== 'string') { // no transition, just toggle
on = name;
- name = null;
+ this._toggleView(on, callback); // call original _toggleView in Y.Node
+ return;
}
- name = name || Y.Transition.DEFAULT_TOGGLE;
+ if (typeof on === 'function') { // Ignore "on" if used for callback argument.
+ on = undefined;
+ }
- if (typeof on == 'undefined' && name in this._toggles) { // reverse current toggle
+ if (typeof on === 'undefined' && name in this._toggles) { // reverse current toggle
on = ! this._toggles[name];
}
@@ -639,7 +685,8 @@ Y.NodeList.prototype.toggleView = function(name, on, callback) {
node;
while ((node = nodes[i++])) {
- Y.one(node).toggleView(name, on, callback);
+ node = Y.one(node);
+ node.toggleView.apply(node, arguments);
}
return this;
@@ -698,6 +745,3 @@ Y.mix(Transition.toggles, {
size: ['sizeOut', 'sizeIn'],
fade: ['fadeOut', 'fadeIn']
});
-
-Transition.DEFAULT_TOGGLE = 'fade';
-
diff --git a/src/transition/js/transition-timer.js b/src/transition/js/transition-timer.js
index 3603850..d0160ce 100644
--- a/src/transition/js/transition-timer.js
+++ b/src/transition/js/transition-timer.js
@@ -80,7 +80,7 @@ Y.mix(Transition.prototype, {
if (!delay || time >= delay) {
setter(anim, name, attribute.from, attribute.to, t - delay, d - delay,
- attribute.easing, attribute.unit);
+ attribute.easing, attribute.unit);
if (done) {
delete attrs[name];
@@ -189,7 +189,7 @@ Y.mix(Y.Transition, {
DEFAULT_UNIT: 'px',
/*
- * Time in milliseconds passed to setInterval for frame processing
+ * Time in milliseconds passed to setInterval for frame processing
*
* @property intervalTime
* @default 20
@@ -269,7 +269,7 @@ Y.mix(Y.Transition, {
* @method _runFrame
* @private
* @static
- */
+ */
_runFrame: function() {
var done = true,
anim;
@@ -322,7 +322,7 @@ Y.mix(Y.Transition, {
_timer: null,
RE_UNITS: /^(-?\d*\.?\d*){1}(em|ex|px|in|cm|mm|pt|pc|%)*$/
-}, true);
+}, true);
Transition.behaviors.top = Transition.behaviors.bottom = Transition.behaviors.right = Transition.behaviors.left;
diff --git a/src/transition/meta/transition.json b/src/transition/meta/transition.json
index 86ccd1d..3d0c928 100644
--- a/src/transition/meta/transition.json
+++ b/src/transition/meta/transition.json
@@ -10,9 +10,9 @@
"transition"
],
- "condition": {
- "trigger": "transition",
- "test": "transition-test.js"
+ "condition": {
+ "trigger": "transition",
+ "test": "transition-test.js"
}
}
}
diff --git a/src/transition/tests/manual/performance/transition-benchmark.js b/src/transition/tests/manual/performance/transition-benchmark.js
new file mode 100644
index 0000000..969e975
--- /dev/null
+++ b/src/transition/tests/manual/performance/transition-benchmark.js
@@ -0,0 +1,19 @@
+YUI.add('transition-benchmark', function (Y) {
+ var suite = Y.BenchmarkSuite = new Benchmark.Suite(),
+ testNode = Y.one('#demo');
+
+ suite.add('new Y.Transition()', function() {
+ new Y.Transition(demo, {
+ width: 0,
+ height: {
+ value: 0,
+ delay: 1
+ },
+ easing: 'ease-in',
+ duration: 500,
+ iterations: 10
+ })
+ });
+
+
+}, '@VERSION@', {requires: ['transition']});
diff --git a/src/transition/tests/manual/performance/transition.html b/src/transition/tests/manual/performance/transition.html
new file mode 100644
index 0000000..d26477f
--- /dev/null
+++ b/src/transition/tests/manual/performance/transition.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Benchmarks</title>
+
+ <style>
+ #demo {
+ background: #ccc;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body class="yui3-skin-sam">
+
+<p><button id="start">Start Benchmarks</button></p>
+
+<div id="log"></div>
+<div id="demo"></div>
+<applet code="nano" archive="../../../vendor/benchmarkjs/nano.jar" style="display: none;"></applet>
+<script src="../../../common/vendor/benchmarkjs/benchmark.js"></script>
+
+<script src="../../../../build/yui/yui.js"></script>
+<script>
+var Y = YUI({
+ modules: {
+ 'transition-benchmark': {
+ fullpath: 'transition-benchmark.js',
+ requires: ['transition']
+ },
+
+ 'test-console': {
+ fullpath : '../../../common/tests/assets/test-console.js',
+ requires : ['console-filters'],
+ skinnable: true
+ },
+
+ 'skin-sam-test-console': {
+ fullpath: '../../../common/tests/assets/test-console.css',
+ type : 'css'
+ }
+ },
+
+ useBrowserConsole: false
+}).use('transition-benchmark', 'test-console', function (Y) {
+ var suite = Y.BenchmarkSuite,
+ start = Y.one('#start');
+
+ suite.on('start', function () {
+ start.set('disabled', true);
+ Y.log('Starting benchmarks.');
+ });
+
+ suite.on('cycle', function (e) {
+ Y.log(String(e.target));
+ });
+
+ suite.on('complete', function () {
+ start.set('disabled', false);
+ Y.log('Finished.');
+ });
+
+ start.on('click', function () {
+ suite.run({async:true});
+ });
+});
+</script>
+
+</body>
+</html>
diff --git a/src/transition/tests/transition.html b/src/transition/tests/transition.html
deleted file mode 100644
index e393967..0000000
--- a/src/transition/tests/transition.html
+++ /dev/null
@@ -1,925 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-<head>
-<title>Transition tests</title>
-<script type="text/javascript" src="../../../build/yui/yui.js"></script>
-<style>
-.demo {
- background: #ccc;
- border: 5px solid green;
- width: 200px;
- height: 200px;
-}
-
-.demo div {
- width: 200px;
- height: 200px;
-}
-
-#yui-log {
- background: #fff;
- position: absolute;
- top: 0;
- right: 0;
- width: 30em;
- z-index:10;
-}
-</style>
-</head>
-<body class="yui3-skin-sam">
- <h1>Transition Tests</h1>
- <div class="demo"><div></div></div>
- <div class="demo"><div></div></div>
-
- <div id="yui-log"></div>
-<script type="text/javascript">
-YUI({
- filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'raw',
- logInclude: { TestRunner: true }
-}).use('transition', 'test', 'test-console', function (Y) {
- Y.namespace('Tests');
- new Y.Test.Console({node: '#yui-log'}).render('#yui-log');
- Y.Tests.Transition = (function(){
- var suite = new Y.Test.Suite('Transition Tests');
-
- suite.add(new Y.Test.Case({
- name: 'property onend Tests',
-
- 'should run the onend for the property': function() {
-
- var node = Y.one('.demo'),
- test = this;
-
- node.transition({
- height: {
- value: 0,
- on: {
- end: function() {
- test.resume(function() {
- Y.Assert.areEqual('0px', node.getComputedStyle('height'));
- node.setStyle('height', '');
- });
- }
- }
- }
- });
-
- test.wait(1000);
- }
-
- }));
-
- suite.add(new Y.Test.Case({
- name: 'onstart Tests',
-
- 'should run the onstart prior to setting target values': function() {
- var node = Y.one('.demo'),
- test = this,
- h = node.getComputedStyle('height'),
- onstart = function() {
- node.setStyle('height', 0);
- };
-
- node.setStyle('height', h);
- node.transition({
- height: function() {
- return h;
- },
-
- on: {
- start: onstart
- }
- }, function() {
- test.resume(function() {
- Y.Assert.areEqual(h, node.getComputedStyle('height'));
- node.setStyle('height', '');
- });
- });
-
- test.wait(1000);
- }
-
- }));
-
- suite.add(new Y.Test.Case({
- name: 'onend Tests',
-
- 'should run the onend after transition completes': function() {
- var node = Y.one('.demo'),
- test = this;
- onend = function() {
- test.resume(function() {
- Y.Assert.areEqual('0px', node.getComputedStyle('height'));
- node.setStyle('height', '');
- });
- };
-
- node.transition({
- height: 0,
- on: {
- end: onend
- }
- });
-
- test.wait(1000);
- },
-
- 'should run the onend before callback': function() {
- var node = Y.one('.demo'),
- test = this,
- h = node.getComputedStyle('height'),
- onend = function() {
- test.resume(function() {
- Y.Assert.areEqual(h, node.getComputedStyle('height'));
- node.setStyle('height', h);
- test.wait(1000);
- });
- };
-
- node.setStyle('height', 0);
- node.transition({
- height: function() {
- return h;
- },
-
- on: {
- end: onend
- }
- }, function() {
- test.resume(function() {
- Y.Assert.areEqual(h, node.getComputedStyle('height'));
- node.setStyle('height', '');
- });
- });
-
- test.wait(1000);
- }
-
- }));
-
- suite.add(new Y.Test.Case({
- name: 'Show Transition Tests',
-
- 'should show the node with the default transition': function() {
- var node = Y.one('.demo'),
- test = this;
-
- node.setStyle('display', 'none');
- node.setStyle('opacity', '0');
- node.show(true);
-
- Y.later(550, null, function() {
- test.resume(function() {
- Y.Assert.areEqual(1, node.getStyle('opacity'));
- Y.Assert.areEqual('block', node.getStyle('display'));
- });
- });
- test.wait(1000);
- },
-
- 'should show the node with the default transition and fire callback': function() {
- var node = Y.one('.demo'),
- test = this;
-
- node.setStyle('display', 'none');
- node.setStyle('opacity', '0');
- node.show(true, function() {
- test.resume(function() {
- Y.Assert.areEqual(1, node.getStyle('opacity'));
- Y.Assert.areEqual('block', node.getStyle('display'));
- });
- });
- test.wait(1000);
- },
-
- 'should show the node with the named transition': function() {
- var node = Y.one('.demo'),
- test = this,
- h = node.getComputedStyle('height'),
- w = node.getComputedStyle('width');
-
- node.setStyles({
- height: 0,
- width: 0
- });
-
- node.show('sizeIn');
-
- Y.later(600, null, function() {
- test.resume(function() {
- Y.Assert.areEqual(h, node.getComputedStyle('height'));
- Y.Assert.areEqual(w, node.getComputedStyle('width'));
- });
- });
- test.wait(1000);
- },
-
- 'should show the node with the named transition using passed config': function() {
- var node = Y.one('.demo'),
- test = this,
- h = node.getComputedStyle('height'),
- w = node.getComputedStyle('width');
-
- node.setStyles({
- height: 0,
- width: 0,
- opacity: 0
- });
-
- Y.Assert.areEqual(0, node.getComputedStyle('opacity'));
-
- node.show('sizeIn', {
- duration: 0.2,
- opacity: 1
- });
-
- Y.later(250, null, function() {
- test.resume(function() {
- Y.Assert.areEqual(h, node.getComputedStyle('height'));
- Y.Assert.areEqual(w, node.getComputedStyle('width'));
- Y.Assert.areEqual(1, node.getComputedStyle('opacity'));
- });
- });
- test.wait(1000);
- },
-
- 'should show the node with the named transition and fire callback': function() {
- var node = Y.one('.demo'),
- test = this,
- h = node.getComputedStyle('height'),
- w = node.getComputedStyle('width');
-
- node.setStyles({
- height: 0,
- width: 0
- });
- node.show('sizeIn', {duration: 0.2}, function() {
- test.resume(function() {
- Y.Assert.areEqual(h, node.getComputedStyle('height'));
- Y.Assert.areEqual(w, node.getComputedStyle('width'));
- });
- });
- test.wait(1000);
- },
-
- 'should override the default duration': function() {
- var node = Y.one('.demo'),
- test = this;
-
- node.setStyle('opacity', 0);
-
- node.show({duration: 0.2}, function(e) {
- test.resume(function() {
- Y.Assert.areEqual(2, parseInt(e.elapsedTime * 10));
- });
- });
- test.wait(2000);
- }
- }));
-
- suite.add(new Y.Test.Case({
- name: 'Hide Transition Tests',
-
- 'should hide the node with the default transition': function() {
- var node = Y.one('.demo'),
- test = this;
-
- node.hide(true, function() {
- test.resume(function() {
- Y.Assert.areEqual(0, node.getStyle('opacity'));
- Y.Assert.areEqual('none', node.getStyle('display'));
- node.setStyle('display', 'block');
- node.setStyle('opacity', '1');
- });
- });
-
- Y.Assert.areEqual('block', node.getStyle('display'));
- test.wait(1000);
- }
-
- }));
-
-
- suite.add(new Y.Test.Case({
- name: 'Named Transition Tests',
-
- 'should run named effect': function() {
- var node = Y.one('.demo'),
- test = this;
-
- node.transition('fadeOut');
-
- Y.later(550, null, function(e) {
- test.resume(function() {
- Y.Assert.areEqual(0, node.getStyle('opacity'));
- });
- });
-
- test.wait(1000);
- },
-
- 'should run named effect with passed config': function() {
- var node = Y.one('.demo'),
- test = this;
-
- node.transition('fadeOut', {duration: 0.2, height: '0px'});
-
- Y.later(250, null, function(e) {
- test.resume(function() {
- Y.Assert.areEqual(0, node.getStyle('opacity'));
- Y.Assert.areEqual('0px', node.getStyle('height'));
- //node.setStyle('opacity', 1);
- });
- });
-
-
- test.wait(1000);
- },
-
- 'should run named effect and fire callback': function() {
- var node = Y.one('.demo'),
- test = this;
-
- node.transition('fadeOut', function(e) {
- test.resume(function() {
- Y.Assert.areEqual(0, node.getStyle('opacity'));
- });
- });
-
- test.wait(1000);
- },
-
- 'should override effect duration': function() {
- var node = Y.one('.demo'),
- test = this;
-
- node.transition('fadeIn', {duration: 0.25}, function(e) {
- test.resume(function() {
- Y.Assert.areEqual(2, parseInt(e.elapsedTime * 10));
- Y.Assert.areEqual(1, node.getStyle('opacity'));
- });
- });
-
- test.wait(1000);
- }
-
- }));
-
- suite.add(new Y.Test.Case({
- name: 'Multiple Transition Tests',
- setUp: function() {
- Y.one('.demo').setStyles({
- height: '200px',
- width: '200px',
- opacity: '1'
- });
- },
-
- 'all chained 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'));
- node.transition({
- height: 0
- }, function(e) {
- test.resume(function() {
- Y.Assert.areEqual('0px', node.getComputedStyle('height'));
- });
- });
- test.wait(1000);
- });
- });
-
- test.wait(1000);
- },
- 'setStyle should not transition 1': function() {
- var node = Y.one('.demo'),
- test = this;
-
- node.setStyle('height', '100px');
- Y.Assert.areEqual('100px', node.getComputedStyle('height'));
- },
-
- 'last transition should win for same property': function() {
- var node = Y.one('.demo'),
- test = this;
-
- node.transition({
- height: '100px'
- }, function(e) {
- test.resume(function() { // shouldnt fire
- Y.Assert.isNull(1);
- });
- });
-
- node.transition({
- height: 0
- }, function(e) {
- test.resume(function() { // shouldnt fire
- Y.Assert.isNull(1);
- });
- });
-
- node.transition({
- height: '100px'
- }, function(e) {
- test.resume(function() {
- Y.Assert.areEqual('100px', node.getComputedStyle('height'));
- });
- });
-
- test.wait(2000);
- },
-
- 'setStyle should not transition 2': function() {
- var node = Y.one('.demo'),
- test = this;
-
- node.setStyle('height', '100px');
- Y.Assert.areEqual('100px', node.getComputedStyle('height'));
- },
-
- 'all serial callbacks should fire': function() {
- var node = Y.one('.demo'),
- test = this;
-
- node.transition({
- duration: 2,
- width: 0
- }, function(e) {
- test.resume(function() {
- Y.Assert.areEqual('0px', node.getComputedStyle('width'));
- });
- });
-
- node.transition({
- duration: 1,
- height: 0
- }, function(e) {
- test.resume(function() {
- Y.Assert.areEqual('0px', node.getComputedStyle('height'));
- test.wait(2000);
- });
- });
-
- test.wait(2000);
- },
-
- 'setStyle should not transition 3': function() {
- var node = Y.one('.demo'),
- test = this;
-
- node.setStyle('height', '100px');
- Y.Assert.areEqual('100px', node.getComputedStyle('height'));
- },
-
- 'all serial callbacks should fire (duration)': function() {
- var node = Y.one('.demo'),
- test = this;
-
- node.transition({
- duration: 1,
- width: 0
- }, function(e) {
- test.resume(function() {
- Y.Assert.areEqual('0px', node.getComputedStyle('width'));
- test.wait(2000);
- });
- });
-
- node.transition({
- duration: 2,
- height: 0
- }, function(e) {
- test.resume(function() {
- Y.Assert.areEqual('0px', node.getComputedStyle('height'));
- });
- });
-
- test.wait(2000);
- },
-
- 'setStyle should not transition 4': function() {
- var node = Y.one('.demo'),
- test = this;
-
- node.setStyle('height', '100px');
- Y.Assert.areEqual('100px', node.getComputedStyle('height'));
- },
-
- '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(2000);
- });
-
- });
-
- node.transition({
- duration: 1,
- width: 0
- }, function(e) {
- test.resume(function() {
- Y.Assert.areEqual('0px', node.getComputedStyle('width'));
- });
- });
-
- test.wait(2000);
- },
-
- 'setStyle should not transition 5': function() {
- var node = Y.one('.demo'),
- test = this;
-
- node.setStyle('width', '100px');
- Y.Assert.areEqual('100px', node.getComputedStyle('width'));
- },
-
- 'parallel transition should shorten duration': function() {
- var node = Y.one('.demo'),
- test = this;
-
- node.transition({
- easing: 'ease-in',
- duration: 0.2,
- opacity: {
- value: 0,
- duration: 0.3
- },
- height: 0,
- width: 0
- }, function(e) {
- test.resume(function() {
- Y.Assert.areEqual(2, parseInt(e.elapsedTime * 10));
- });
- });
-
- node.transition({
- duration: 0.1,
- opacity: 0
- }, function(e) {
- test.resume(function() {
- Y.Assert.areEqual('0', node.getComputedStyle('opacity'));
- Y.Assert.areEqual(1, parseInt(e.elapsedTime * 10));
- 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: 0.15,
- height: 0
- });
-
- node2.transition({
- height: '100px',
- duration: 0.25
- }, 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 * 10));
- });
- });
-
- test.wait(2500);
- },
-
- 'nodelist should transition together': function() {
- var test = this,
- resumed = false;
-
- Y.all('.demo').transition({duration: 0.15, 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 * 10));
- });
- }
- });
- 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: 0.15,
- height: '200px',
- width: 0
- }, function(e) {
- test.resume(function() {
- Y.Assert.areEqual(1, parseInt(e.elapsedTime * 10));
- 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: 0.15,
- width: 0
- }, function(e) {
- test.resume(function() {
- Y.Assert.areEqual(1, parseInt(e.elapsedTime * 10));
- 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: 0.15,
- 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 * 10));
- 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: 0.25
- },
- height: 0,
- width: 0
- }, function(e) {
- test.resume(function() {
- Y.Assert.areEqual(10, parseInt(e.elapsedTime * 10));
-
- node.setStyle('height', '100px');
- node.setStyle('opacity', '1');
- Y.Assert.areEqual(1, node.getStyle('opacity'));
- });
- });
-
- test.wait(3000);
- },
-
- 'native transform should map to vendor prefix': function() {
- var node = Y.one('.demo'),
- test = this;
-
- node.transition({
- easing: 'ease',
- duration: 0.1,
- height: 0,
- transform: 'rotate(180deg)'
- }, function(e) {
- test.resume(function() {
- Y.Assert.areEqual(1, parseInt(e.elapsedTime * 10));
- 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: 0.1,
- height: 0
- }, function(e) {
- test.resume(function() {
- var node = Y.one('.demo');
- Y.Assert.areEqual(1, parseInt(e.elapsedTime * 10));
- Y.Assert.areEqual('0px', node.getComputedStyle('height'));
- });
- });
- node.destroy();
- test.wait(2000);
- },
-
- 'should clean up style object': function() {
-
- }
- }));
-
- suite.add(new Y.Test.Case({
- name: 'Transition Duration Tests',
-
- 'A 1ms `duration` should call the callback async': function() {
- var node = Y.one('.demo'),
- test = this,
- called = 0;
-
- node.transition({
- height : 0,
- duration: 0.001
- }, function (e) {
- test.resume(function () {
- called += 1;
-
- Y.Assert.areSame(1, called);
- });
- });
-
- Y.Assert.areSame(0, called);
-
- test.wait(1000);
- },
-
- 'A 0ms `duration` should call the callback async': function() {
- var node = Y.one('.demo'),
- test = this,
- called = 0;
-
- node.transition({
- height : 0,
- duration: 0
- }, function (e) {
- test.resume(function () {
- called += 1;
-
- Y.Assert.areSame(1, called);
- });
- });
-
- Y.Assert.areSame(0, called);
-
- test.wait(1000);
- }
-
- }));
-
- 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;
-
- })();
-
-/*
- Y.Test.Runner.subscribe(Y.Test.Runner.COMPLETE_EVENT, function(e) {
- });
-*/
-
- //add to the testrunner and run
- Y.Test.Runner.add(Y.Tests.Transition);
- Y.Test.Runner.run();
-
-});
-
-
-</script>
-</body>
-</html>
diff --git a/src/transition/tests/unit/transition.html b/src/transition/tests/unit/transition.html
new file mode 100644
index 0000000..c02d4a9
--- /dev/null
+++ b/src/transition/tests/unit/transition.html
@@ -0,0 +1,1044 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<title>Transition tests</title>
+<script type="text/javascript" src="../../../../build/yui/yui.js"></script>
+<style>
+.demo {
+ background: #ccc;
+ border: 5px solid green;
+ width: 200px;
+ height: 200px;
+}
+
+.demo div {
+ width: 200px;
+ height: 200px;
+}
+
+#yui-log {
+ background: #fff;
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 30em;
+ z-index:10;
+}
+</style>
+</head>
+<body class="yui3-skin-sam">
+ <h1>Transition Tests</h1>
+ <div class="demo"><div></div></div>
+ <div class="demo"><div></div></div>
+
+ <div id="yui-log"></div>
+<script type="text/javascript">
+YUI({
+ filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'raw',
+ logInclude: { TestRunner: true }
+}).use('transition', 'test', 'test-console', function (Y) {
+ Y.namespace('Tests');
+ new Y.Test.Console({node: '#yui-log'}).render('#yui-log');
+ Y.Tests.Transition = (function(){
+ var suite = new Y.Test.Suite('Transition Tests');
+
+ suite.add(new Y.Test.Case({
+ name: 'property onend Tests',
+
+ 'should run the onend for the property': function() {
+
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.transition({
+ height: {
+ value: 0,
+ on: {
+ end: function() {
+ test.resume(function() {
+ Y.Assert.areEqual('0px', node.getComputedStyle('height'));
+ node.setStyle('height', '');
+ });
+ }
+ }
+ }
+ });
+
+ test.wait();
+ }
+
+ }));
+
+ suite.add(new Y.Test.Case({
+ name: 'onstart Tests',
+
+ 'should run the onstart prior to setting target values': function() {
+ var node = Y.one('.demo'),
+ test = this,
+ h = node.getComputedStyle('height'),
+ onstart = function() {
+ node.setStyle('height', 0);
+ };
+
+ node.setStyle('height', h);
+ node.transition({
+ height: function() {
+ return h;
+ },
+
+ on: {
+ start: onstart
+ }
+ }, function() {
+ test.resume(function() {
+ Y.Assert.areEqual(h, node.getComputedStyle('height'));
+ node.setStyle('height', '');
+ });
+ });
+
+ test.wait();
+ }
+
+ }));
+
+ suite.add(new Y.Test.Case({
+ name: 'onend Tests',
+
+ 'should run the onend after transition completes': function() {
+ var node = Y.one('.demo'),
+ test = this;
+ onend = function() {
+ test.resume(function() {
+ Y.Assert.areEqual('0px', node.getComputedStyle('height'));
+ node.setStyle('height', '');
+ });
+ };
+
+ node.transition({
+ height: 0,
+ on: {
+ end: onend
+ }
+ });
+
+ test.wait();
+ },
+
+ 'should run the onend before callback': function() {
+ var node = Y.one('.demo'),
+ test = this,
+ h = node.getComputedStyle('height'),
+ onend = function() {
+ test.resume(function() {
+ Y.Assert.areEqual(h, node.getComputedStyle('height'));
+ node.setStyle('height', h);
+ test.wait();
+ });
+ };
+
+ node.setStyle('height', 0);
+ node.transition({
+ height: function() {
+ return h;
+ },
+
+ on: {
+ end: onend
+ }
+ }, function() {
+ test.resume(function() {
+ Y.Assert.areEqual(h, node.getComputedStyle('height'));
+ node.setStyle('height', '');
+ });
+ });
+
+ test.wait();
+ }
+
+ }));
+
+ suite.add(new Y.Test.Case({
+ name: 'Show Transition Tests',
+
+ 'should show the node with the default transition': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.setStyle('display', 'none');
+ node.setStyle('opacity', '0');
+ node.show(true);
+
+ Y.later(2000, null, function() {
+ test.resume(function() {
+ Y.Assert.areEqual(1, node.getStyle('opacity'));
+ Y.Assert.areEqual('block', node.getStyle('display'));
+ });
+ });
+ test.wait();
+ },
+
+ 'should show the node with the default transition and fire callback': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.setStyle('display', 'none');
+ node.setStyle('opacity', '0');
+ node.show(true, function() {
+ test.resume(function() {
+ Y.Assert.areEqual(1, node.getStyle('opacity'));
+ Y.Assert.areEqual('block', node.getStyle('display'));
+ });
+ });
+ test.wait();
+ },
+
+ 'should show the node with the named transition': function() {
+ var node = Y.one('.demo'),
+ test = this,
+ h = node.getComputedStyle('height'),
+ w = node.getComputedStyle('width');
+
+ node.setStyles({
+ height: 0,
+ width: 0
+ });
+
+ node.show('sizeIn');
+
+ Y.later(1000, null, function() {
+ test.resume(function() {
+ Y.Assert.areEqual(h, node.getComputedStyle('height'));
+ Y.Assert.areEqual(w, node.getComputedStyle('width'));
+ });
+ });
+ test.wait();
+ },
+
+ 'should show the node with the named transition using passed config': function() {
+ var node = Y.one('.demo'),
+ test = this,
+ h = node.getComputedStyle('height'),
+ w = node.getComputedStyle('width');
+
+ node.setStyles({
+ height: 0,
+ width: 0,
+ opacity: 0
+ });
+
+ Y.Assert.areEqual(0, node.getComputedStyle('opacity'));
+
+ node.show('sizeIn', {
+ duration: 0.2,
+ opacity: 1
+ });
+
+ Y.later(1000, null, function() {
+ test.resume(function() {
+ Y.Assert.areEqual(h, node.getComputedStyle('height'));
+ Y.Assert.areEqual(w, node.getComputedStyle('width'));
+ Y.Assert.areEqual(1, node.getComputedStyle('opacity'));
+ });
+ });
+ test.wait();
+ },
+
+ 'should show the node with the named transition and fire callback': function() {
+ var node = Y.one('.demo'),
+ test = this,
+ h = node.getComputedStyle('height'),
+ w = node.getComputedStyle('width');
+
+ node.setStyles({
+ height: 0,
+ width: 0
+ });
+ node.show('sizeIn', {duration: 0.2}, function() {
+ test.resume(function() {
+ Y.Assert.areEqual(h, node.getComputedStyle('height'));
+ Y.Assert.areEqual(w, node.getComputedStyle('width'));
+ });
+ });
+ test.wait();
+ },
+
+ 'should override the default duration': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.setStyle('opacity', 0);
+
+ node.show({duration: 0.2}, function(e) {
+ test.resume(function() {
+ Y.Assert.areEqual(2, parseInt(e.elapsedTime * 10));
+ });
+ });
+ test.wait();
+ }
+ }));
+
+ suite.add(new Y.Test.Case({
+ name: 'Hide Transition Tests',
+
+ 'should hide the node with the default transition': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.hide(true, function() {
+ test.resume(function() {
+ Y.Assert.areEqual(0, node.getStyle('opacity'));
+ Y.Assert.areEqual('none', node.getStyle('display'));
+ node.setStyle('display', 'block');
+ node.setStyle('opacity', '1');
+ });
+ });
+
+ Y.Assert.areEqual('block', node.getStyle('display'));
+ test.wait();
+ }
+
+ }));
+
+
+ suite.add(new Y.Test.Case({
+ name: 'Named Transition Tests',
+
+ 'should run named effect': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.transition('fadeOut');
+
+ Y.later(800, null, function(e) {
+ test.resume(function() {
+ Y.Assert.areEqual(0, node.getStyle('opacity'));
+ });
+ });
+
+ test.wait();
+ },
+
+ 'should run named effect with passed config': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.transition('fadeOut', {duration: 0.2, height: '0px'});
+
+ Y.later(500, null, function(e) {
+ test.resume(function() {
+ Y.Assert.areEqual(0, node.getStyle('opacity'));
+ Y.Assert.areEqual('0px', node.getStyle('height'));
+ //node.setStyle('opacity', 1);
+ });
+ });
+
+
+ test.wait();
+ },
+
+ 'should run named effect and fire callback': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.transition('fadeOut', function(e) {
+ test.resume(function() {
+ Y.Assert.areEqual(0, node.getStyle('opacity'));
+ });
+ });
+
+ test.wait();
+ },
+
+ 'should override effect duration': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.transition('fadeIn', {duration: 0.25}, function(e) {
+ test.resume(function() {
+ Y.Assert.areEqual(2, parseInt(e.elapsedTime * 10));
+ Y.Assert.areEqual(1, node.getStyle('opacity'));
+ });
+ });
+
+ test.wait();
+ }
+
+ }));
+
+ suite.add(new Y.Test.Case({
+ name: 'Multiple Transition Tests',
+ setUp: function() {
+ Y.one('.demo').setStyles({
+ height: '200px',
+ width: '200px',
+ opacity: '1'
+ });
+ },
+
+ 'all chained 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'));
+ node.transition({
+ height: 0
+ }, function(e) {
+ test.resume(function() {
+ Y.Assert.areEqual('0px', node.getComputedStyle('height'));
+ });
+ });
+ test.wait();
+ });
+ });
+
+ test.wait();
+ },
+ 'setStyle should not transition 1': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.setStyle('height', '100px');
+ Y.Assert.areEqual('100px', node.getComputedStyle('height'));
+ },
+
+ 'last transition should win for same property': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.transition({
+ height: '100px'
+ }, function(e) {
+ test.resume(function() { // shouldnt fire
+ Y.Assert.isNull(1);
+ });
+ });
+
+ node.transition({
+ height: 0
+ }, function(e) {
+ test.resume(function() { // shouldnt fire
+ Y.Assert.isNull(1);
+ });
+ });
+
+ node.transition({
+ height: '100px'
+ }, function(e) {
+ test.resume(function() {
+ Y.Assert.areEqual('100px', node.getComputedStyle('height'));
+ });
+ });
+
+ test.wait();
+ },
+
+ 'setStyle should not transition 2': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.setStyle('height', '100px');
+ Y.Assert.areEqual('100px', node.getComputedStyle('height'));
+ },
+
+ 'all serial callbacks should fire': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.transition({
+ duration: 2,
+ width: 0
+ }, function(e) {
+ test.resume(function() {
+ Y.Assert.areEqual('0px', node.getComputedStyle('width'));
+ });
+ });
+
+ node.transition({
+ duration: 1,
+ height: 0
+ }, function(e) {
+ test.resume(function() {
+ Y.Assert.areEqual('0px', node.getComputedStyle('height'));
+ test.wait();
+ });
+ });
+
+ test.wait();
+ },
+
+ 'setStyle should not transition 3': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.setStyle('height', '100px');
+ Y.Assert.areEqual('100px', node.getComputedStyle('height'));
+ },
+
+ 'all serial callbacks should fire (duration)': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.transition({
+ duration: 1,
+ width: 0
+ }, function(e) {
+ test.resume(function() {
+ Y.Assert.areEqual('0px', node.getComputedStyle('width'));
+ test.wait();
+ });
+ });
+
+ node.transition({
+ duration: 2,
+ height: 0
+ }, function(e) {
+ test.resume(function() {
+ Y.Assert.areEqual('0px', node.getComputedStyle('height'));
+ });
+ });
+
+ test.wait();
+ },
+
+ 'setStyle should not transition 4': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.setStyle('height', '100px');
+ Y.Assert.areEqual('100px', node.getComputedStyle('height'));
+ },
+
+ '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();
+ });
+
+ });
+
+ node.transition({
+ duration: 1,
+ width: 0
+ }, function(e) {
+ test.resume(function() {
+ Y.Assert.areEqual('0px', node.getComputedStyle('width'));
+ });
+ });
+
+ test.wait();
+ },
+
+ 'setStyle should not transition 5': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.setStyle('width', '100px');
+ Y.Assert.areEqual('100px', node.getComputedStyle('width'));
+ },
+
+ 'parallel transition should shorten duration': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.transition({
+ easing: 'ease-in',
+ duration: 0.2,
+ opacity: {
+ value: 0,
+ duration: 0.3
+ },
+ height: 0,
+ width: 0
+ }, function(e) {
+ test.resume(function() {
+ Y.Assert.areEqual(2, parseInt(e.elapsedTime * 10));
+ });
+ });
+
+ node.transition({
+ duration: 0.1,
+ opacity: 0
+ }, function(e) {
+ test.resume(function() {
+ Y.Assert.areEqual('0', node.getComputedStyle('opacity'));
+ Y.Assert.areEqual(1, parseInt(e.elapsedTime * 10));
+ test.wait();
+ });
+ });
+
+ test.wait();
+ },
+
+ '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: 0.15,
+ height: 0
+ });
+
+ node2.transition({
+ height: '100px',
+ duration: 0.25
+ }, 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');
+ });
+ });
+
+ test.wait();
+ }
+
+ }));
+ 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();
+ },
+
+ '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();
+ },
+
+ 'callback should fire when transitioning to current value': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.transition({
+ duration: 0.15,
+ height: '200px',
+ width: 0
+ }, function(e) {
+ test.resume(function() {
+ Y.Assert.areEqual('200px', node.getComputedStyle('height'));
+ Y.Assert.areEqual('0px', node.getComputedStyle('width'));
+ });
+ });
+
+ test.wait();
+
+ },
+
+ 'callback should fire when transitioning to current number value': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.setStyle('width', 0);
+
+ node.transition({
+ duration: 0.15,
+ width: 0
+ }, function(e) {
+ test.resume(function() {
+ Y.Assert.areEqual('0px', node.getComputedStyle('width'));
+ });
+ });
+
+ test.wait();
+
+ },
+
+ 'should end at all final values': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.transition({
+ duration: 0.15,
+ width: 0,
+ height: 0,
+ opacity: 0,
+ borderTopWidth: '1px',
+ foo: 0, // ignore non-supported
+ paddingTop: '100px'
+ }, 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'));
+ Y.Assert.areEqual('100px', node.getComputedStyle('paddingTop'));
+ Y.Assert.areEqual('1px', node.getStyle('borderTopWidth'));
+ });
+ });
+
+ test.wait();
+ },
+
+ '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: 0.25
+ },
+ height: 0,
+ width: 0
+ }, function(e) {
+ test.resume(function() {
+ Y.Assert.areEqual(10, parseInt(e.elapsedTime * 10));
+
+ node.setStyle('height', '100px');
+ node.setStyle('opacity', '1');
+ Y.Assert.areEqual(1, node.getStyle('opacity'));
+ });
+ });
+
+ test.wait();
+ },
+
+ 'native transform should map to vendor prefix': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.transition({
+ easing: 'ease',
+ duration: 0.1,
+ transform: 'rotate(180deg)'
+ }, function(e) {
+ test.resume(function() {
+ if (!(Y.UA.ie < 10)) {
+ Y.Assert.isNotUndefined(node.getComputedStyle(Y.Transition._TRANSFORM));
+ }
+ });
+ });
+
+ test.wait();
+ },
+
+ '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: 0.1,
+ height: 0
+ }, function(e) {
+ test.resume(function() {
+ var node = Y.one('.demo');
+ Y.Assert.areEqual('0px', node.getComputedStyle('height'));
+ });
+ });
+ node.destroy();
+ test.wait();
+ },
+
+ 'should clean up style object': function() {
+
+ }
+ }));
+
+ suite.add(new Y.Test.Case({
+ name: 'Transition Duration Tests',
+
+ 'A 1ms `duration` should call the callback async': function() {
+ var node = Y.one('.demo'),
+ test = this,
+ called = 0;
+
+ node.transition({
+ height : 0,
+ duration: 0.001
+ }, function (e) {
+ test.resume(function () {
+ called += 1;
+
+ Y.Assert.areSame(1, called);
+ });
+ });
+
+ Y.Assert.areSame(0, called);
+
+ test.wait();
+ },
+
+ 'A 0ms `duration` should call the callback async': function() {
+ var node = Y.one('.demo'),
+ test = this,
+ called = 0;
+
+ node.transition({
+ height : 0,
+ duration: 0
+ }, function (e) {
+ test.resume(function () {
+ called += 1;
+
+ Y.Assert.areSame(1, called);
+ });
+ });
+
+ Y.Assert.areSame(0, called);
+
+ test.wait();
+ }
+
+ }));
+
+ suite.add(new Y.Test.Case({
+ name: 'toggleView Tests',
+
+ setUp: function() {
+ Y.one('.demo').setStyles({
+ display: 'block',
+ opacity: '1'
+ });
+ },
+
+ tearDown: function() {
+ Y.one('.demo').setStyles({
+ display: 'block',
+ opacity: '1'
+ });
+ },
+
+ 'should force state with boolean first arg': function() {
+ var node = Y.one('.demo'),
+ test = this;
+
+ node.toggleView(false, function() {
+ Y.Assert.areEqual('none', node.getStyle('display'));
+ node.destroy();
+ });
+ },
+
+ 'should force state with boolean first arg for all nodes': function() {
+ var nodes = Y.all('.demo'),
+ count = 0;
+
+ nodes.toggleView(false, function() {
+ if (count < nodes.size()) {
+ count++;
+ } else {
+ Y.Assert.areEqual('none', nodes.item(0).getStyle('display'));
+ Y.Assert.areEqual('none', nodes.item(1).getStyle('display'));
+ }
+ nodes.destroy();
+ });
+
+ Y.Assert.areEqual(nodes.size(), count);
+ },
+
+ 'should toggle using the named toggle': function() {
+ var nodes = Y.all('.demo'),
+ test = this,
+ count = 0;
+
+ nodes.toggleView('fade', function() {
+ if (!count) {
+ count++;
+ test.resume(function () {
+ Y.Assert.areEqual('none', nodes.item(0).getStyle('display'));
+ Y.Assert.areEqual('none', nodes.item(1).getStyle('display'));
+ Y.Assert.areEqual('0', nodes.item(0).getStyle('opacity'));
+ Y.Assert.areEqual('0', nodes.item(1).getStyle('opacity'));
+ });
+ }
+ });
+
+ test.wait();
+ },
+
+ 'should hide using the named toggle': function() {
+ var nodes = Y.all('.demo'),
+ test = this;
+
+ nodes.toggleView('fade', false, function() {
+ Y.Assert.areEqual('block', nodes.item(0).getStyle('display'));
+ Y.Assert.areEqual('block', nodes.item(1).getStyle('display'));
+ Y.Assert.areEqual('1', nodes.item(0).getStyle('opacity'));
+ Y.Assert.areEqual('1', nodes.item(1).getStyle('opacity'));
+ nodes.destroy();
+ });
+ },
+
+ 'should show using the named toggle': function() {
+ var nodes = Y.all('.demo'),
+ test = this;
+
+ nodes.setStyles({
+ display: 'none',
+ opacity: '0'
+ });
+
+ nodes.toggleView('fade', true, function() {
+ Y.Assert.areEqual('block', nodes.item(0).getStyle('display'));
+ Y.Assert.areEqual('block', nodes.item(1).getStyle('display'));
+ Y.Assert.areEqual('1', nodes.item(0).getStyle('opacity'));
+ Y.Assert.areEqual('1', nodes.item(1).getStyle('opacity'));
+ nodes.destroy();
+ });
+ }
+ }));
+
+ suite.add(new Y.Test.Case({
+ name: 'NodeList Transitions',
+
+ setUp: function() {
+ Y.one('.demo').setStyles({
+ display: 'block',
+ opacity: '1'
+ });
+ },
+
+ 'nodelist should transition together': function() {
+ var test = this,
+ resumed = false;
+
+ Y.all('.demo').transition({duration: 0.5, 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(0, nodes.item(1).getStyle('opacity'));
+ });
+ }
+ });
+ test.wait();
+ },
+
+ 'should show the nodes with the default transition': function() {
+ var nodes = Y.all('.demo'),
+ test = this;
+
+ nodes.setStyle('display', 'none');
+ nodes.setStyle('opacity', '0');
+ nodes.show(true);
+
+ Y.later(800, null, function() {
+ test.resume(function() {
+ Y.Assert.areEqual(1, nodes.item(0).getStyle('opacity'));
+ Y.Assert.areEqual('block', nodes.item(0).getStyle('display'));
+ Y.Assert.areEqual(1, nodes.item(1).getStyle('opacity'));
+ Y.Assert.areEqual('block', nodes.item(1).getStyle('display'));
+ });
+ });
+ test.wait();
+ },
+
+ 'should hide the nodes with the default transition': function() {
+ var nodes = Y.all('.demo'),
+ test = this;
+
+ nodes.setStyle('display', 'none');
+ nodes.setStyle('opacity', '0');
+ nodes.hide(true);
+
+ Y.later(550, null, function() {
+ test.resume(function() {
+ Y.Assert.areEqual(0, nodes.item(0).getStyle('opacity'));
+ Y.Assert.areEqual('none', nodes.item(0).getStyle('display'));
+ Y.Assert.areEqual(0, nodes.item(1).getStyle('opacity'));
+ Y.Assert.areEqual('none', nodes.item(1).getStyle('display'));
+ });
+ });
+ test.wait();
+ }
+
+ }));
+ //return it
+ return suite;
+
+ })();
+
+/*
+ Y.Test.Runner.subscribe(Y.Test.Runner.COMPLETE_EVENT, function(e) {
+ });
+*/
+
+ //add to the testrunner and run
+ Y.Test.Runner.add(Y.Tests.Transition);
+ Y.Test.Runner.run();
+
+});
+
+
+</script>
+</body>
+</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment