Merge pull request mootools#2274 from arian/fix-2266-style-opacity

Fix mootools#2266 - Calling setOpacity with null does not remove the style

Source/Element/Element.Style.js

@@ -18,6 +18,15 @@ provides: Element.Style
 
 var html = document.html;
 
+//<ltIE9>
+// Check for oldIE, which does not remove styles when they're set to null
+var el = document.createElement('div');
+el.style.color = 'red';
+el.style.color = null;
+var doesNotRemoveStyles = el.style.color == 'red';
+el = null;
+//</ltIE9>
+
 Element.Properties.styles = {set: function(styles){
 	this.setStyles(styles);
 }};
@@ -28,17 +37,19 @@ var hasOpacity = (html.style.opacity != null),
 
 var setVisibility = function(element, opacity){
 	element.store('$opacity', opacity);
-	element.style.visibility = opacity > 0 ? 'visible' : 'hidden';
+	element.style.visibility = opacity > 0 || opacity == null ? 'visible' : 'hidden';
 };
 
 var setOpacity = (hasOpacity ? function(element, opacity){
 	element.style.opacity = opacity;
 } : (hasFilter ? function(element, opacity){
-	if (!element.currentStyle || !element.currentStyle.hasLayout) element.style.zoom = 1;
-	opacity = (opacity * 100).limit(0, 100).round();
-	opacity = (opacity == 100) ? '' : 'alpha(opacity=' + opacity + ')';
-	var filter = element.style.filter || element.getComputedStyle('filter') || '';
-	element.style.filter = reAlpha.test(filter) ? filter.replace(reAlpha, opacity) : filter + opacity;
+	var style = element.style;
+	if (!element.currentStyle || !element.currentStyle.hasLayout) style.zoom = 1;
+	if (opacity == null) opacity = '';
+	else opacity = 'alpha(opacity=' + (opacity * 100).limit(0, 100).round() + ')';
+	var filter = style.filter || element.getComputedStyle('filter') || '';
+	style.filter = reAlpha.test(filter) ? filter.replace(reAlpha, opacity) : filter + opacity;
+	if (!style.filter) style.removeAttribute('filter');
 } : setVisibility));
 
 var getOpacity = (hasOpacity ? function(element){
@@ -68,7 +79,8 @@ Element.implement({
 
 	setStyle: function(property, value){
 		if (property == 'opacity'){
-			setOpacity(this, parseFloat(value));
+			if (value != null) value = parseFloat(value);
+			setOpacity(this, value);
 			return this;
 		}
 		property = (property == 'float' ? floatName : property).camelCase();
@@ -82,6 +94,11 @@ Element.implement({
 			value = Math.round(value);
 		}
 		this.style[property] = value;
+		//<ltIE9>
+		if ((value == '' || value == null) && doesNotRemoveStyles && this.style.removeAttribute){
+			this.style.removeAttribute(property);
+		}
+		//</ltIE9>
 		return this;
 	},
 

Specs/1.4client/Element/Element.Style.js

@@ -0,0 +1,62 @@
+/*
+---
+name: Element Specs
+description: n/a
+requires: [Core/Element.Style]
+provides: [Element.Style.Specs]
+...
+*/
+describe('Element.Style', function(){
+
+	describe('opacity', function(){
+
+		beforeEach(function(){
+			var className = String.uniqueID();
+			var style = this.style = document.createElement('style');
+			style.type = 'text/css';
+			var definition = [
+				'.' + className + '{',
+					'opacity: 0.5;',
+					'filter: alpha(opacity=50);',
+					'color: #ff0000;',
+				'}'
+			].join('');
+
+			// fix this, see https://github.com/mootools/mootools-core/issues/2265
+			if (style.styleSheet) style.styleSheet.cssText = definition;
+			else style.set('text', definition);
+
+			document.head.appendChild(style);
+
+			this.element = new Element('div', {
+				'class': className,
+				text: 'yo'
+			}).inject(document.body);
+		});
+
+		afterEach(function(){
+			this.style.destroy();
+			this.element.destroy();
+		});
+
+		it('should get the opacity defined by the CSS', function(){
+			expect(this.element.getStyle('opacity')).toEqual(0.5);
+		});
+
+		it('should set/overwrite the opacity', function(){
+			this.element.setStyle('opacity', 1);
+			expect(this.element.getStyle('opacity')).toEqual(1);
+			this.element.setStyle('opacity', null);
+			expect(this.element.getStyle('opacity')).toEqual(0.5);
+		});
+
+		it('should remove the style by setting it to `null`', function(){
+			this.element.setStyle('color', '#FF9900');
+			expect(this.element.getStyle('color')).toEqual('#ff9900');
+			this.element.setStyle('color', null);
+			expect(this.element.getStyle('color')).toEqual('#ff0000');
+		});
+
+	});
+
+});

Specs/Configuration.js

@@ -109,6 +109,7 @@ Configuration.sets = {
 		files: [
 			'Element/Element',
 			'Element/Element.Event',
+			'Element/Element.Style',
 			'Element/Element.Delegation',
 			'Fx/Fx.Tween',
 			'Fx/Fx.Morph'