Permalink
Browse files

Use the specific vendor prefix of the rendering engine when setting c…

…ss transition.

R=chrishenry
DELTA=75 (16 added, 40 deleted, 19 changed)


Revision created by MOE tool push_codebase.
MOE_MIGRATION=6261


git-svn-id: http://closure-library.googlecode.com/svn/trunk@2508 0b95b8e8-c90f-11de-9d4f-f947ee5921c8
  • Loading branch information...
1 parent d83581d commit efe164ef91c545f8dc00d729034a6cbde4ff7b80 chrisq@google.com committed Feb 5, 2013
Showing with 33 additions and 59 deletions.
  1. +1 −1 closure/goog/deps.js
  2. +10 −14 closure/goog/style/transition.js
  3. +22 −44 closure/goog/style/transition_test.html
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -22,6 +22,8 @@ goog.provide('goog.style.transition.Css3Property');
goog.require('goog.array');
goog.require('goog.asserts');
+goog.require('goog.dom.vendor');
+goog.require('goog.style');
goog.require('goog.userAgent');
@@ -96,25 +98,23 @@ goog.style.transition.isSupported = function() {
goog.style.transition.css3TransitionSupported_ =
goog.userAgent.isVersion('10.0');
} else {
- // We create a test element with style=-webkit-transition, etc.
+ // We create a test element with style=-vendor-transition
// We then detect whether those style properties are recognized and
// available from js.
var el = document.createElement('div');
- el.innerHTML = '<div style="-webkit-transition:opacity 1s linear;' +
- '-moz-transition:opacity 1s linear;-o-transition:opacity 1s linear;' +
- 'transition:opacity 1s linear">';
+ var transition = 'transition:opacity 1s linear;';
+ var vendorPrefix = goog.dom.vendor.getVendorPrefix();
+ var vendorTransition =
+ vendorPrefix ? vendorPrefix + '-' + transition : '';
+ el.innerHTML = '<div style="' + vendorTransition + transition + '">';
var testElement = /** @type {Element} */ (el.firstChild);
goog.asserts.assert(testElement.nodeType == Node.ELEMENT_NODE);
goog.style.transition.css3TransitionSupported_ =
- goog.isDef(testElement.style.transition) ||
- goog.isDef(testElement.style.WebkitTransition) ||
- goog.isDef(testElement.style.MozTransition) ||
- goog.isDef(testElement.style.OTransition);
+ goog.style.getStyle(testElement, 'transition') != '';
}
}
-
return goog.style.transition.css3TransitionSupported_;
};
@@ -134,9 +134,5 @@ goog.style.transition.css3TransitionSupported_;
* @private
*/
goog.style.transition.setPropertyValue_ = function(element, transitionValue) {
- element.style.WebkitTransition = transitionValue;
- element.style.MozTransition = transitionValue;
- element.style.MSTransition = transitionValue;
- element.style.OTransition = transitionValue;
- element.style.transition = transitionValue;
+ goog.style.setStyle(element, 'transition', transitionValue);
};
@@ -13,6 +13,7 @@
<title>Closure Unit Tests - goog.style.transition</title>
<script src="../base.js"></script>
<script>
+ goog.require('goog.style');
goog.require('goog.style.transition');
goog.require('goog.testing.jsunit');
goog.require('goog.userAgent');
@@ -29,6 +30,10 @@
element = {'style': {}};
}
+function getTransitionStyle(element) {
+ return element.style['transition'] || goog.style.getStyle(element, 'transition');
+};
+
function testSetWithNoProperty() {
try {
@@ -42,18 +47,14 @@
function testSetWithString() {
goog.style.transition.set(element, 'opacity 1s ease-in 0.125s');
- assertEquals('opacity 1s ease-in 0.125s', element.style.WebkitTransition);
- assertEquals('opacity 1s ease-in 0.125s', element.style.MozTransition);
- assertEquals('opacity 1s ease-in 0.125s', element.style.OTransition);
+ assertEquals('opacity 1s ease-in 0.125s', getTransitionStyle(element));
}
function testSetWithSingleProperty() {
goog.style.transition.set(element,
{property: 'opacity', duration: 1, timing: 'ease-in', delay: 0.125});
- assertEquals('opacity 1s ease-in 0.125s', element.style.WebkitTransition);
- assertEquals('opacity 1s ease-in 0.125s', element.style.MozTransition);
- assertEquals('opacity 1s ease-in 0.125s', element.style.OTransition);
+ assertEquals('opacity 1s ease-in 0.125s', getTransitionStyle(element));
}
@@ -63,11 +64,7 @@
'height 0.5s linear 1s'
]);
assertEquals('width 1s ease-in,height 0.5s linear 1s',
- element.style.WebkitTransition);
- assertEquals('width 1s ease-in,height 0.5s linear 1s',
- element.style.MozTransition);
- assertEquals('width 1s ease-in,height 0.5s linear 1s',
- element.style.OTransition);
+ getTransitionStyle(element));
}
@@ -77,46 +74,27 @@
{property: 'height', duration: 0.5, timing: 'linear', delay: 1}
]);
assertEquals('width 1s ease-in 0s,height 0.5s linear 1s',
- element.style.WebkitTransition);
- assertEquals('width 1s ease-in 0s,height 0.5s linear 1s',
- element.style.MozTransition);
- assertEquals('width 1s ease-in 0s,height 0.5s linear 1s',
- element.style.OTransition);
-}
-
-
-function testRemoveAllForWebkit() {
- element.style.WebkitTransition = 'opacity 1s ease-in';
- goog.style.transition.removeAll(element);
- assertEquals('', element.style.WebkitTransition);
-}
-
-
-function testRemoveAllForGecko() {
- element.style.MozTransition = 'opacity 1s ease-in';
- goog.style.transition.removeAll(element);
- assertEquals('', element.style.MozTransition);
+ getTransitionStyle(element));
}
-function testRemoveAllForIE() {
- element.style.MSTransition = 'opacity 1s ease-in';
+function testRemoveAll() {
+ goog.style.setStyle(element, 'transition', 'opacity 1s ease-in');
goog.style.transition.removeAll(element);
- assertEquals('', element.style.MSTransition);
+ assertEquals('', getTransitionStyle(element));
}
-function testRemoveAllForOpera() {
- element.style.OTransition = 'opacity 1s ease-in';
- goog.style.transition.removeAll(element);
- assertEquals('', element.style.OTransition);
-}
-
+function testAddAndRemoveOnRealElement() {
+ if (!goog.style.transition.isSupported()) {
+ return;
+ }
-function testRemoveAllForUnprefixed() {
- element.style.transition = 'opacity 1s ease-in';
- goog.style.transition.removeAll(element);
- assertEquals('', element.style.transition);
+ var div = document.getElementById('test');
+ goog.style.transition.set(div, 'opacity 1s ease-in 0.125s');
+ assertEquals('opacity 1s ease-in 0.125s', getTransitionStyle(div));
+ goog.style.transition.removeAll(div);
+ assertEquals('', getTransitionStyle(div));
}
@@ -141,6 +119,6 @@
}
</script>
-
+<div id=test></div>
</body>
</html>

0 comments on commit efe164e

Please sign in to comment.