html2canvas-pro 2.4.4 → 2.5.0

package/dist/types/css/types/color-spaces/pro-photo.d.ts

@@ -1,6 +1,7 @@
 /**
  * Pro Photo related functions
  */
+import { RGB3, RGBA4 } from '../color-math';
 /**
  * Convert linear-light display-p3 to XYZ D65
  *
@@ -18,19 +19,19 @@ export declare const xyzToProPhotoLinear: (xyz: [number, number, number]) => [nu
  *
  * @param p3
  */
-export declare const proPhotoToProPhotoLinear: (p3: [number, number, number]) => number[];
+export declare const proPhotoToProPhotoLinear: (p3: RGB3) => RGB3;
 /**
  * Convert Pro-Photo Linear to Pro-Photo
  *
  * @param p3
  */
-export declare const proPhotoLinearToProPhoto: (p3: [number, number, number]) => number[];
+export declare const proPhotoLinearToProPhoto: (p3: RGB3) => RGB3;
 /**
  * Convert Pro-Photo to XYZ
  *
  * @param args
  */
-export declare const proPhotoToXYZ: (args: number[]) => [number, number, number];
+export declare const proPhotoToXYZ: (args: RGB3) => RGB3;
 /**
  * Convert XYZ to Pro-Photo
  *
@@ -42,4 +43,4 @@ export declare const proPhotoFromXYZ: (args: [number, number, number, number]) =
  *
  * @param args
  */
-export declare const convertProPhoto: (args: number[]) => number;
+export declare const convertProPhoto: (args: RGBA4) => number;

package/dist/types/css/types/color-spaces/rec2020.d.ts

@@ -1,18 +1,19 @@
 /**
  * REC2020 related functions
  */
+import { RGB3, RGBA4 } from '../color-math';
 /**
  * Convert rec2020 to rec2020 linear
  *
  * @param rgb
  */
-export declare const rec20202rec2020Linear: (rgb: [number, number, number]) => number[];
+export declare const rec20202rec2020Linear: (rgb: RGB3) => RGB3;
 /**
  * Convert rec2020 linear to rec2020
  *
  * @param rgb
  */
-export declare const rec2020Linear2rec2020: (rgb: [number, number, number]) => number[];
+export declare const rec2020Linear2rec2020: (rgb: RGB3) => RGB3;
 /**
  * Convert rec2020 linear to XYZ D65
  *
@@ -30,7 +31,7 @@ export declare const xyzToRec2020Linear: (xyz: [number, number, number]) => [num
  *
  * @param args
  */
-export declare const rec2020ToXYZ: (args: number[]) => [number, number, number];
+export declare const rec2020ToXYZ: (args: RGB3) => RGB3;
 /**
  * Convert XYZ to Rec2020
  *
@@ -42,4 +43,4 @@ export declare const rec2020FromXYZ: (args: [number, number, number, number]) =>
  *
  * @param args
  */
-export declare const convertRec2020: (args: number[]) => number;
+export declare const convertRec2020: (args: RGBA4) => number;

package/dist/types/css/types/color-spaces/srgb.d.ts

@@ -1,6 +1,7 @@
 /**
  * SRGB related functions
  */
+import { RGB3, RGBA4 } from '../color-math';
 /**
  * Convert XYZ to linear-light sRGB
  *
@@ -18,21 +19,21 @@ export declare const rgbLinear2xyz: (xyz: [number, number, number]) => [number,
  *
  * @param rgb
  */
-export declare const srgbLinear2rgb: (rgb: [number, number, number]) => number[];
+export declare const srgbLinear2rgb: (rgb: RGB3) => RGB3;
 /**
  * Convert RGB to sRGB
  *
  * @param rgb
  */
-export declare const rgb2rgbLinear: (rgb: [number, number, number]) => number[];
+export declare const rgb2rgbLinear: (rgb: RGB3) => RGB3;
 /**
  * XYZ to SRGB
  *
  * @param args
  */
-export declare const srgbFromXYZ: (args: [number, number, number, number]) => [number, number, number, number];
+export declare const srgbFromXYZ: (args: RGBA4) => RGBA4;
 /**
  * XYZ to SRGB-Linear
  * @param args
  */
-export declare const srgbLinearFromXYZ: (args: [number, number, number, number]) => [number, number, number, number];
+export declare const srgbLinearFromXYZ: (args: RGBA4) => RGBA4;

package/dist/types/css/types/color-utilities.d.ts

@@ -1,6 +1,6 @@
 import { Context } from '../../core/context';
 import { CSSValue } from '../syntax/parser';
-import { clamp, multiplyMatrices } from './color-math';
+import { clamp, multiplyMatrices, RGB3, RGBA4 } from './color-math';
 type Color = number;
 export declare const isTransparent: (color: Color) => boolean;
 export declare const asString: (color: Color) => string;
@@ -8,18 +8,18 @@ export declare const pack: (r: number, g: number, b: number, a: number) => Color
 export declare const getTokenColorValue: (token: CSSValue, i: number) => number;
 export declare const isRelativeTransform: (tokens: CSSValue[]) => boolean;
 export { clamp, multiplyMatrices };
-export declare const packSrgb: (args: number[]) => number;
-export declare const packSrgbLinear: ([r, g, b, a]: [number, number, number, number]) => number;
-export declare const packXYZ: (args: number[]) => number;
+export declare const packSrgb: (args: RGBA4) => number;
+export declare const packSrgbLinear: (args: RGBA4) => number;
+export declare const packXYZ: (args: RGBA4) => number;
 export declare const packLab: (_context: Context, args: CSSValue[]) => number;
 export declare const packOkLab: (_context: Context, args: CSSValue[]) => number;
 export declare const packOkLch: (_context: Context, args: CSSValue[]) => number;
 export declare const packLch: (_context: Context, args: CSSValue[]) => number;
-export declare const extractHslComponents: (context: Context, args: CSSValue[]) => [number, number, number, number];
+export declare const extractHslComponents: (context: Context, args: CSSValue[]) => RGBA4;
 export declare const packHSL: (context: Context, args: CSSValue[]) => number;
-export declare const extractLchComponents: (args: CSSValue[]) => [number, number, number, number];
-export declare const extractLabComponents: (args: CSSValue[]) => [number, number, number, number];
-export declare const extractOkLchComponents: (args: CSSValue[]) => [number, number, number, number];
+export declare const extractLchComponents: (args: CSSValue[]) => RGBA4;
+export declare const extractLabComponents: (args: CSSValue[]) => RGBA4;
+export declare const extractOkLchComponents: (args: CSSValue[]) => RGBA4;
 /**
  * Convert D65 to D50
  *
@@ -80,7 +80,7 @@ export declare const oklabToXyz: (_context: Context, args: CSSValue[]) => [numbe
  *
  * @param args
  */
-export declare const xyz50ToXYZ: (args: number[]) => [number, number, number];
+export declare const xyz50ToXYZ: (args: RGBA4 | RGB3) => RGB3;
 /**
  * Does nothing, required for SUPPORTED_COLOR_SPACES_FROM_XYZ in the _color() function
  *
@@ -98,10 +98,10 @@ export declare const xyz50FromXYZ: (args: [number, number, number, number]) => [
  *
  * @param args
  */
-export declare const convertXyz: (args: number[]) => number;
+export declare const convertXyz: (args: RGBA4) => number;
 /**
  * Convert XYZ-50 to SRGB and Pack
  *
  * @param args
  */
-export declare const convertXyz50: (args: number[]) => number;
+export declare const convertXyz50: (args: RGBA4) => number;

package/dist/types/css/types/color.d.ts

@@ -3,6 +3,7 @@ import { Context } from '../../core/context';
 export type Color = number;
 export declare const color: ITypeDescriptor<Color>;
 export declare const parseColor: (context: Context, value: string) => Color;
+export declare const TRANSPARENT_COLOR: Color;
 export declare const COLORS: {
     [key: string]: Color;
 };

package/dist/types/css/types/functions/conic-gradient.d.ts

@@ -0,0 +1,11 @@
+import { CSSValue } from '../../syntax/parser';
+import { CSSConicGradientImage } from '../image';
+import { Context } from '../../../core/context';
+/**
+ * conic-gradient( [ from <angle> ]? [ at <position> ]?, <color-stop-list> )
+ *
+ * The gradient sweeps clockwise from `from <angle>` (0deg = 12 o'clock)
+ * around `at <position>` (default: center). The first comma-separated group
+ * may carry the from/at clauses; every following group is a color stop.
+ */
+export declare const conicGradient: (context: Context, tokens: CSSValue[]) => CSSConicGradientImage;

package/dist/types/css/types/functions/image-set.d.ts

@@ -0,0 +1,11 @@
+import { CSSValue } from '../../syntax/parser';
+import { ICSSImage } from '../image';
+import { Context } from '../../../core/context';
+/**
+ * image-set(url(a.png) 1x, url(b.png) 2x)
+ *
+ * Browsers keep image-set in the computed value, so the candidate matching
+ * the current devicePixelRatio is selected here: the smallest resolution >=
+ * DPR, falling back to the largest candidate below it.
+ */
+export declare const imageSet: (context: Context, tokens: CSSValue[]) => ICSSImage;

package/dist/types/css/types/functions/repeating-radial-gradient.d.ts

@@ -0,0 +1,8 @@
+import { CSSValue } from '../../syntax/parser';
+import { CSSRadialGradientImage } from '../image';
+import { Context } from '../../../core/context';
+/**
+ * repeating-radial-gradient shares the radial-gradient grammar exactly; only
+ * the image type differs, which switches the renderer to periodic stops.
+ */
+export declare const repeatingRadialGradient: (context: Context, tokens: CSSValue[]) => CSSRadialGradientImage;

package/dist/types/css/types/image.d.ts

@@ -6,11 +6,15 @@ export declare const enum CSSImageType {
     URL = 0,
     LINEAR_GRADIENT = 1,
     RADIAL_GRADIENT = 2,
-    REPEATING_LINEAR_GRADIENT = 3
+    REPEATING_LINEAR_GRADIENT = 3,
+    REPEATING_RADIAL_GRADIENT = 4,
+    CONIC_GRADIENT = 5
 }
 export declare const isLinearGradient: (background: ICSSImage) => background is CSSLinearGradientImage;
 export declare const isRadialGradient: (background: ICSSImage) => background is CSSRadialGradientImage;
 export declare const isRepeatingLinearGradient: (background: ICSSImage) => background is CSSLinearGradientImage;
+export declare const isRepeatingRadialGradient: (background: ICSSImage) => background is CSSRadialGradientImage;
+export declare const isConicGradient: (background: ICSSImage) => background is CSSConicGradientImage;
 export interface UnprocessedGradientColorStop {
     color: Color;
     stop: LengthPercentage | null;
@@ -46,11 +50,20 @@ export declare const enum CSSRadialExtent {
 }
 export type CSSRadialSize = CSSRadialExtent | LengthPercentage[];
 export interface CSSRadialGradientImage extends ICSSGradientImage {
-    type: CSSImageType.RADIAL_GRADIENT;
+    type: CSSImageType.RADIAL_GRADIENT | CSSImageType.REPEATING_RADIAL_GRADIENT;
     shape: CSSRadialShape;
     size: CSSRadialSize;
     position: LengthPercentage[];
 }
+/**
+ * conic-gradient( [ from <angle> ]? [ at <position> ]?, <color-stop-list> )
+ * `angle` is the `from` angle in radians, measured clockwise from 12 o'clock.
+ */
+export interface CSSConicGradientImage extends ICSSGradientImage {
+    type: CSSImageType.CONIC_GRADIENT;
+    angle: number;
+    position: LengthPercentage[];
+}
 export declare const image: ITypeDescriptor<ICSSImage>;
 export declare function isSupportedImage(value: CSSValue): boolean;
 export {};

package/dist/types/css/types/safe-eval.d.ts

@@ -1,8 +1,2 @@
-/**
- * Safe arithmetic expression evaluator — replaces `new Function()`.
- *
- * Supports only: numbers, +, -, *, /, parentheses.
- * Does NOT execute arbitrary code. Returns NaN on any illegal token.
- */
 declare const safeEvalArithmetic: (expr: string) => number;
 export default safeEvalArithmetic;

package/dist/types/dom/copy-css-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Computed-style copying for cloned elements.
+ *
+ * Copies every computed CSS property of the source element onto the clone's
+ * inline style so the clone renders identically without stylesheets (the
+ * clone iframe only carries the <style> tags the cloner could read).
+ */
+export declare const copyCSSStyles: <T extends HTMLElement | SVGElement>(style: CSSStyleDeclaration, target: T) => T;

package/dist/types/dom/document-cloner.d.ts

@@ -1,5 +1,7 @@
 import { Bounds } from '../css/layout/bounds';
 import { Context } from '../core/context';
+export { copyCSSStyles } from './copy-css-styles';
+export { serializeDoctype } from './iframe-mount';
 export interface CloneOptions {
     ignoreElements?: (element: Element) => boolean;
     onclone?: (document: Document, element: HTMLElement) => void;
@@ -25,8 +27,8 @@ export declare class DocumentCloner {
     clonedReferenceElement?: HTMLElement;
     private readonly documentElement;
     private readonly counters;
+    private readonly pseudoContents;
     private readonly slotCloner;
-    private quoteDepth;
     constructor(context: Context, element: HTMLElement, options: CloneConfigurations);
     toIFrame(ownerDocument: Document, windowSize: Bounds): Promise<HTMLIFrameElement>;
     createElementClone<T extends HTMLElement | SVGElement>(node: T): HTMLElement | SVGElement;
@@ -41,17 +43,5 @@ export declare class DocumentCloner {
      */
     cloneChildNodes(node: Element, clone: HTMLElement | SVGElement, copyStyles: boolean): void;
     cloneNode(node: Node, copyStyles: boolean): Node;
-    resolvePseudoContent(node: Element, clone: Element, style: CSSStyleDeclaration, pseudoElt: PseudoElementType): HTMLElement | void;
     static destroy(container: HTMLIFrameElement): boolean;
 }
-declare enum PseudoElementType {
-    BEFORE = 0,
-    AFTER = 1
-}
-export declare const copyCSSStyles: <T extends HTMLElement | SVGElement>(style: CSSStyleDeclaration, target: T) => T;
-/**
- * Serialise a document type declaration to an HTML string.
- * @internal – exported for testing only, not part of the public API.
- */
-export declare const serializeDoctype: (doctype?: DocumentType | null) => string;
-export {};

package/dist/types/dom/iframe-mount.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Mounts the cloned document into a hidden iframe and waits for it to become
+ * paintable.
+ *
+ * Extracted from DocumentCloner so the cloner only owns node-cloning strategy;
+ * this module owns the iframe lifecycle: container creation, document.write,
+ * Trusted Types, load polling, webfont/image readiness, the onclone hook and
+ * WebKit scroll-anchoring compensation.
+ */
+import { Bounds } from '../css/layout/bounds';
+import { Context } from '../core/context';
+export interface CloneMountOptions {
+    /** Cloned <html> root to adopt into the iframe document. */
+    documentElement: HTMLElement;
+    /** Clone of the render target; must exist before mounting. */
+    clonedReferenceElement: HTMLElement | undefined;
+    /** nodeName of the original render target, for error messages. */
+    referenceElementName: string;
+    /** [clonedNode, scrollLeft, scrollTop] pairs captured during cloning. */
+    scrolledElements: [Element, number, number][];
+    /** Consumer hook, invoked with the cloned document before measuring. */
+    onclone?: (document: Document, element: HTMLElement) => void;
+    /** Mount the iframe inside a shadow root instead of <body>. */
+    container?: HTMLElement | ShadowRoot;
+}
+export declare const createIFrameContainer: (ownerDocument: Document, bounds: Bounds, customContainer?: HTMLElement | ShadowRoot) => HTMLIFrameElement;
+/**
+ * Serialise a document type declaration to an HTML string.
+ * @internal – exported for testing only, not part of the public API.
+ */
+export declare const serializeDoctype: (doctype?: DocumentType | null) => string;
+/**
+ * Point the clone's relative URLs at the source document.
+ * @internal – exported for testing only, not part of the public API.
+ */
+export declare const addBase: (targetELement: HTMLElement, baseUri: string) => void;
+export declare const mountCloneInIFrame: (context: Context, ownerDocument: Document, windowSize: Bounds, mount: CloneMountOptions) => Promise<HTMLIFrameElement>;

package/dist/types/dom/pseudo-content.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Pseudo-element (::before / ::after) content resolution.
+ *
+ * Extracted from DocumentCloner: the cloner creates surrogate
+ * `<html2canvaspseudoelement>` nodes carrying the pseudo's computed styles and
+ * resolved content tokens (strings, url() images, attr(), counter(s), and
+ * quotes) as children of the cloning element. The hide classes ensure the
+ * surrogate itself is never painted; only its children are.
+ */
+import { CounterState } from '../css/types/functions/counter';
+import { Context } from '../core/context';
+export declare enum PseudoElementType {
+    BEFORE = 0,
+    AFTER = 1
+}
+/**
+ * Inject the stylesheet that hides pseudo-element surrogate containers.
+ * Called on the cloned <body> so the surrogates themselves never render.
+ */
+export declare const createPseudoHideStyles: (body: HTMLElement, cspNonce?: string) => void;
+/**
+ * Resolves computed `content` of ::before/::after into surrogate DOM nodes.
+ *
+ * One instance per DocumentCloner: `quoteDepth` tracks open-quote/close-quote
+ * pairing across the whole clone walk, shared with the cloner's counter state.
+ */
+export declare class PseudoContentResolver {
+    private readonly context;
+    private readonly counters;
+    private quoteDepth;
+    constructor(context: Context, counters: CounterState);
+    resolvePseudoContent(node: Element, clone: Element, style: CSSStyleDeclaration, pseudoElt: PseudoElementType): HTMLElement | void;
+}

package/dist/types/dom/replaced-elements/iframe-element-container.d.ts

@@ -1,7 +1,7 @@
 import { ElementContainer } from '../element-container';
-import { Color } from '../../css/types/color';
+import { type Color } from '../../css/types/color';
 import { Context } from '../../core/context';
-type ParseTreeFunction = (context: Context, node: Node) => ElementContainer;
+type ParseTreeFunction = (context: Context, node: HTMLElement) => ElementContainer;
 export declare class IFrameElementContainer extends ElementContainer {
     src: string;
     width: number;

package/dist/types/options.d.ts

@@ -55,8 +55,14 @@ export type Options = CloneOptions & WindowOptions & RenderOptions & ContextOpti
     onError?: (error: Error) => void;
     /**
      * Called at key milestones during the render pipeline.
-     * `phase` is one of: 'clone', 'parse', 'layout', 'render'.
-     * `progress` is 0..100 percentage estimate.
+     * `phase` is one of: 'clone' | 'parse' | 'preload' | 'layout' | 'render'.
+     * `progress` is a coarse 0–100 estimate. Milestones:
+     *   clone 10 (cloning starts), clone 30 (cloned document ready),
+     *   parse 50 (style/DOM parse done),
+     *   preload 50–60 (image fetching; one event per settled batch),
+     *   layout 60 (bounds + images ready),
+     *   render 90 (canvas painted), render 100 (cleanup done).
+     * Callback exceptions are caught and logged, never fatal.
      */
     onProgress?: (phase: string, progress: number) => void;
 };

package/dist/types/render/canvas/background-renderer.d.ts

@@ -66,6 +66,25 @@ export declare class BackgroundRenderer {
      * Render a radial gradient background
      */
     private renderRadialGradient;
+    /**
+     * Render a repeating radial gradient.
+     *
+     * Canvas radial gradients have no native repeat mode, so the stop list is
+     * stacked: with period p (the last stop position) the stops are re-added
+     * k*p + s for k = 0..ceil(radius / p) - 1, clipped to the [0, 1] gradient
+     * range. The full repeating gradient is then rasterised with the same
+     * ellipse pattern trick as the plain radial renderer.
+     */
+    private renderRepeatingRadialGradient;
+    /**
+     * Render a conic gradient.
+     *
+     * Color stops are angular: percentages of the full 360° sweep, normalised
+     * by processing against a line length of 1. Canvas createConicGradient
+     * measures its start angle in the same clockwise-from-12-o'clock space as
+     * CSS `from <angle>`.
+     */
+    private renderConicGradient;
     /**
      * Render a repeating pattern with offset
      *

package/dist/types/render/canvas/border-image-renderer.d.ts

@@ -9,10 +9,59 @@
 import { BorderImageSlice } from '../../css/property-descriptors/border-image-slice';
 import { BorderImageRepeat } from '../../css/property-descriptors/border-image-repeat';
 import { Bounds } from '../../css/layout/bounds';
+export interface BorderImageSides {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+/**
+ * Resolve border-image-width to per-side pixel widths. `auto` uses the
+ * corresponding border width, numbers multiply it, lengths are absolute and
+ * percentages refer to the border image area (width for left/right, height
+ * for top/bottom).
+ */
+export declare const resolveBorderImageWidths: (width: {
+    top: {
+        kind: string;
+        value?: number;
+    };
+    right: {
+        kind: string;
+        value?: number;
+    };
+    bottom: {
+        kind: string;
+        value?: number;
+    };
+    left: {
+        kind: string;
+        value?: number;
+    };
+} | null, borderWidths: [number, number, number, number], area: Bounds) => [number, number, number, number];
+/** Resolve border-image-outset to per-side pixel offsets (numbers multiply the border width). */
+export declare const resolveBorderImageOutset: (outset: {
+    top: {
+        kind: string;
+        value?: number;
+    };
+    right: {
+        kind: string;
+        value?: number;
+    };
+    bottom: {
+        kind: string;
+        value?: number;
+    };
+    left: {
+        kind: string;
+        value?: number;
+    };
+} | null, borderWidths: [number, number, number, number]) => BorderImageSides;
 export declare class BorderImageRenderer {
     private readonly ctx;
     constructor(ctx: CanvasRenderingContext2D);
-    renderBorderImage(bounds: Bounds, image: HTMLImageElement, slice: BorderImageSlice, repeat: BorderImageRepeat, borderTopWidth: number, borderRightWidth: number, borderBottomWidth: number, borderLeftWidth: number): void;
+    renderBorderImage(bounds: Bounds, image: HTMLImageElement, slice: BorderImageSlice, repeat: BorderImageRepeat, borderTopWidth: number, borderRightWidth: number, borderBottomWidth: number, borderLeftWidth: number, outset?: BorderImageSides): void;
     private drawRegion;
     private drawRepeatedEdge;
 }

package/dist/types/render/canvas/box-shadow-geometry.d.ts

@@ -0,0 +1,3 @@
+import { Path } from '../path';
+export declare const shadowRadius: (radius: number, spread: number) => number;
+export declare const spreadShadowPath: (paths: Path[], spread: number) => Path[];

package/dist/types/render/canvas/box-shadow-painter.d.ts

@@ -0,0 +1,13 @@
+import { BoxShadow } from '../../css/property-descriptors/box-shadow';
+import { ElementPaint } from '../stacking-context';
+import { SurfaceBudget } from './surface-bounds';
+interface ShadowOptions {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    scale: number;
+    signal?: AbortSignal;
+}
+export declare const paintBoxShadow: (ctx: CanvasRenderingContext2D, paint: ElementPaint, shadow: BoxShadow[number], options: ShadowOptions, budget: SurfaceBudget) => Promise<void>;
+export {};

package/dist/types/render/canvas/box-shadow-transform.d.ts

@@ -0,0 +1,16 @@
+import { Bounds } from '../../css/layout/bounds';
+export interface ShadowTransform {
+    a: number;
+    b: number;
+    c: number;
+    d: number;
+    e: number;
+    f: number;
+}
+export interface ShadowSpace {
+    matrix: ShadowTransform;
+    viewport: Bounds;
+    scale: number;
+    uniform: boolean;
+}
+export declare const shadowSpace: (matrix: ShadowTransform, width: number, height: number) => ShadowSpace | null;

package/dist/types/render/canvas/canvas-renderer.d.ts

@@ -45,11 +45,24 @@ export declare class CanvasRenderer {
     private readonly borderImageRenderer;
     private readonly effectsRenderer;
     private readonly textRenderer;
+    private readonly textClipRenderer;
     private legacySubtree;
     constructor(context: Context, options: RenderConfigurations, surfaceRoot?: ElementPaint | undefined, surfaceBudget?: SurfaceBudget);
     renderStack(stack: StackingContext): Promise<void>;
     private canComposite;
     private renderCompositedStack;
+    /**
+     * Composite an alpha mask onto a finished element surface: all mask
+     * layers are painted additively into a mask surface, then kept pixels are
+     * selected with destination-in.
+     */
+    private applyMask;
+    /**
+     * Mirror the element surface in the given direction and offset, optionally
+     * masked (the -webkit-box-reflect mask applies in element space, so it is
+     * composited in the mirrored space where the reflection was drawn).
+     */
+    private drawReflection;
     renderNode(paint: ElementPaint): Promise<void>;
     /**
      * Helper method to render text with paint order support
@@ -63,23 +76,16 @@ export declare class CanvasRenderer {
     formatPath(paths: Path[]): void;
     private renderSurfaceBoxShadow;
     renderNodeBackgroundAndBorders(paint: ElementPaint): Promise<void>;
-    render(element: ElementContainer): Promise<HTMLCanvasElement>;
     /**
-     * Render background clipped to text shape using offscreen canvas with destination-in compositing.
-     * This implements background-clip: text support.
-     *
-     * Algorithm:
-     *   1. Draw background (color + images) onto an offscreen canvas
-     *   2. Use destination-in compositing to clip the background to the text glyph shapes
-     *   3. Composite the result back onto the main canvas
-     *
-     * The offscreen canvas uses CSS-pixel dimensions (not device-pixel) because the
-     * background renderer handles scaling internally via BackgroundRenderer options.
+     * Draw the element outline: a single closed stroke around the border box,
+     * offset outwards. Outlines paint atop content and do not affect layout.
      */
-    private renderTextClippedBackground;
+    private renderOutline;
     /**
-     * Render text glyphs one-by-one as a mask, applying letter-spacing between characters.
-     * This ensures the mask matches how the text renderer lays out the characters.
+     * Filter the already-painted content beneath the element's border box and
+     * paint the result back, approximating CSS backdrop-filter for the
+     * blur/drop-shadow subset supported by parseSimpleFilter.
      */
-    private renderTextMaskWithLetterSpacing;
+    private renderBackdropFilter;
+    render(element: ElementContainer): Promise<HTMLCanvasElement>;
 }

package/dist/types/render/canvas/mask-renderer.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Mask Renderer
+ *
+ * Paints CSS mask-image layers into a mask surface (alpha mask) which the
+ * caller composites onto the element surface via `destination-in`.
+ *
+ * Value grammars are shared with background-image (position/size/repeat), so
+ * the layer maths mirrors the background renderer but works in the local
+ * coordinate space of the mask positioning area (default: border box) and
+ * always fills the whole area — a mask surface is about alpha coverage, not
+ * about what is visible underneath.
+ *
+ * Limitations (v1): repeating gradients render their base cycle; mask-mode is
+ * alpha-only; layers composite with source-over (≈ the default `add`).
+ */
+import { ICSSImage } from '../../css/types/image';
+import { LengthPercentage } from '../../css/types/length-percentage';
+import { BACKGROUND_REPEAT } from '../../css/property-descriptors/background-repeat';
+import { BackgroundSizeInfo } from '../../css/property-descriptors/background-size';
+export interface MaskLayerStyles {
+    maskPosition: LengthPercentage[][];
+    maskRepeat: BACKGROUND_REPEAT[];
+    maskSize: BackgroundSizeInfo[][];
+}
+export interface MaskArea {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+export type MaskImageSource = HTMLImageElement | HTMLCanvasElement;
+/**
+ * Paint every mask layer into `ctx` (expected to already be scaled to device
+ * pixels and translated so the page origin maps correctly).
+ */
+export declare const paintMaskLayers: (ctx: CanvasRenderingContext2D, layers: ICSSImage[], styles: MaskLayerStyles, area: MaskArea, matchImage: (url: string) => Promise<MaskImageSource | undefined>) => Promise<void>;