Copy CSS properties individual with IE

This commit is contained in:
Niklas von Hertzen 2017-08-06 17:37:10 +08:00
parent 018ed765ad
commit 68900c3087
3 changed files with 20 additions and 15 deletions

View File

@ -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`;

View File

@ -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 +=

View File

@ -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));
}
}
};