Merge pull request #2612 from SergioCrisostomo/2479-setHTML

enable IE8 to set html into style element
mootools · Jul 1, 2014 · 94a64bc · 94a64bc
2 parents cdd9c15 + aec3898
commit 94a64bc
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 6 deletions.
diff --git a/Source/Element/Element.js b/Source/Element/Element.js
@@ -593,6 +593,20 @@ el = null;
 /* </webkit> */
 
 /*<IE>*/
+
+/*<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>*/
+
 var input = document.createElement('input'), volatileInputValue, html5InputSupport;
 
 // #2178
@@ -1015,11 +1029,13 @@ Element.Properties.html = {
 	set: function(html){
 		if (html == null) html = '';
 		else if (typeOf(html) == 'array') html = html.join('');
-		this.innerHTML = html;
-	},
 
+		/*<ltIE9>*/
+		if (this.styleSheet && !canChangeStyleHtml) this.styleSheet.cssText = html;
+		else /*</ltIE9>*/this.innerHTML = html;
+	},
 	erase: function(){
-		this.innerHTML = '';
+		this.set('html', '');
 	}
 
 };
@@ -1067,6 +1083,10 @@ if (!supportsTableInnerHTML || !supportsTRInnerHTML || !supportsHTML5Elements){
 		translations.thead = translations.tfoot = translations.tbody;
 
 		return function(html){
+
+			/*<ltIE9>*/
+			if (this.styleSheet) return set.call(this, html);
+			/*</ltIE9>*/
 			var wrap = translations[this.get('tag')];
 			if (!wrap && !supportsHTML5Elements) wrap = [0, '', ''];
 			if (!wrap) return set.call(this, html);

diff --git a/Specs/Element/Element.js b/Specs/Element/Element.js
@@ -1170,7 +1170,7 @@ describe('Element.toQueryString', function(){
 		expect(form.toQueryString()).toEqual('');
 	});
 
-	it("should return a query string containing even empty values, multiple select may have no selected options", function() {
+	it("should return a query string containing even empty values, multiple select may have no selected options", function(){
 		var form = new Element('form',{'html':
 			'<input type="checkbox" name="input" value="" checked="checked" />' +
 			'<select name="select[]" multiple="multiple" size="5">' +
@@ -1683,7 +1683,7 @@ describe('Element.toQueryString', function(){
 		expect(form.toQueryString()).toEqual('input=checked&select%5B%5D=saab&select%5B%5D=opel&textarea=textarea-value');
 	});
 
-	it("should return a query string containing even empty values, single select must have a selected option", function() {
+	it("should return a query string containing even empty values, single select must have a selected option", function(){
 		var form = new Element('form').adopt(
 			new Element('input', {name: 'input', type: 'checkbox', checked: true, value: ''}),
 			new Element('select', {name: 'select[]'}).adopt(
@@ -1829,6 +1829,43 @@ describe('Element.set("html")', function(){
 		expect(tr.getFirst().className).toEqual('cell c');
 	});
 
+	it("should set the html of a style Element", function(){
+
+		var styleElement = document.createElement('style');
+		var def = 'body {color: red;}';
+		styleElement.setAttribute("type", "text/css");
+		var docHead = document.getElementsByTagName('head')[0];
+		docHead.appendChild(styleElement);
+		if (styleElement.styleSheet){       // IE
+			styleElement.styleSheet.cssText = def;
+		} else {                             // the world
+			var node = document.createTextNode(def);
+			styleElement.appendChild(node);
+		}
+
+		styleElement = $(styleElement),
+			innerStyleA = '* { color: #a0a}',
+			innerStyleB = '.testStyling { font: 44px/44px Courier}';
+
+		function fixString(s){
+			// because browsers return content with different case/space formatting
+			return s.toLowerCase().replace(/\t|\s/g,'');
+		}
+		function getStyles(){
+			return fixString(styleElement.get('html'));
+		}
+
+		styleElement.set('html', innerStyleA);
+		expect(getStyles()).toEqual(fixString(innerStyleA));
+
+		styleElement.erase('html');
+		expect(getStyles()).toEqual('');
+
+		styleElement.set('html', innerStyleB);
+		expect(getStyles()).toEqual(fixString(innerStyleB));
+		styleElement.destroy();
+	});
+
 });
 
 describe('Elements.empty', function(){
@@ -2498,7 +2535,7 @@ describe('new Element(expression)', function(){
 		expect(script.get('async')).toBeTruthy();
 	});
 
-	it('should allow false to be passed for checked', function() {
+	it('should allow false to be passed for checked', function(){
 		var input = new Element('input', {
 			type: 'checkbox',
 			checked: false