Typescript conversion (#1828)

* initial typescript conversion * test: update overflow+transform ref test * fix: correctly render pseudo element content * fix: testrunner build * fix: karma test urls * test: update underline tests with <u> elements * test: update to es6-promise polyfill * test: remove watch from server * test: remove flow * format: update prettier for typescript * test: update eslint to use typescript parser * test: update linear gradient reftest * test: update test runner * test: update testrunner promise polyfill * fix: handle display: -webkit-flex correctly (fix #1817) * fix: correctly render gradients with clip & repeat (fix #1773) * fix: webkit-gradient function support * fix: implement radial gradients * fix: text-decoration rendering * fix: missing scroll positions for elements * ci: fix ios 11 tests * fix: ie logging * ci: improve device availability logging * fix: lint errors * ci: update to ios 12 * fix: check for console availability * ci: fix build dependency * test: update text reftests * fix: window reference for unit tests * feat: add hsl/hsla color support * fix: render options * fix: CSSKeyframesRule cssText Permission Denied on Internet Explorer 11 (#1830) * fix: option lint * fix: list type rendering * test: fix platform import * fix: ie css parsing for numbers * ci: add minified build * fix: form element rendering * fix: iframe rendering * fix: re-introduce experimental foreignobject renderer * fix: text-shadow rendering * feat: improve logging * fix: unit test logging * fix: cleanup resources * test: update overflow scrolling to work with ie * build: update build to include typings * fix: do not parse select element children * test: fix onclone test to work with older IEs * test: reduce reftest canvas sizes * test: remove dynamic setUp from list tests * test: update linear-gradient tests * build: remove old source files * build: update docs dependencies * build: fix typescript definition path * ci: include test.js on docs website
2023-08-10 21:13:10 +03:00 · 2019-05-25 15:54:41 -07:00
parent 20a797cbeb
commit 522a443055
221 changed files with 13668 additions and 23699 deletions
--- a/src/dom/document-cloner.ts
+++ b/src/dom/document-cloner.ts
@@ -0,0 +1,538 @@
+import {Bounds} from '../css/layout/bounds';
+import {
+    isBodyElement,
+    isCanvasElement,
+    isElementNode,
+    isHTMLElementNode,
+    isIFrameElement,
+    isScriptElement,
+    isSelectElement,
+    isStyleElement,
+    isTextareaElement,
+    isTextNode
+} from './node-parser';
+import {Logger} from '../core/logger';
+import {isIdentToken, nonFunctionArgSeperator} from '../css/syntax/parser';
+import {TokenType} from '../css/syntax/tokenizer';
+import {CounterState, createCounterText} from '../css/types/functions/counter';
+import {LIST_STYLE_TYPE, listStyleType} from '../css/property-descriptors/list-style-type';
+import {CSSParsedCounterDeclaration, CSSParsedPseudoDeclaration} from '../css/index';
+import {getQuote} from '../css/property-descriptors/quotes';
+
+export interface CloneOptions {
+    id: string;
+    ignoreElements?: (element: Element) => boolean;
+    onclone?: (document: Document) => void;
+}
+
+export type CloneConfigurations = CloneOptions & {
+    inlineImages: boolean;
+    copyStyles: boolean;
+};
+
+const IGNORE_ATTRIBUTE = 'data-html2canvas-ignore';
+
+export class DocumentCloner {
+    private readonly scrolledElements: [Element, number, number][];
+    private readonly options: CloneConfigurations;
+    private readonly referenceElement: HTMLElement;
+    clonedReferenceElement?: HTMLElement;
+    private readonly documentElement: HTMLElement;
+    private readonly counters: CounterState;
+    private quoteDepth: number;
+
+    constructor(element: HTMLElement, options: CloneConfigurations) {
+        this.options = options;
+        this.scrolledElements = [];
+        this.referenceElement = element;
+        this.counters = new CounterState();
+        this.quoteDepth = 0;
+        if (!element.ownerDocument) {
+            throw new Error('Cloned element does not have an owner document');
+        }
+
+        this.documentElement = this.cloneNode(element.ownerDocument.documentElement) as HTMLElement;
+    }
+
+    toIFrame(ownerDocument: Document, windowSize: Bounds): Promise<HTMLIFrameElement> {
+        const iframe: HTMLIFrameElement = createIFrameContainer(ownerDocument, windowSize);
+
+        if (!iframe.contentWindow) {
+            return Promise.reject(`Unable to find iframe window`);
+        }
+
+        const scrollX = (ownerDocument.defaultView as Window).pageXOffset;
+        const scrollY = (ownerDocument.defaultView as Window).pageYOffset;
+
+        const cloneWindow = iframe.contentWindow;
+        const documentClone: Document = cloneWindow.document;
+
+        /* Chrome doesn't detect relative background-images assigned in inline <style> sheets when fetched through getComputedStyle
+         if window url is about:blank, we can assign the url to current by writing onto the document
+         */
+
+        const iframeLoad = iframeLoader(iframe).then(() => {
+            this.scrolledElements.forEach(restoreNodeScroll);
+            if (cloneWindow) {
+                cloneWindow.scrollTo(windowSize.left, windowSize.top);
+                if (
+                    /(iPad|iPhone|iPod)/g.test(navigator.userAgent) &&
+                    (cloneWindow.scrollY !== windowSize.top || cloneWindow.scrollX !== windowSize.left)
+                ) {
+                    documentClone.documentElement.style.top = -windowSize.top + 'px';
+                    documentClone.documentElement.style.left = -windowSize.left + 'px';
+                    documentClone.documentElement.style.position = 'absolute';
+                }
+            }
+
+            const onclone = this.options.onclone;
+
+            if (typeof this.clonedReferenceElement === 'undefined') {
+                return Promise.reject(`Error finding the ${this.referenceElement.nodeName} in the cloned document`);
+            }
+
+            if (typeof onclone === 'function') {
+                return Promise.resolve()
+                    .then(() => onclone(documentClone))
+                    .then(() => iframe);
+            }
+
+            return iframe;
+        });
+
+        documentClone.open();
+        documentClone.write(`${serializeDoctype(document.doctype)}<html></html>`);
+        // Chrome scrolls the parent document for some reason after the write to the cloned window???
+        restoreOwnerScroll(this.referenceElement.ownerDocument, scrollX, scrollY);
+        documentClone.replaceChild(documentClone.adoptNode(this.documentElement), documentClone.documentElement);
+        documentClone.close();
+
+        return iframeLoad;
+    }
+
+    createElementClone(node: HTMLElement): HTMLElement {
+        if (isCanvasElement(node)) {
+            return this.createCanvasClone(node);
+        }
+        /*
+        if (isIFrameElement(node)) {
+            return this.createIFrameClone(node);
+        }
+*/
+        if (isStyleElement(node)) {
+            return this.createStyleClone(node);
+        }
+
+        return node.cloneNode(false) as HTMLElement;
+    }
+
+    createStyleClone(node: HTMLStyleElement): HTMLStyleElement {
+        try {
+            const sheet = node.sheet as CSSStyleSheet | undefined;
+            if (sheet && sheet.cssRules) {
+                const css: string = [].slice.call(sheet.cssRules, 0).reduce((css: string, rule: CSSRule) => {
+                    if (rule && typeof rule.cssText === 'string') {
+                        return css + rule.cssText;
+                    }
+                    return css;
+                }, '');
+                const style = node.cloneNode(false) as HTMLStyleElement;
+                style.textContent = css;
+                return style;
+            }
+        } catch (e) {
+            // accessing node.sheet.cssRules throws a DOMException
+            Logger.getInstance(this.options.id).error('Unable to access cssRules property', e);
+            if (e.name !== 'SecurityError') {
+                throw e;
+            }
+        }
+        return node.cloneNode(false) as HTMLStyleElement;
+    }
+
+    createCanvasClone(canvas: HTMLCanvasElement): HTMLImageElement | HTMLCanvasElement {
+        if (this.options.inlineImages && canvas.ownerDocument) {
+            const img = canvas.ownerDocument.createElement('img');
+            try {
+                img.src = canvas.toDataURL();
+                return img;
+            } catch (e) {
+                Logger.getInstance(this.options.id).info(`Unable to clone canvas contents, canvas is tainted`);
+            }
+        }
+
+        const clonedCanvas = canvas.cloneNode(false) as HTMLCanvasElement;
+
+        try {
+            clonedCanvas.width = canvas.width;
+            clonedCanvas.height = canvas.height;
+            const ctx = canvas.getContext('2d');
+            const clonedCtx = clonedCanvas.getContext('2d');
+            if (clonedCtx) {
+                if (ctx) {
+                    clonedCtx.putImageData(ctx.getImageData(0, 0, canvas.width, canvas.height), 0, 0);
+                } else {
+                    clonedCtx.drawImage(canvas, 0, 0);
+                }
+            }
+            return clonedCanvas;
+        } catch (e) {}
+
+        return clonedCanvas;
+    }
+    /*
+    createIFrameClone(iframe: HTMLIFrameElement) {
+        const tempIframe = <HTMLIFrameElement>iframe.cloneNode(false);
+        const iframeKey = generateIframeKey();
+        tempIframe.setAttribute('data-html2canvas-internal-iframe-key', iframeKey);
+
+        const {width, height} = parseBounds(iframe);
+
+        this.resourceLoader.cache[iframeKey] = getIframeDocumentElement(iframe, this.options)
+            .then(documentElement => {
+                return this.renderer(
+                    documentElement,
+                    {
+                        allowTaint: this.options.allowTaint,
+                        backgroundColor: '#ffffff',
+                        canvas: null,
+                        imageTimeout: this.options.imageTimeout,
+                        logging: this.options.logging,
+                        proxy: this.options.proxy,
+                        removeContainer: this.options.removeContainer,
+                        scale: this.options.scale,
+                        foreignObjectRendering: this.options.foreignObjectRendering,
+                        useCORS: this.options.useCORS,
+                        target: new CanvasRenderer(),
+                        width,
+                        height,
+                        x: 0,
+                        y: 0,
+                        windowWidth: documentElement.ownerDocument.defaultView.innerWidth,
+                        windowHeight: documentElement.ownerDocument.defaultView.innerHeight,
+                        scrollX: documentElement.ownerDocument.defaultView.pageXOffset,
+                        scrollY: documentElement.ownerDocument.defaultView.pageYOffset
+                    },
+                );
+            })
+            .then(
+                (canvas: HTMLCanvasElement) =>
+                    new Promise((resolve, reject) => {
+                        const iframeCanvas = document.createElement('img');
+                        iframeCanvas.onload = () => resolve(canvas);
+                        iframeCanvas.onerror = (event) => {
+                            // Empty iframes may result in empty "data:," URLs, which are invalid from the <img>'s point of view
+                            // and instead of `onload` cause `onerror` and unhandled rejection warnings
+                            // https://github.com/niklasvh/html2canvas/issues/1502
+                            iframeCanvas.src == 'data:,' ? resolve(canvas) : reject(event);
+                        };
+                        iframeCanvas.src = canvas.toDataURL();
+                        if (tempIframe.parentNode && iframe.ownerDocument && iframe.ownerDocument.defaultView) {
+                            tempIframe.parentNode.replaceChild(
+                                copyCSSStyles(
+                                    iframe.ownerDocument.defaultView.getComputedStyle(iframe),
+                                    iframeCanvas
+                                ),
+                                tempIframe
+                            );
+                        }
+                    })
+            );
+        return tempIframe;
+    }
+*/
+    cloneNode(node: Node): Node {
+        if (isTextNode(node)) {
+            return document.createTextNode(node.data);
+        }
+
+        if (!node.ownerDocument) {
+            return node.cloneNode(false);
+        }
+
+        const window = node.ownerDocument.defaultView;
+
+        if (isHTMLElementNode(node) && window) {
+            const clone = this.createElementClone(node);
+
+            const style = window.getComputedStyle(node);
+            const styleBefore = window.getComputedStyle(node, ':before');
+            const styleAfter = window.getComputedStyle(node, ':after');
+
+            if (this.referenceElement === node) {
+                this.clonedReferenceElement = clone;
+            }
+            if (isBodyElement(clone)) {
+                createPseudoHideStyles(clone);
+            }
+
+            const counters = this.counters.parse(new CSSParsedCounterDeclaration(style));
+            const before = this.resolvePseudoContent(node, clone, styleBefore, PseudoElementType.BEFORE);
+
+            for (let child = node.firstChild; child; child = child.nextSibling) {
+                if (
+                    !isElementNode(child) ||
+                    (!isScriptElement(child) &&
+                        !child.hasAttribute(IGNORE_ATTRIBUTE) &&
+                        (typeof this.options.ignoreElements !== 'function' || !this.options.ignoreElements(child)))
+                ) {
+                    if (!this.options.copyStyles || !isElementNode(child) || !isStyleElement(child)) {
+                        clone.appendChild(this.cloneNode(child));
+                    }
+                }
+            }
+
+            if (before) {
+                clone.insertBefore(before, clone.firstChild);
+            }
+
+            const after = this.resolvePseudoContent(node, clone, styleAfter, PseudoElementType.AFTER);
+            if (after) {
+                clone.appendChild(after);
+            }
+
+            this.counters.pop(counters);
+
+            if (style && this.options.copyStyles && !isIFrameElement(node)) {
+                copyCSSStyles(style, clone);
+            }
+
+            //this.inlineAllImages(clone);
+
+            if (node.scrollTop !== 0 || node.scrollLeft !== 0) {
+                this.scrolledElements.push([clone, node.scrollLeft, node.scrollTop]);
+            }
+
+            if (
+                (isTextareaElement(node) || isSelectElement(node)) &&
+                (isTextareaElement(clone) || isSelectElement(clone))
+            ) {
+                clone.value = node.value;
+            }
+
+            return clone;
+        }
+
+        return node.cloneNode(false);
+    }
+
+    resolvePseudoContent(
+        node: Element,
+        clone: Element,
+        style: CSSStyleDeclaration,
+        pseudoElt: PseudoElementType
+    ): HTMLElement | void {
+        if (!style) {
+            return;
+        }
+
+        const value = style.content;
+        const document = clone.ownerDocument;
+        if (!document || !value || value === 'none' || value === '-moz-alt-content' || style.display === 'none') {
+            return;
+        }
+
+        this.counters.parse(new CSSParsedCounterDeclaration(style));
+        const declaration = new CSSParsedPseudoDeclaration(style);
+
+        const anonymousReplacedElement = document.createElement('html2canvaspseudoelement');
+        copyCSSStyles(style, anonymousReplacedElement);
+
+        declaration.content.forEach(token => {
+            if (token.type === TokenType.STRING_TOKEN) {
+                anonymousReplacedElement.appendChild(document.createTextNode(token.value));
+            } else if (token.type === TokenType.URL_TOKEN) {
+                const img = document.createElement('img');
+                img.src = token.value;
+                img.style.opacity = '1';
+                anonymousReplacedElement.appendChild(img);
+            } else if (token.type === TokenType.FUNCTION) {
+                if (token.name === 'attr') {
+                    const attr = token.values.filter(isIdentToken);
+                    if (attr.length) {
+                        anonymousReplacedElement.appendChild(
+                            document.createTextNode(node.getAttribute(attr[0].value) || '')
+                        );
+                    }
+                } else if (token.name === 'counter') {
+                    const [counter, counterStyle] = token.values.filter(nonFunctionArgSeperator);
+                    if (counter && isIdentToken(counter)) {
+                        const counterState = this.counters.getCounterValue(counter.value);
+                        const counterType =
+                            counterStyle && isIdentToken(counterStyle)
+                                ? listStyleType.parse(counterStyle.value)
+                                : LIST_STYLE_TYPE.DECIMAL;
+
+                        anonymousReplacedElement.appendChild(
+                            document.createTextNode(createCounterText(counterState, counterType, false))
+                        );
+                    }
+                } else if (token.name === 'counters') {
+                    const [counter, delim, counterStyle] = token.values.filter(nonFunctionArgSeperator);
+                    if (counter && isIdentToken(counter)) {
+                        const counterStates = this.counters.getCounterValues(counter.value);
+                        const counterType =
+                            counterStyle && isIdentToken(counterStyle)
+                                ? listStyleType.parse(counterStyle.value)
+                                : LIST_STYLE_TYPE.DECIMAL;
+                        const separator = delim && delim.type === TokenType.STRING_TOKEN ? delim.value : '';
+                        const text = counterStates
+                            .map(value => createCounterText(value, counterType, false))
+                            .join(separator);
+
+                        anonymousReplacedElement.appendChild(document.createTextNode(text));
+                    }
+                } else {
+                    //   console.log('FUNCTION_TOKEN', token);
+                }
+            } else if (token.type === TokenType.IDENT_TOKEN) {
+                switch (token.value) {
+                    case 'open-quote':
+                        anonymousReplacedElement.appendChild(
+                            document.createTextNode(getQuote(declaration.quotes, this.quoteDepth++, true))
+                        );
+                        break;
+                    case 'close-quote':
+                        anonymousReplacedElement.appendChild(
+                            document.createTextNode(getQuote(declaration.quotes, --this.quoteDepth, false))
+                        );
+                        break;
+                    default:
+                    //    console.log('ident', token, declaration);
+                }
+            }
+        });
+
+        anonymousReplacedElement.className = `${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE} ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`;
+        clone.className +=
+            pseudoElt === PseudoElementType.BEFORE
+                ? ` ${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}`
+                : ` ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`;
+        return anonymousReplacedElement;
+    }
+}
+
+enum PseudoElementType {
+    BEFORE,
+    AFTER
+}
+
+const createIFrameContainer = (ownerDocument: Document, bounds: Bounds): HTMLIFrameElement => {
+    const cloneIframeContainer = ownerDocument.createElement('iframe');
+
+    cloneIframeContainer.className = 'html2canvas-container';
+    cloneIframeContainer.style.visibility = 'hidden';
+    cloneIframeContainer.style.position = 'fixed';
+    cloneIframeContainer.style.left = '-10000px';
+    cloneIframeContainer.style.top = '0px';
+    cloneIframeContainer.style.border = '0';
+    cloneIframeContainer.width = bounds.width.toString();
+    cloneIframeContainer.height = bounds.height.toString();
+    cloneIframeContainer.scrolling = 'no'; // ios won't scroll without it
+    cloneIframeContainer.setAttribute(IGNORE_ATTRIBUTE, 'true');
+    ownerDocument.body.appendChild(cloneIframeContainer);
+
+    return cloneIframeContainer;
+};
+
+const iframeLoader = (iframe: HTMLIFrameElement): Promise<HTMLIFrameElement> => {
+    return new Promise((resolve, reject) => {
+        const cloneWindow = iframe.contentWindow;
+
+        if (!cloneWindow) {
+            return reject(`No window assigned for iframe`);
+        }
+
+        const documentClone = cloneWindow.document;
+
+        cloneWindow.onload = iframe.onload = documentClone.onreadystatechange = () => {
+            cloneWindow.onload = iframe.onload = documentClone.onreadystatechange = null;
+            const interval = setInterval(() => {
+                if (documentClone.body.childNodes.length > 0 && documentClone.readyState === 'complete') {
+                    clearInterval(interval);
+                    resolve(iframe);
+                }
+            }, 50);
+        };
+    });
+};
+
+export const copyCSSStyles = (style: CSSStyleDeclaration, target: HTMLElement): HTMLElement => {
+    // Edge does not provide value for cssText
+    for (let i = style.length - 1; i >= 0; i--) {
+        const property = style.item(i);
+        // Safari shows pseudoelements if content is set
+        if (property !== 'content') {
+            target.style.setProperty(property, style.getPropertyValue(property));
+        }
+    }
+    return target;
+};
+
+const serializeDoctype = (doctype?: DocumentType | null): string => {
+    let str = '';
+    if (doctype) {
+        str += '<!DOCTYPE ';
+        if (doctype.name) {
+            str += doctype.name;
+        }
+
+        if (doctype.internalSubset) {
+            str += doctype.internalSubset;
+        }
+
+        if (doctype.publicId) {
+            str += `"${doctype.publicId}"`;
+        }
+
+        if (doctype.systemId) {
+            str += `"${doctype.systemId}"`;
+        }
+
+        str += '>';
+    }
+
+    return str;
+};
+
+const restoreOwnerScroll = (ownerDocument: Document | null, x: number, y: number) => {
+    if (
+        ownerDocument &&
+        ownerDocument.defaultView &&
+        (x !== ownerDocument.defaultView.pageXOffset || y !== ownerDocument.defaultView.pageYOffset)
+    ) {
+        ownerDocument.defaultView.scrollTo(x, y);
+    }
+};
+
+const restoreNodeScroll = ([element, x, y]: [HTMLElement, number, number]) => {
+    element.scrollLeft = x;
+    element.scrollTop = y;
+};
+
+const PSEUDO_BEFORE = ':before';
+const PSEUDO_AFTER = ':after';
+const PSEUDO_HIDE_ELEMENT_CLASS_BEFORE = '___html2canvas___pseudoelement_before';
+const PSEUDO_HIDE_ELEMENT_CLASS_AFTER = '___html2canvas___pseudoelement_after';
+
+const PSEUDO_HIDE_ELEMENT_STYLE = `{
+    content: "" !important;
+    display: none !important;
+}`;
+
+const createPseudoHideStyles = (body: HTMLElement) => {
+    createStyles(
+        body,
+        `.${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}${PSEUDO_BEFORE}${PSEUDO_HIDE_ELEMENT_STYLE}
+         .${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}${PSEUDO_AFTER}${PSEUDO_HIDE_ELEMENT_STYLE}`
+    );
+};
+
+const createStyles = (body: HTMLElement, styles: string) => {
+    const document = body.ownerDocument;
+    if (document) {
+        const style = document.createElement('style');
+        style.textContent = styles;
+        body.appendChild(style);
+    }
+};
--- a/src/dom/element-container.ts
+++ b/src/dom/element-container.ts
@@ -0,0 +1,30 @@
+import {CSSParsedDeclaration} from '../css/index';
+import {TextContainer} from './text-container';
+import {Bounds, parseBounds} from '../css/layout/bounds';
+import {isHTMLElementNode} from './node-parser';
+
+export const enum FLAGS {
+    CREATES_STACKING_CONTEXT = 1 << 1,
+    CREATES_REAL_STACKING_CONTEXT = 1 << 2,
+    IS_LIST_OWNER = 1 << 3
+}
+
+export class ElementContainer {
+    readonly styles: CSSParsedDeclaration;
+    readonly textNodes: TextContainer[];
+    readonly elements: ElementContainer[];
+    bounds: Bounds;
+    flags: number;
+
+    constructor(element: Element) {
+        this.styles = new CSSParsedDeclaration(window.getComputedStyle(element, null));
+        this.textNodes = [];
+        this.elements = [];
+        if (this.styles.transform !== null && isHTMLElementNode(element)) {
+            // getBoundingClientRect takes transforms into account
+            element.style.transform = 'none';
+        }
+        this.bounds = parseBounds(element);
+        this.flags = 0;
+    }
+}
--- a/src/dom/elements/li-element-container.ts
+++ b/src/dom/elements/li-element-container.ts
@@ -0,0 +1,9 @@
+import {ElementContainer} from '../element-container';
+export class LIElementContainer extends ElementContainer {
+    readonly value: number;
+
+    constructor(element: HTMLLIElement) {
+        super(element);
+        this.value = element.value;
+    }
+}
--- a/src/dom/elements/ol-element-container.ts
+++ b/src/dom/elements/ol-element-container.ts
@@ -0,0 +1,11 @@
+import {ElementContainer} from '../element-container';
+export class OLElementContainer extends ElementContainer {
+    readonly start: number;
+    readonly reversed: boolean;
+
+    constructor(element: HTMLOListElement) {
+        super(element);
+        this.start = element.start;
+        this.reversed = typeof element.reversed === 'boolean' && element.reversed === true;
+    }
+}
--- a/src/dom/elements/select-element-container.ts
+++ b/src/dom/elements/select-element-container.ts
@@ -0,0 +1,9 @@
+import {ElementContainer} from '../element-container';
+export class SelectElementContainer extends ElementContainer {
+    readonly value: string;
+    constructor(element: HTMLSelectElement) {
+        super(element);
+        const option = element.options[element.selectedIndex || 0];
+        this.value = option ? option.text || '' : '';
+    }
+}
--- a/src/dom/elements/textarea-element-container.ts
+++ b/src/dom/elements/textarea-element-container.ts
@@ -0,0 +1,8 @@
+import {ElementContainer} from '../element-container';
+export class TextareaElementContainer extends ElementContainer {
+    readonly value: string;
+    constructor(element: HTMLTextAreaElement) {
+        super(element);
+        this.value = element.value;
+    }
+}
--- a/src/dom/node-parser.ts
+++ b/src/dom/node-parser.ts
@@ -0,0 +1,119 @@
+import {CSSParsedDeclaration} from '../css/index';
+import {ElementContainer, FLAGS} from './element-container';
+import {TextContainer} from './text-container';
+import {ImageElementContainer} from './replaced-elements/image-element-container';
+import {CanvasElementContainer} from './replaced-elements/canvas-element-container';
+import {SVGElementContainer} from './replaced-elements/svg-element-container';
+import {LIElementContainer} from './elements/li-element-container';
+import {OLElementContainer} from './elements/ol-element-container';
+import {InputElementContainer} from './replaced-elements/input-element-container';
+import {SelectElementContainer} from './elements/select-element-container';
+import {TextareaElementContainer} from './elements/textarea-element-container';
+import {IFrameElementContainer} from './replaced-elements/iframe-element-container';
+
+const LIST_OWNERS = ['OL', 'UL', 'MENU'];
+
+const parseNodeTree = (node: Node, parent: ElementContainer, root: ElementContainer) => {
+    for (let childNode = node.firstChild, nextNode; childNode; childNode = nextNode) {
+        nextNode = childNode.nextSibling;
+
+        if (isTextNode(childNode) && childNode.data.trim().length > 0) {
+            parent.textNodes.push(new TextContainer(childNode, parent.styles));
+        } else if (isElementNode(childNode)) {
+            const container = createContainer(childNode);
+            if (container.styles.isVisible()) {
+                if (createsRealStackingContext(childNode, container, root)) {
+                    container.flags |= FLAGS.CREATES_REAL_STACKING_CONTEXT;
+                } else if (createsStackingContext(container.styles)) {
+                    container.flags |= FLAGS.CREATES_STACKING_CONTEXT;
+                }
+
+                if (LIST_OWNERS.indexOf(childNode.tagName) !== -1) {
+                    container.flags |= FLAGS.IS_LIST_OWNER;
+                }
+
+                parent.elements.push(container);
+                if (!isTextareaElement(childNode) && !isSVGElement(childNode) && !isSelectElement(childNode)) {
+                    parseNodeTree(childNode, container, root);
+                }
+            }
+        }
+    }
+};
+
+const createContainer = (element: Element): ElementContainer => {
+    if (isImageElement(element)) {
+        return new ImageElementContainer(element);
+    }
+
+    if (isCanvasElement(element)) {
+        return new CanvasElementContainer(element);
+    }
+
+    if (isSVGElement(element)) {
+        return new SVGElementContainer(element);
+    }
+
+    if (isLIElement(element)) {
+        return new LIElementContainer(element);
+    }
+
+    if (isOLElement(element)) {
+        return new OLElementContainer(element);
+    }
+
+    if (isInputElement(element)) {
+        return new InputElementContainer(element);
+    }
+
+    if (isSelectElement(element)) {
+        return new SelectElementContainer(element);
+    }
+
+    if (isTextareaElement(element)) {
+        return new TextareaElementContainer(element);
+    }
+
+    if (isIFrameElement(element)) {
+        return new IFrameElementContainer(element);
+    }
+
+    return new ElementContainer(element);
+};
+
+export const parseTree = (element: HTMLElement): ElementContainer => {
+    const container = createContainer(element);
+    container.flags |= FLAGS.CREATES_REAL_STACKING_CONTEXT;
+    parseNodeTree(element, container, container);
+    return container;
+};
+
+const createsRealStackingContext = (node: Element, container: ElementContainer, root: ElementContainer): boolean => {
+    return (
+        container.styles.isPositionedWithZIndex() ||
+        container.styles.opacity < 1 ||
+        container.styles.isTransformed() ||
+        (isBodyElement(node) && root.styles.isTransparent())
+    );
+};
+
+const createsStackingContext = (styles: CSSParsedDeclaration): boolean => styles.isPositioned() || styles.isFloating();
+
+export const isTextNode = (node: Node): node is Text => node.nodeType === Node.TEXT_NODE;
+export const isElementNode = (node: Node): node is Element => node.nodeType === Node.ELEMENT_NODE;
+export const isHTMLElementNode = (node: Node): node is HTMLElement =>
+    typeof (node as HTMLElement).style !== 'undefined';
+
+export const isLIElement = (node: Element): node is HTMLLIElement => node.tagName === 'LI';
+export const isOLElement = (node: Element): node is HTMLOListElement => node.tagName === 'OL';
+export const isInputElement = (node: Element): node is HTMLInputElement => node.tagName === 'INPUT';
+export const isHTMLElement = (node: Element): node is HTMLHtmlElement => node.tagName === 'HTML';
+export const isSVGElement = (node: Element): node is SVGSVGElement => node.tagName === 'svg';
+export const isBodyElement = (node: Element): node is HTMLBodyElement => node.tagName === 'BODY';
+export const isCanvasElement = (node: Element): node is HTMLCanvasElement => node.tagName === 'CANVAS';
+export const isImageElement = (node: Element): node is HTMLImageElement => node.tagName === 'IMG';
+export const isIFrameElement = (node: Element): node is HTMLIFrameElement => node.tagName === 'IFRAME';
+export const isStyleElement = (node: Element): node is HTMLStyleElement => node.tagName === 'STYLE';
+export const isScriptElement = (node: Element): node is HTMLScriptElement => node.tagName === 'SCRIPT';
+export const isTextareaElement = (node: Element): node is HTMLTextAreaElement => node.tagName === 'TEXTAREA';
+export const isSelectElement = (node: Element): node is HTMLSelectElement => node.tagName === 'SELECT';
--- a/src/dom/replaced-elements/canvas-element-container.ts
+++ b/src/dom/replaced-elements/canvas-element-container.ts
@@ -0,0 +1,14 @@
+import {ElementContainer} from '../element-container';
+
+export class CanvasElementContainer extends ElementContainer {
+    canvas: HTMLCanvasElement;
+    intrinsicWidth: number;
+    intrinsicHeight: number;
+
+    constructor(canvas: HTMLCanvasElement) {
+        super(canvas);
+        this.canvas = canvas;
+        this.intrinsicWidth = canvas.width;
+        this.intrinsicHeight = canvas.height;
+    }
+}
--- a/src/dom/replaced-elements/iframe-element-container.ts
+++ b/src/dom/replaced-elements/iframe-element-container.ts
@@ -0,0 +1,46 @@
+import {ElementContainer} from '../element-container';
+import {parseTree} from '../node-parser';
+import {Color, color, COLORS, isTransparent} from '../../css/types/color';
+import {Parser} from '../../css/syntax/parser';
+
+const parseColor = (value: string): Color => color.parse(Parser.create(value).parseComponentValue());
+
+export class IFrameElementContainer extends ElementContainer {
+    src: string;
+    width: number;
+    height: number;
+    tree?: ElementContainer;
+    backgroundColor: Color;
+
+    constructor(iframe: HTMLIFrameElement) {
+        super(iframe);
+        this.src = iframe.src;
+        this.width = parseInt(iframe.width, 10);
+        this.height = parseInt(iframe.height, 10);
+        this.backgroundColor = this.styles.backgroundColor;
+        try {
+            if (
+                iframe.contentWindow &&
+                iframe.contentWindow.document &&
+                iframe.contentWindow.document.documentElement
+            ) {
+                this.tree = parseTree(iframe.contentWindow.document.documentElement);
+
+                // http://www.w3.org/TR/css3-background/#special-backgrounds
+                const documentBackgroundColor = iframe.contentWindow.document.documentElement
+                    ? parseColor(getComputedStyle(iframe.contentWindow.document.documentElement)
+                          .backgroundColor as string)
+                    : COLORS.TRANSPARENT;
+                const bodyBackgroundColor = iframe.contentWindow.document.body
+                    ? parseColor(getComputedStyle(iframe.contentWindow.document.body).backgroundColor as string)
+                    : COLORS.TRANSPARENT;
+
+                this.backgroundColor = isTransparent(documentBackgroundColor)
+                    ? isTransparent(bodyBackgroundColor)
+                        ? this.styles.backgroundColor
+                        : bodyBackgroundColor
+                    : documentBackgroundColor;
+            }
+        } catch (e) {}
+    }
+}
--- a/src/dom/replaced-elements/image-element-container.ts
+++ b/src/dom/replaced-elements/image-element-container.ts
@@ -0,0 +1,16 @@
+import {ElementContainer} from '../element-container';
+import {CacheStorage} from '../../core/cache-storage';
+
+export class ImageElementContainer extends ElementContainer {
+    src: string;
+    intrinsicWidth: number;
+    intrinsicHeight: number;
+
+    constructor(img: HTMLImageElement) {
+        super(img);
+        this.src = img.currentSrc || img.src;
+        this.intrinsicWidth = img.naturalWidth;
+        this.intrinsicHeight = img.naturalHeight;
+        CacheStorage.getInstance().addImage(this.src);
+    }
+}
--- a/src/dom/replaced-elements/index.ts
+++ b/src/dom/replaced-elements/index.ts
@@ -0,0 +1,5 @@
+import {CanvasElementContainer} from './canvas-element-container';
+import {ImageElementContainer} from './image-element-container';
+import {SVGElementContainer} from './svg-element-container';
+
+export type ReplacedElementContainer = CanvasElementContainer | ImageElementContainer | SVGElementContainer;
--- a/src/dom/replaced-elements/input-element-container.ts
+++ b/src/dom/replaced-elements/input-element-container.ts
@@ -0,0 +1,77 @@
+import {ElementContainer} from '../element-container';
+import {BORDER_STYLE} from '../../css/property-descriptors/border-style';
+import {BACKGROUND_CLIP} from '../../css/property-descriptors/background-clip';
+import {BACKGROUND_ORIGIN} from '../../css/property-descriptors/background-origin';
+import {TokenType} from '../../css/syntax/tokenizer';
+import {LengthPercentageTuple} from '../../css/types/length-percentage';
+import {Bounds} from '../../css/layout/bounds';
+
+const CHECKBOX_BORDER_RADIUS: LengthPercentageTuple = [
+    {
+        type: TokenType.DIMENSION_TOKEN,
+        flags: 0,
+        unit: 'px',
+        number: 3
+    }
+];
+
+const RADIO_BORDER_RADIUS: LengthPercentageTuple = [
+    {
+        type: TokenType.PERCENTAGE_TOKEN,
+        flags: 0,
+        number: 50
+    }
+];
+
+const reformatInputBounds = (bounds: Bounds): Bounds => {
+    if (bounds.width > bounds.height) {
+        return new Bounds(bounds.left + (bounds.width - bounds.height) / 2, bounds.top, bounds.height, bounds.height);
+    } else if (bounds.width < bounds.height) {
+        return new Bounds(bounds.left, bounds.top + (bounds.height - bounds.width) / 2, bounds.width, bounds.width);
+    }
+    return bounds;
+};
+
+const getInputValue = (node: HTMLInputElement): string => {
+    const value = node.type === PASSWORD ? new Array(node.value.length + 1).join('\u2022') : node.value;
+
+    return value.length === 0 ? node.placeholder || '' : value;
+};
+
+export const CHECKBOX = 'checkbox';
+export const RADIO = 'radio';
+export const PASSWORD = 'password';
+export const INPUT_COLOR = 0x2a2a2aff;
+
+export class InputElementContainer extends ElementContainer {
+    readonly type: string;
+    readonly checked: boolean;
+    readonly value: string;
+
+    constructor(input: HTMLInputElement) {
+        super(input);
+        this.type = input.type.toLowerCase();
+        this.checked = input.checked;
+        this.value = getInputValue(input);
+
+        if (this.type === CHECKBOX || this.type === RADIO) {
+            this.styles.backgroundColor = 0xdededeff;
+            this.styles.borderTopColor = this.styles.borderRightColor = this.styles.borderBottomColor = this.styles.borderLeftColor = 0xa5a5a5ff;
+            this.styles.borderTopWidth = this.styles.borderRightWidth = this.styles.borderBottomWidth = this.styles.borderLeftWidth = 1;
+            this.styles.borderTopStyle = this.styles.borderRightStyle = this.styles.borderBottomStyle = this.styles.borderLeftStyle =
+                BORDER_STYLE.SOLID;
+            this.styles.backgroundClip = [BACKGROUND_CLIP.BORDER_BOX];
+            this.styles.backgroundOrigin = [BACKGROUND_ORIGIN.BORDER_BOX];
+            this.bounds = reformatInputBounds(this.bounds);
+        }
+
+        switch (this.type) {
+            case CHECKBOX:
+                this.styles.borderTopRightRadius = this.styles.borderTopLeftRadius = this.styles.borderBottomRightRadius = this.styles.borderBottomLeftRadius = CHECKBOX_BORDER_RADIUS;
+                break;
+            case RADIO:
+                this.styles.borderTopRightRadius = this.styles.borderTopLeftRadius = this.styles.borderBottomRightRadius = this.styles.borderBottomLeftRadius = RADIO_BORDER_RADIUS;
+                break;
+        }
+    }
+}
--- a/src/dom/replaced-elements/pseudo-elements.ts
+++ b/src/dom/replaced-elements/pseudo-elements.ts
--- a/src/dom/replaced-elements/svg-element-container.ts
+++ b/src/dom/replaced-elements/svg-element-container.ts
@@ -0,0 +1,18 @@
+import {ElementContainer} from '../element-container';
+import {CacheStorage} from '../../core/cache-storage';
+
+export class SVGElementContainer extends ElementContainer {
+    svg: string;
+    intrinsicWidth: number;
+    intrinsicHeight: number;
+
+    constructor(img: SVGSVGElement) {
+        super(img);
+        const s = new XMLSerializer();
+        this.svg = `data:image/svg+xml,${encodeURIComponent(s.serializeToString(img))}`;
+        this.intrinsicWidth = img.width.baseVal.value;
+        this.intrinsicHeight = img.height.baseVal.value;
+
+        CacheStorage.getInstance().addImage(this.svg);
+    }
+}
--- a/src/dom/text-container.ts
+++ b/src/dom/text-container.ts
@@ -0,0 +1,36 @@
+import {CSSParsedDeclaration} from '../css/index';
+import {TEXT_TRANSFORM} from '../css/property-descriptors/text-transform';
+import {parseTextBounds, TextBounds} from '../css/layout/text';
+
+export class TextContainer {
+    text: string;
+    textBounds: TextBounds[];
+
+    constructor(node: Text, styles: CSSParsedDeclaration) {
+        this.text = transform(node.data, styles.textTransform);
+        this.textBounds = parseTextBounds(this.text, styles, node);
+    }
+}
+
+const transform = (text: string, transform: TEXT_TRANSFORM) => {
+    switch (transform) {
+        case TEXT_TRANSFORM.LOWERCASE:
+            return text.toLowerCase();
+        case TEXT_TRANSFORM.CAPITALIZE:
+            return text.replace(CAPITALIZE, capitalize);
+        case TEXT_TRANSFORM.UPPERCASE:
+            return text.toUpperCase();
+        default:
+            return text;
+    }
+};
+
+const CAPITALIZE = /(^|\s|:|-|\(|\))([a-z])/g;
+
+const capitalize = (m: string, p1: string, p2: string) => {
+    if (m.length > 0) {
+        return p1 + p2.toUpperCase();
+    }
+
+    return m;
+};