/** * Shared gradient rasterisation primitives. * * Canvas 2D has no repeating gradients and no native elliptical radial * gradients, so every gradient painter (background, mask, border-image) needs * the same two building blocks: * * 1. periodic stop stacking — the one-cycle stop list re-added k·period + s * for k = 0..cycles-1, clamped to the [0, 1] gradient range; * 2. ellipse rasterisation — a circle of radius rx scaled vertically by * ry / rx, painted on a 2rx × 2ry offscreen canvas. * * Centralising them keeps the subtle invariants in one place: * - stop positions are normalised against rx (the canvas gradient radius), * NOT the diameter — normalising against the diameter halves every * absolute-px stop; * - the fill must cover the pre-scale circle (fillRect of the rx*2 square), * not the post-scale ellipse box — a user-space (2rx × 2ry) rect shrinks * vertically under the y-scale and clips the ellipse whenever ry < rx; * - outside the ending shape a radial gradient continues with its last * colour, which callers must paint across the full area first. */ import { UnprocessedGradientColorStop, GradientColorStop } from '../../css/types/image'; export interface StringColorStop { stop: number; color: string; } /** * Stack the one-cycle stop list periodically across [0, 1]. Returns null for * a degenerate period (all stops clamped to one point) — CSS renders the * last colour across the whole area in that case, and callers should paint * the last colour instead of stacking. */ export declare const stackRepeatingStops: (processed: GradientColorStop[]) => StringColorStop[] | null; /** Map parsed stops to string-colour stops clamped into the canvas [0, 1] range. */ export declare const toCanvasStops: (processed: GradientColorStop[]) => StringColorStop[]; export interface RasterizedRadialGradient { /** 2rx × 2ry device-pixel canvas holding the gradient ellipse. */ canvas: HTMLCanvasElement; /** Colour beyond the ending shape (the last stop's colour). */ lastColor: string; rx: number; ry: number; } /** * Rasterise a radial gradient's ending-shape ellipse to an offscreen canvas. * * The ellipse is a circle of radius rx scaled vertically by ry / rx around * the canvas centre, so the offscreen canvas is the ellipse's full 2rx × 2ry * bounding box and callers draw it at (centre - rx, centre - ry). Handles the * repeating variant by stacking stops across the [0, 1] gradient range. */ export declare const rasterizeRadialGradient: (ownerDocument: Document, rx: number, ry: number, stops: UnprocessedGradientColorStop[], repeating?: boolean) => RasterizedRadialGradient | null;