@ohos-ports/html2canvas-pro 0.0.0-stage → 2.3.2-beta.0

package/dist/lib/dom/dom-normalizer.js

@@ -0,0 +1,115 @@
+"use strict";
+/**
+ * DOM Normalizer
+ * Handles DOM side effects that need to happen before rendering
+ * Extracted from ElementContainer to follow SRP
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DOMNormalizer = void 0;
+const node_type_guards_1 = require("./node-type-guards");
+/**
+ * Normalize element styles for accurate rendering
+ * This includes disabling animations and neutralizing transforms.
+ */
+class DOMNormalizer {
+    /**
+     * Normalize a single element and return original styles.
+     *
+     * ## Why we replace transforms with an identity value instead of "none"
+     *
+     * `getBoundingClientRect()` returns visual (post-transform) coordinates, so we
+     * must neutralize any active transform before measuring element bounds.
+     *
+     * The naive approach of setting `transform: none` (or `rotate: none`) has a
+     * critical side-effect: per **CSS Transforms Level 2**, an element whose
+     * `transform` is non-none automatically becomes the **containing block** for
+     * all of its `position: absolute` *and* `position: fixed` descendants.
+     * Setting it to `none` destroys that role, causing children to resolve their
+     * percentage dimensions and offsets against an unintended ancestor — which
+     * produces completely wrong bounds.
+     *
+     * Solution: instead of removing the transform, we replace it with a visually
+     * inert identity value:
+     *
+     * - `transform: scale(0.5)` → `transform: translate(0, 0)`
+     *   - `translate(0, 0)` is an identity transform (no visual change, no layout shift).
+     *   - `getBoundingClientRect()` returns the same layout-space coordinates as
+     *     if there were no transform at all.
+     *   - Because the value is still non-none, the element **remains a containing
+     *     block** for both `position: absolute` and `position: fixed` descendants.
+     *
+     * - `rotate: 45deg` → `rotate: 0deg`
+     *   - `0deg` is the identity rotation; `0deg ≠ none`, so the same containing-
+     *     block guarantee holds.
+     *
+     * @param element - Element to normalize
+     * @param styles - Parsed CSS styles
+     * @returns Original styles map for restoration
+     */
+    static normalizeElement(element, styles) {
+        const originalStyles = {};
+        if (!(0, node_type_guards_1.isHTMLElementNode)(element)) {
+            return originalStyles;
+        }
+        // Disable animations to capture static state
+        if (styles.animationDuration.some((duration) => duration > 0)) {
+            originalStyles.animationDuration = element.style.animationDuration;
+            element.style.animationDuration = '0s';
+        }
+        // Replace the actual transform with an identity translate so that:
+        //   1. getBoundingClientRect() returns layout-space (unscaled/unrotated) coords.
+        //   2. The element still satisfies "transform != none" and therefore keeps
+        //      its role as a containing block for position:absolute / position:fixed
+        //      descendants (CSS Transforms Level 2 §2.3).
+        if (styles.transform !== null) {
+            originalStyles.transform = element.style.transform;
+            element.style.transform = 'translate(0, 0)';
+        }
+        // Same rationale for the standalone `rotate` property.
+        // `rotate: 0deg` is an identity rotation with no visual effect.
+        //
+        // However, individual transform properties (`rotate`, `translate`, `scale`)
+        // are part of CSS Transforms Level 2 and their containing-block guarantee
+        // is not uniformly implemented across all browsers. To be safe, if `rotate`
+        // is the only transform-like property active on this element, we also set
+        // `transform: translate(0, 0)` so that the containing-block role is reliably
+        // preserved via the well-supported `transform` property.
+        if (styles.rotate !== null) {
+            originalStyles.rotate = element.style.rotate;
+            element.style.rotate = '0deg';
+            // Individual transform properties (`rotate`, `translate`, `scale`) are
+            // CSS Transforms Level 2 and their containing-block guarantee is not
+            // uniformly implemented in all browsers. If `transform` was not already
+            // set to translate(0,0) in the block above (i.e. this element has
+            // `rotate` but no `transform`), we set it now so the containing-block
+            // role is reliably established via the widely-supported `transform`
+            // property – independently of browser support for individual props.
+            if (originalStyles.transform === undefined) {
+                originalStyles.transform = element.style.transform;
+                element.style.transform = 'translate(0, 0)';
+            }
+        }
+        return originalStyles;
+    }
+    /**
+     * Restore element styles after rendering.
+     *
+     * @param element - Element to restore
+     * @param originalStyles - Original styles to restore
+     */
+    static restoreElement(element, originalStyles) {
+        if (!(0, node_type_guards_1.isHTMLElementNode)(element)) {
+            return;
+        }
+        if (originalStyles.animationDuration !== undefined) {
+            element.style.animationDuration = originalStyles.animationDuration;
+        }
+        if (originalStyles.transform !== undefined) {
+            element.style.transform = originalStyles.transform;
+        }
+        if (originalStyles.rotate !== undefined) {
+            element.style.rotate = originalStyles.rotate;
+        }
+    }
+}
+exports.DOMNormalizer = DOMNormalizer;

package/dist/lib/dom/element-container.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ElementContainer = void 0;
+const index_1 = require("../css/index");
+const bounds_1 = require("../css/layout/bounds");
+const node_type_guards_1 = require("./node-type-guards");
+const debugger_1 = require("../core/debugger");
+const dom_normalizer_1 = require("./dom-normalizer");
+class ElementContainer {
+    constructor(context, element, options = {}) {
+        this.context = context;
+        this.textNodes = [];
+        this.elements = [];
+        this.createsStackingContext = false;
+        this.createsRealStackingContext = false;
+        this.isListOwner = false;
+        this.debugRender = false;
+        if ((0, debugger_1.isDebugging)(element, 3 /* DebuggerType.PARSE */)) {
+            debugger;
+        }
+        this.styles = new index_1.CSSParsedDeclaration(context, context.config.window.getComputedStyle(element, null));
+        const shouldNormalize = options.normalizeDom !== false;
+        if (shouldNormalize && (0, node_type_guards_1.isHTMLElementNode)(element)) {
+            this.originalStyles = dom_normalizer_1.DOMNormalizer.normalizeElement(element, this.styles);
+            this.originalElement = element;
+        }
+        this.bounds = (0, bounds_1.parseBounds)(this.context, element);
+        if ((0, debugger_1.isDebugging)(element, 4 /* DebuggerType.RENDER */)) {
+            this.debugRender = true;
+        }
+    }
+    /**
+     * Restore original element styles (if normalized)
+     * Call this after rendering is complete to clean up DOM state
+     */
+    restore() {
+        if (this.originalStyles && this.originalElement) {
+            dom_normalizer_1.DOMNormalizer.restoreElement(this.originalElement, this.originalStyles);
+            // Clear references to prevent memory leaks
+            this.originalStyles = undefined;
+            this.originalElement = undefined;
+        }
+    }
+    /**
+     * Recursively restore all elements in the tree
+     * Call this on the root container after rendering is complete
+     */
+    restoreTree() {
+        this.restore();
+        // Recursively restore all child elements
+        for (const child of this.elements) {
+            child.restoreTree();
+        }
+    }
+}
+exports.ElementContainer = ElementContainer;

package/dist/lib/dom/elements/li-element-container.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LIElementContainer = void 0;
+const element_container_1 = require("../element-container");
+class LIElementContainer extends element_container_1.ElementContainer {
+    constructor(context, element) {
+        super(context, element);
+        this.value = element.value;
+    }
+}
+exports.LIElementContainer = LIElementContainer;

package/dist/lib/dom/elements/ol-element-container.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OLElementContainer = void 0;
+const element_container_1 = require("../element-container");
+class OLElementContainer extends element_container_1.ElementContainer {
+    constructor(context, element) {
+        super(context, element);
+        this.start = element.start;
+        this.reversed = typeof element.reversed === 'boolean' && element.reversed === true;
+    }
+}
+exports.OLElementContainer = OLElementContainer;

package/dist/lib/dom/elements/select-element-container.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectElementContainer = void 0;
+const element_container_1 = require("../element-container");
+class SelectElementContainer extends element_container_1.ElementContainer {
+    constructor(context, element) {
+        super(context, element);
+        const option = element.options[element.selectedIndex || 0];
+        this.value = option ? option.text || '' : '';
+    }
+}
+exports.SelectElementContainer = SelectElementContainer;

package/dist/lib/dom/elements/textarea-element-container.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextareaElementContainer = void 0;
+const element_container_1 = require("../element-container");
+class TextareaElementContainer extends element_container_1.ElementContainer {
+    constructor(context, element) {
+        super(context, element);
+        this.value = element.value;
+    }
+}
+exports.TextareaElementContainer = TextareaElementContainer;

package/dist/lib/dom/node-parser.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseTree = void 0;
+const element_container_1 = require("./element-container");
+const text_container_1 = require("./text-container");
+const image_element_container_1 = require("./replaced-elements/image-element-container");
+const canvas_element_container_1 = require("./replaced-elements/canvas-element-container");
+const svg_element_container_1 = require("./replaced-elements/svg-element-container");
+const li_element_container_1 = require("./elements/li-element-container");
+const ol_element_container_1 = require("./elements/ol-element-container");
+const input_element_container_1 = require("./replaced-elements/input-element-container");
+const select_element_container_1 = require("./elements/select-element-container");
+const textarea_element_container_1 = require("./elements/textarea-element-container");
+const iframe_element_container_1 = require("./replaced-elements/iframe-element-container");
+const node_type_guards_1 = require("./node-type-guards");
+const bitwise_1 = require("../core/bitwise");
+const LIST_OWNERS = ['OL', 'UL', 'MENU'];
+const parseNodeTree = (context, node, parent, root) => {
+    for (let childNode = node.firstChild, nextNode; childNode; childNode = nextNode) {
+        nextNode = childNode.nextSibling;
+        // Fixes #2238 #1624 - Fix the issue of TextNode content being overlooked in rendering due to being perceived as blank by trim().
+        if ((0, node_type_guards_1.isTextNode)(childNode) && childNode.data.length > 0) {
+            parent.textNodes.push(new text_container_1.TextContainer(context, childNode, parent.styles));
+        }
+        else if ((0, node_type_guards_1.isElementNode)(childNode)) {
+            if ((0, node_type_guards_1.isSlotElement)(childNode) && childNode.assignedNodes) {
+                childNode
+                    .assignedNodes()
+                    .forEach((assignedNode) => parseNodeTree(context, assignedNode, parent, root));
+            }
+            else {
+                const container = createContainer(context, childNode);
+                if (container.styles.isVisible()) {
+                    if (createsRealStackingContext(childNode, container, root)) {
+                        container.createsRealStackingContext = true;
+                    }
+                    else if (createsStackingContext(container.styles)) {
+                        container.createsStackingContext = true;
+                    }
+                    if (LIST_OWNERS.indexOf(childNode.tagName) !== -1) {
+                        container.isListOwner = true;
+                    }
+                    parent.elements.push(container);
+                    if (childNode.shadowRoot) {
+                        parseNodeTree(context, childNode.shadowRoot, container, root);
+                    }
+                    else if (!(0, node_type_guards_1.isTextareaElement)(childNode) &&
+                        !(0, node_type_guards_1.isSVGElement)(childNode) &&
+                        !(0, node_type_guards_1.isSelectElement)(childNode)) {
+                        parseNodeTree(context, childNode, container, root);
+                    }
+                }
+            }
+        }
+    }
+};
+const createContainer = (context, element) => {
+    if ((0, node_type_guards_1.isImageElement)(element)) {
+        return new image_element_container_1.ImageElementContainer(context, element);
+    }
+    if ((0, node_type_guards_1.isCanvasElement)(element)) {
+        return new canvas_element_container_1.CanvasElementContainer(context, element);
+    }
+    if ((0, node_type_guards_1.isSVGElement)(element)) {
+        return new svg_element_container_1.SVGElementContainer(context, element);
+    }
+    if ((0, node_type_guards_1.isLIElement)(element)) {
+        return new li_element_container_1.LIElementContainer(context, element);
+    }
+    if ((0, node_type_guards_1.isOLElement)(element)) {
+        return new ol_element_container_1.OLElementContainer(context, element);
+    }
+    if ((0, node_type_guards_1.isInputElement)(element)) {
+        return new input_element_container_1.InputElementContainer(context, element);
+    }
+    if ((0, node_type_guards_1.isSelectElement)(element)) {
+        return new select_element_container_1.SelectElementContainer(context, element);
+    }
+    if ((0, node_type_guards_1.isTextareaElement)(element)) {
+        return new textarea_element_container_1.TextareaElementContainer(context, element);
+    }
+    if ((0, node_type_guards_1.isIFrameElement)(element)) {
+        return new iframe_element_container_1.IFrameElementContainer(context, element, exports.parseTree);
+    }
+    return new element_container_1.ElementContainer(context, element);
+};
+const parseTree = (context, element) => {
+    const container = createContainer(context, element);
+    container.createsRealStackingContext = true;
+    parseNodeTree(context, element, container, container);
+    return container;
+};
+exports.parseTree = parseTree;
+const createsRealStackingContext = (node, container, root) => {
+    return (container.styles.isPositionedWithZIndex() ||
+        container.styles.opacity < 1 ||
+        container.styles.isTransformed() ||
+        ((0, node_type_guards_1.isBodyElement)(node) && root.styles.isTransparent()));
+};
+const createsStackingContext = (styles) => {
+    // Positioned and floating elements create stacking contexts
+    if (styles.isPositioned() || styles.isFloating()) {
+        return true;
+    }
+    // Fix for Issue #137: Inline-level containers (inline-flex, inline-block, etc.)
+    // should create stacking contexts to prevent their children from being added
+    // to the parent's stacking context, which causes rendering order issues
+    return ((0, bitwise_1.contains)(styles.display, 268435456 /* DISPLAY.INLINE_FLEX */) ||
+        (0, bitwise_1.contains)(styles.display, 33554432 /* DISPLAY.INLINE_BLOCK */) ||
+        (0, bitwise_1.contains)(styles.display, 536870912 /* DISPLAY.INLINE_GRID */) ||
+        (0, bitwise_1.contains)(styles.display, 134217728 /* DISPLAY.INLINE_TABLE */));
+};

package/dist/lib/dom/node-type-guards.js

@@ -0,0 +1,81 @@
+"use strict";
+/**
+ * DOM Node Type Guards
+ *
+ * All DOM node type guards consolidated here to eliminate duplication
+ * and provide a single source of truth for node type checking.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.canHavePseudoElements = exports.isCustomElement = exports.isOLElement = exports.isLIElement = exports.isSlotElement = exports.isSelectElement = exports.isTextareaElement = exports.isScriptElement = exports.isStyleElement = exports.isIFrameElement = exports.isImageElement = exports.isVideoElement = exports.isCanvasElement = exports.isBodyElement = exports.isSVGElement = exports.isHTMLElement = exports.isInputElement = exports.isHTMLElementNode = exports.isSVGElementNode = exports.isTextNode = exports.isElementNode = void 0;
+// --- Generic node type guards ---
+const isElementNode = (node) => node.nodeType === Node.ELEMENT_NODE;
+exports.isElementNode = isElementNode;
+const isTextNode = (node) => node.nodeType === Node.TEXT_NODE;
+exports.isTextNode = isTextNode;
+const isSVGElementNode = (element) => typeof element.className === 'object';
+exports.isSVGElementNode = isSVGElementNode;
+const isHTMLElementNode = (node) => (0, exports.isElementNode)(node) && typeof node.style !== 'undefined' && !(0, exports.isSVGElementNode)(node);
+exports.isHTMLElementNode = isHTMLElementNode;
+// --- Tag name based type guards ---
+const isInputElement = (node) => node.tagName === 'INPUT';
+exports.isInputElement = isInputElement;
+const isHTMLElement = (node) => node.tagName === 'HTML';
+exports.isHTMLElement = isHTMLElement;
+const isSVGElement = (node) => node.tagName === 'svg';
+exports.isSVGElement = isSVGElement;
+const isBodyElement = (node) => node.tagName === 'BODY';
+exports.isBodyElement = isBodyElement;
+const isCanvasElement = (node) => node.tagName === 'CANVAS';
+exports.isCanvasElement = isCanvasElement;
+const isVideoElement = (node) => node.tagName === 'VIDEO';
+exports.isVideoElement = isVideoElement;
+const isImageElement = (node) => node.tagName === 'IMG';
+exports.isImageElement = isImageElement;
+const isIFrameElement = (node) => node.tagName === 'IFRAME';
+exports.isIFrameElement = isIFrameElement;
+const isStyleElement = (node) => node.tagName === 'STYLE';
+exports.isStyleElement = isStyleElement;
+const isScriptElement = (node) => node.tagName === 'SCRIPT';
+exports.isScriptElement = isScriptElement;
+const isTextareaElement = (node) => node.tagName === 'TEXTAREA';
+exports.isTextareaElement = isTextareaElement;
+const isSelectElement = (node) => node.tagName === 'SELECT';
+exports.isSelectElement = isSelectElement;
+const isSlotElement = (node) => node.tagName === 'SLOT';
+exports.isSlotElement = isSlotElement;
+const isLIElement = (node) => node.tagName === 'LI';
+exports.isLIElement = isLIElement;
+const isOLElement = (node) => node.tagName === 'OL';
+exports.isOLElement = isOLElement;
+const isCustomElement = (element) => !(0, exports.isSVGElementNode)(element) && element.tagName.indexOf('-') > 0;
+exports.isCustomElement = isCustomElement;
+const VOID_OR_REPLACED_TAGS = new Set([
+    'IMG',
+    'VIDEO',
+    'AUDIO',
+    'CANVAS',
+    'IFRAME',
+    'INPUT',
+    'TEXTAREA',
+    'SELECT',
+    'BR',
+    'HR',
+    'META',
+    'LINK',
+    'BASE',
+    'COL',
+    'SOURCE',
+    'TRACK',
+    'WBR',
+    'AREA',
+    'PARAM',
+    'EMBED',
+    'OBJECT'
+]);
+/**
+ * Check if an element can have ::before / ::after pseudo-elements.
+ * Per the CSS spec, replaced elements and void elements cannot have pseudo-elements.
+ * SVG elements also do not support pseudo-elements.
+ */
+const canHavePseudoElements = (element) => !(0, exports.isSVGElementNode)(element) && !VOID_OR_REPLACED_TAGS.has(element.tagName);
+exports.canHavePseudoElements = canHavePseudoElements;

package/dist/lib/dom/replaced-elements/canvas-element-container.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasElementContainer = void 0;
+const element_container_1 = require("../element-container");
+class CanvasElementContainer extends element_container_1.ElementContainer {
+    constructor(context, canvas) {
+        super(context, canvas);
+        this.canvas = canvas;
+        this.intrinsicWidth = canvas.width;
+        this.intrinsicHeight = canvas.height;
+    }
+}
+exports.CanvasElementContainer = CanvasElementContainer;

package/dist/lib/dom/replaced-elements/iframe-element-container.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IFrameElementContainer = void 0;
+const element_container_1 = require("../element-container");
+const color_1 = require("../../css/types/color");
+const color_utilities_1 = require("../../css/types/color-utilities");
+class IFrameElementContainer extends element_container_1.ElementContainer {
+    constructor(context, iframe, parseTreeFn) {
+        super(context, iframe);
+        this.src = iframe.src;
+        this.width = parseInt(iframe.width, 10) || 0;
+        this.height = parseInt(iframe.height, 10) || 0;
+        this.backgroundColor = this.styles.backgroundColor;
+        this.parseTreeFn = parseTreeFn;
+        try {
+            if (iframe.contentWindow &&
+                iframe.contentWindow.document &&
+                iframe.contentWindow.document.documentElement &&
+                this.parseTreeFn) {
+                this.tree = this.parseTreeFn(context, iframe.contentWindow.document.documentElement);
+                // http://www.w3.org/TR/css3-background/#special-backgrounds
+                const documentBackgroundColor = iframe.contentWindow.document.documentElement
+                    ? (0, color_1.parseColor)(context, getComputedStyle(iframe.contentWindow.document.documentElement).backgroundColor)
+                    : color_1.COLORS.TRANSPARENT;
+                const bodyBackgroundColor = iframe.contentWindow.document.body
+                    ? (0, color_1.parseColor)(context, getComputedStyle(iframe.contentWindow.document.body).backgroundColor)
+                    : color_1.COLORS.TRANSPARENT;
+                this.backgroundColor = (0, color_utilities_1.isTransparent)(documentBackgroundColor)
+                    ? (0, color_utilities_1.isTransparent)(bodyBackgroundColor)
+                        ? this.styles.backgroundColor
+                        : bodyBackgroundColor
+                    : documentBackgroundColor;
+            }
+        }
+        catch (e) { }
+    }
+}
+exports.IFrameElementContainer = IFrameElementContainer;

package/dist/lib/dom/replaced-elements/image-element-container.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageElementContainer = void 0;
+const element_container_1 = require("../element-container");
+class ImageElementContainer extends element_container_1.ElementContainer {
+    constructor(context, img) {
+        super(context, img);
+        this.src = img.currentSrc || img.src;
+        this.intrinsicWidth = img.naturalWidth;
+        this.intrinsicHeight = img.naturalHeight;
+        this.context.cache.addImage(this.src);
+    }
+}
+exports.ImageElementContainer = ImageElementContainer;

package/dist/lib/dom/replaced-elements/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/lib/dom/replaced-elements/input-element-container.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputElementContainer = exports.PLACEHOLDER_COLOR = exports.INPUT_COLOR = exports.PASSWORD = exports.RADIO = exports.CHECKBOX = void 0;
+const element_container_1 = require("../element-container");
+const bounds_1 = require("../../css/layout/bounds");
+const CHECKBOX_BORDER_RADIUS = [
+    {
+        type: 15 /* TokenType.DIMENSION_TOKEN */,
+        flags: 0,
+        unit: 'px',
+        number: 3
+    }
+];
+const RADIO_BORDER_RADIUS = [
+    {
+        type: 16 /* TokenType.PERCENTAGE_TOKEN */,
+        flags: 0,
+        number: 50
+    }
+];
+const reformatInputBounds = (bounds) => {
+    if (bounds.width > bounds.height) {
+        return new bounds_1.Bounds(bounds.left + (bounds.width - bounds.height) / 2, bounds.top, bounds.height, bounds.height);
+    }
+    else if (bounds.width < bounds.height) {
+        return new bounds_1.Bounds(bounds.left, bounds.top + (bounds.height - bounds.width) / 2, bounds.width, bounds.width);
+    }
+    return bounds;
+};
+const getInputValue = (node) => {
+    const value = node.type === exports.PASSWORD ? new Array(node.value.length + 1).join('\u2022') : node.value;
+    return value.length === 0 ? node.placeholder || '' : value;
+};
+const isPlaceholder = (node) => {
+    return node.value.length === 0 && !!node.placeholder;
+};
+exports.CHECKBOX = 'checkbox';
+exports.RADIO = 'radio';
+exports.PASSWORD = 'password';
+exports.INPUT_COLOR = 0x2a2a2aff;
+// Default placeholder color (similar to browsers: rgba(117, 117, 117, 1) or #757575)
+exports.PLACEHOLDER_COLOR = 0x757575ff;
+class InputElementContainer extends element_container_1.ElementContainer {
+    constructor(context, input) {
+        super(context, input);
+        this.type = input.type.toLowerCase();
+        this.checked = input.checked;
+        this.value = getInputValue(input);
+        this.isPlaceholder = isPlaceholder(input);
+        if (this.type === exports.CHECKBOX || this.type === exports.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 =
+                            1 /* BORDER_STYLE.SOLID */;
+            this.styles.backgroundClip = [0 /* BACKGROUND_CLIP.BORDER_BOX */];
+            this.styles.backgroundOrigin = [0 /* BACKGROUND_ORIGIN.BORDER_BOX */];
+            this.bounds = reformatInputBounds(this.bounds);
+        }
+        switch (this.type) {
+            case exports.CHECKBOX:
+                this.styles.borderTopRightRadius =
+                    this.styles.borderTopLeftRadius =
+                        this.styles.borderBottomRightRadius =
+                            this.styles.borderBottomLeftRadius =
+                                CHECKBOX_BORDER_RADIUS;
+                break;
+            case exports.RADIO:
+                this.styles.borderTopRightRadius =
+                    this.styles.borderTopLeftRadius =
+                        this.styles.borderBottomRightRadius =
+                            this.styles.borderBottomLeftRadius =
+                                RADIO_BORDER_RADIUS;
+                break;
+        }
+    }
+}
+exports.InputElementContainer = InputElementContainer;

package/dist/lib/dom/replaced-elements/svg-element-container.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SVGElementContainer = void 0;
+const element_container_1 = require("../element-container");
+const bounds_1 = require("../../css/layout/bounds");
+class SVGElementContainer extends element_container_1.ElementContainer {
+    constructor(context, img) {
+        super(context, img);
+        const s = new XMLSerializer();
+        const bounds = (0, bounds_1.parseBounds)(context, img);
+        img.setAttribute('width', `${bounds.width}px`);
+        img.setAttribute('height', `${bounds.height}px`);
+        this.svg = `data:image/svg+xml,${encodeURIComponent(s.serializeToString(img))}`;
+        this.intrinsicWidth = img.width.baseVal.value;
+        this.intrinsicHeight = img.height.baseVal.value;
+        this.context.cache.addImage(this.svg);
+    }
+}
+exports.SVGElementContainer = SVGElementContainer;