Merge pull request #50 from nuxodin/runtimeStyle-tests

runtimeStyle fast!!!

ie11CustomProperties.js

@@ -84,6 +84,9 @@
 	if (!('innerHTML' in Element.prototype)) {
 		copyProperty('innerHTML', HTMLElement.prototype, Element.prototype);
 	}
+	if (!('runtimeStyle' in Element.prototype)) { // new
+		copyProperty('runtimeStyle', HTMLElement.prototype, Element.prototype);
+	}
 	if (!('sheet' in SVGStyleElement.prototype)) {
 		Object.defineProperty(SVGStyleElement.prototype, 'sheet', {
 			get:function(){
@@ -412,6 +415,9 @@
 		}
 		var style = getComputedStyle(el);
 		let css = '';
+
+		el.runtimeStyle.cssText = ''; // new
+
 		for (var prop in el.ieCPSelectors) {
 			var important = style['-ieVar-❗' + prop];
 			let valueWithVar = important || style['-ieVar-' + prop];
@@ -428,10 +434,11 @@
 					// beta
 					if (!important && details.allByRoot !== false) continue; // dont have to draw root-properties
 
-					//let selector = item.selector.replace(/>? \.[^ ]+/, ' ', item.selector); // todo: try to equalize specificity
-					let selector = item.selector;
-					css += selector + '.iecp-u' + el.ieCP_unique + item.pseudo + '{' + prop + ':' + value + '}\n';
-					// el.runtimeStyle[prop] = value; // todo
+					if (item.pseudo) {
+						css += item.selector + '.iecp-u' + el.ieCP_unique + item.pseudo + '{' + prop + ':' + value + '}\n';
+					} else {
+						el.runtimeStyle[prop] = value;  // new
+					}
 				}
 			}
 		}

tests/performance.html

@@ -32,7 +32,7 @@
         var html = '<div id=noVars>';
         html += '<h2>no vars</h2>';
         html += '<style>.noVars {color:green}</style>';
-        for (var i=0; i<500;i++) {
+        for (var i=0; i<1000;i++) {
             html += '<span class="noVars">x </span>';
         }
         html += '<span class="noVars last">x </span>';
@@ -55,7 +55,7 @@
         var html = '<div id=gettingRootVars>';
         html += '<h2>getting root vars</h2>';
         html += '<style>.rootGetter {color:var(--root-green)}</style>';
-        for (var i=0; i<500;i++) {
+        for (var i=0; i<1000;i++) {
             html += '<span class="rootGetter">x </span>';
         }
         html += '<span class="rootGetter last">x </span>';
@@ -78,7 +78,7 @@
         var html = '<div id=nonRoot>';
         html += '<h2>getting non-root vars</h2>';
         html += '<style>.non-root {color:var(--body-green)}</style>';
-        for (var i=0; i<500;i++) {
+        for (var i=0; i<1000;i++) {
             html += '<span class="non-root">x </span>';
         }
         html += '<span class="non-root last">x </span>';