From d76556f3ad46aee3483ece2d879e26a88d321d5a Mon Sep 17 00:00:00 2001
From: Tobias Buschor <tobias.buschor@shwups.ch>
Date: Fri, 29 May 2020 10:53:10 +0200
Subject: [PATCH 1/2] runtimeStyle

performance!
---
 ie11CustomProperties.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/ie11CustomProperties.js b/ie11CustomProperties.js
index a632a44..bb73bc4 100644
--- a/ie11CustomProperties.js
+++ b/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
+					}
 				}
 			}
 		}

From 7c541eaa84be9492e32b2cdaacda4cee9d6c9ccd Mon Sep 17 00:00:00 2001
From: Tobias Buschor <tobias.buschor@shwups.ch>
Date: Tue, 9 Jun 2020 23:43:35 +0200
Subject: [PATCH 2/2] add tests

---
 tests/performance.html |  6 ++--
 tests/tests.html       | 77 ++++++++++++++++++++++++++++++++++++------
 2 files changed, 70 insertions(+), 13 deletions(-)

diff --git a/tests/performance.html b/tests/performance.html
index 4511881..23b2e45 100644
--- a/tests/performance.html
+++ b/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>';
diff --git a/tests/tests.html b/tests/tests.html
index dfe130a..8ddcc9b 100644
--- a/tests/tests.html
+++ b/tests/tests.html
@@ -14,6 +14,7 @@
 }
 body {
     --body-green:green;
+    --body-red:red;
 }
 .tests > * {
     color:#fff;
@@ -467,7 +468,7 @@
 
 
     <div id=specificity_id class=specificity_id>
-        specificity: CP will not overwrite #id
+        specificity: .CP-getter will not overwrite #id
         <div class=code>
             <pre>
                 #specificity_id {
@@ -481,7 +482,7 @@
     </div>
 
     <div class=specificity_class>
-        specificity: CP will not overwrite .class.class
+        specificity: .CP-getter will not overwrite .class.class
         <div class=code>
             <pre>
                 .specificity_class.specificity_class {
@@ -494,24 +495,80 @@
         </div>
     </div>
 
+    <div class=specificity_imortant id=specificity_imortant>
+        specificity: #CP-getter will not overwrite !important
+        <div class=code>
+            <pre>
+                .specificity_imortant {
+                   background-color:green !important;
+                }
+                #specificity_imortant {
+                    background-color:var(--red);
+                }
+            </pre>
+        </div>
+    </div>
 
+    <div class=specificity_cp_before>
+        specificity: CP-getter before not overwrites same selector after
+        <div class=code>
+            <pre>
+                .specificity_cp_before {
+                    background-color:var(--red);
+                }
+                .specificity_cp_before {
+                    background-color:green;
+                }
+            </pre>
+        </div>
+    </div>
 
 
-    <!--div id=initial style="position:relative;"> intial is not supported by ie11 ad all
-        <div class=-box style="position:absolute; top:0; left:0; bottom:0; right:0"></div>
-        <span>initial</span>
+    <div class=specificity_cp_after>
+        specificity: CP-getter after overwrites same selector before
         <div class=code>
             <pre>
-                #initial {
+                .specificity_cp_after {
+                   background-color:red;
+                }
+                .specificity_cp_after {
+                    background-color:var(--green);
+                }
+            </pre>
+        </div>
+    </div>
+
+
+    <div class=specificity_cp_before_non_root>
+        specificity: Non root CP-getter before not overwrites same selector after
+        <div class=code>
+            <pre>
+                .specificity_cp_before_non_root {
+                    background-color:var(--body-red);
+                }
+                .specificity_cp_before_non_root {
                     background-color:green;
                 }
-                #initial .-box {
-                    --red:initial;
-                    background-color:var(--red);
+            </pre>
+        </div>
+    </div>
+
+    <div class=specificity_cp_after_non_root>
+        specificity: Non-root CP-getter after overwrites same selector before
+        <div class=code>
+            <pre>
+                .specificity_cp_after_non_root {
+                    background-color:red;
+                }
+                .specificity_cp_after_non_root {
+                    background-color:var(--body-green);
                 }
             </pre>
         </div>
-    </div-->
+    </div>
+
+
+
 
 
 </div>