Copy CSS properties individual with IE

niklasvh · Aug 6, 2017 · 68900c3 · 68900c3
1 parent 018ed76
commit 68900c3
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/src/Input.js b/src/Input.js
@@ -11,6 +11,7 @@ import Color from './Color';
 import Length from './Length';
 import {Bounds} from './Bounds';
 import {TextBounds} from './TextBounds';
+import {copyCSSStyles} from './Util';
 
 export const INPUT_COLOR = new Color([42, 42, 42]);
 const INPUT_BORDER_COLOR = new Color([165, 165, 165]);
@@ -108,7 +109,7 @@ const inlineFormElement = (value: string, node: HTMLElement, container: NodeCont
     const body = node.ownerDocument.body;
     if (value.length > 0 && body) {
         const wrapper = node.ownerDocument.createElement('html2canvaswrapper');
-        wrapper.style = node.ownerDocument.defaultView.getComputedStyle(node, null).cssText;
+        copyCSSStyles(node.ownerDocument.defaultView.getComputedStyle(node, null), wrapper);
         wrapper.style.position = 'fixed';
         wrapper.style.left = `${container.bounds.left}px`;
         wrapper.style.top = `${container.bounds.top}px`;

diff --git a/src/NodeParser.js b/src/NodeParser.js
@@ -6,21 +6,21 @@ import StackingContext from './StackingContext';
 import NodeContainer from './NodeContainer';
 import TextContainer from './TextContainer';
 import {inlineInputElement, inlineTextAreaElement, inlineSelectElement} from './Input';
+import {copyCSSStyles} from './Util';
 
 export const NodeParser = (
     node: HTMLElement,
     imageLoader: ImageLoader,
     logger: Logger
 ): StackingContext => {
-    const container = new NodeContainer(node, null, imageLoader);
-    const stack = new StackingContext(container, null, true);
-
-    createPseudoHideStyles(node.ownerDocument);
-
     if (__DEV__) {
         logger.log(`Starting node parsing`);
     }
 
+    const container = new NodeContainer(node, null, imageLoader);
+    const stack = new StackingContext(container, null, true);
+
+    createPseudoHideStyles(node.ownerDocument);
     parseNodeTree(node, container, stack, imageLoader);
 
     if (__DEV__) {
@@ -127,15 +127,7 @@ const inlinePseudoElement = (node: HTMLElement, pseudoElt: ':before' | ':after')
         anonymousReplacedElement.textContent = content;
     }
 
-    if (style.cssText) {
-        anonymousReplacedElement.style = style.cssText;
-    } else {
-        // Edge does not provide value for cssText
-        for (let i = style.length - 1; i >= 0; i--) {
-            const property = style.item(i);
-            anonymousReplacedElement.style.setProperty(property, style.getPropertyValue(property));
-        }
-    }
+    copyCSSStyles(style, anonymousReplacedElement);
 
     anonymousReplacedElement.className = `${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE} ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`;
     node.className +=

diff --git a/src/Util.js b/src/Util.js
@@ -2,3 +2,15 @@
 'use strict';
 
 export const contains = (bit: number, value: number): boolean => (bit & value) !== 0;
+
+export const copyCSSStyles = (style: CSSStyleDeclaration, target: HTMLElement): void => {
+    if (style.cssText) {
+        target.style = style.cssText;
+    } else {
+        // Edge does not provide value for cssText
+        for (let i = style.length - 1; i >= 0; i--) {
+            const property = style.item(i);
+            target.style.setProperty(property, style.getPropertyValue(property));
+        }
+    }
+};