Merge pull request #2622 from SergioCrisostomo/fix-2265-ieStyleText

Fix setter so IE7/8 can set text of style element
mootools · Jul 4, 2014 · d1dce0f · arian · Jul 4, 2014 · ibolmo
2 parents e0a608e + dbabf06
commit d1dce0f
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 3 deletions.
diff --git a/Source/Element/Element.js b/Source/Element/Element.js
@@ -214,12 +214,33 @@ var escapeQuotes = function(html){
 };
 /*</ltIE8>*/
 
+/*<ltIE9>*/
+// #2479 - IE8 Cannot set HTML of style element
+var canChangeStyleHTML = (function(){
+    var div = document.createElement('style'),
+        flag = false;
+    try {
+        div.innerHTML = '#justTesing{margin: 0px;}';
+        flag = !!div.innerHTML;
+    } catch(e){}
+    return flag;
+})();
+/*</ltIE9>*/
+
 Document.implement({
 
 	newElement: function(tag, props){
 		if (props){
 			if (props.checked != null) props.defaultChecked = props.checked;
 			if ((props.type == 'checkbox' || props.type == 'radio') && props.value == null) props.value = 'on'; 
+			/*<ltIE9>*/ // IE needs the type to be set before changing content of style element
+			if (!canChangeStyleHTML && tag == 'style'){
+				var styleElement = document.createElement('style');
+				styleElement.setAttribute('type', 'text/css');
+				if (props.type) delete props.type;
+				return this.id(styleElement).set(props);
+			}
+			/*</ltIE9>*/
 			/*<ltIE8>*/// Fix for readonly name and type properties in IE < 8
 			if (createElementAcceptsHTML){
 				tag = '<' + tag;
@@ -531,13 +552,28 @@ properties.text = (document.createElement('div').textContent == null) ? 'innerTe
 
 Object.forEach(properties, function(real, key){
 	propertySetters[key] = function(node, value){
-		node[real] = value;
+		node[real] = value;		
 	};
 	propertyGetters[key] = function(node){
 		return node[real];
 	};
 });
 
+/*<ltIE9>*/
+propertySetters.text = (function(setter){
+	return function(node, value){
+		if (node.get('tag') == 'style') node.set('html', value);
+		else node[properties.text] = value;
+	};
+})(propertySetters.text);
+
+propertyGetters.text = (function(getter){
+	return function(node){
+		return (node.get('tag') == 'style') ? node.innerHTML : getter(node);
+	};
+})(propertyGetters.text);
+/*</ltIE9>*/
+
 // Booleans
 
 var bools = [
@@ -599,7 +635,7 @@ el = null;
 
 /*<ltIE9>*/
 // #2479 - IE8 Cannot set HTML of style element
-var canChangeStyleHtml = (function(){
+var canChangeStyleHTML = (function(){
     var div = document.createElement('style'),
         flag = false;
     try {
@@ -1034,7 +1070,7 @@ Element.Properties.html = {
 		else if (typeOf(html) == 'array') html = html.join('');
 
 		/*<ltIE9>*/
-		if (this.styleSheet && !canChangeStyleHtml) this.styleSheet.cssText = html;
+		if (this.styleSheet && !canChangeStyleHTML) this.styleSheet.cssText = html;
 		else /*</ltIE9>*/this.innerHTML = html;
 	},
 	erase: function(){

diff --git a/Specs/Element/Element.js b/Specs/Element/Element.js
@@ -1866,6 +1866,29 @@ describe('Element.set("html")', function(){
 		styleElement.destroy();
 	});
 
+	it('should set the text of a style Element', function(){
+
+		var docHead = $(document.head);
+		var styleElement = new Element('style', {type: 'text/css'}).inject(docHead);
+		var definition = [
+			'.pos-abs-left {',
+				'position: absolute;',
+				'width: 200px;',
+				'height: 200px;',
+				'left: 10%;',
+				'background: red;',
+			'}'
+		].join('');
+		styleElement.set('text', definition);
+		var returned = styleElement.get('text').toLowerCase();
+		expect(returned.indexOf('position: absolute')).not.toEqual(-1);
+		expect(returned.indexOf('width: 200px')).not.toEqual(-1);
+		expect(returned.indexOf('height: 200px')).not.toEqual(-1);
+		expect(returned.indexOf('left: 10%')).not.toEqual(-1);
+		expect(returned.indexOf('background: red')).not.toEqual(-1);
+		styleElement.destroy();
+	});
+
 });
 
 describe('Elements.empty', function(){