@react-x11/components 0.12.0 → 0.14.0

package/dist/html/paint.js

@@ -20,11 +20,13 @@
 // back on the laid-out lines is exactly what that module already knows how to
 // draw.
 import { canFill, lineBands, paintRunBackgrounds, paintRunRules, } from '../richtext/runs.js';
-import { alphaOf, inkColor, isTransparent, resolve } from './css/values.js';
-import { blend, borderShades } from './css/color.js';
+import { AUTO, alphaOf, inkColor, isTransparent, resolve, } from './css/values.js';
+import { SCHEME_COLORS, blend, borderShades } from './css/color.js';
 import { CONTAIN_LAYOUT, CONTAIN_PAINT, CONTAIN_SIZE, copyStyle, masked, scrolls, } from './css/style.js';
-import { contained } from './layout/block.js';
-import { BOX_RAISES, LINE_BOX_RAISES, PADDED_FACES, Box, CLAMPED, CLIPPED_CELLS, COLLAPSED_CELLS, FADED_BLOCKS, PAINT_ORDER, INLINE_OFFSETS, MOVED_OFF_LINES, SHADOWED_TEXT, SHIFTED_LINES, TEXT_RAISES, TEXT_SHIFTS, } from './layout/boxes.js';
+import { LARGEST } from './css/calc.js';
+import { invert, mapRect, transformed } from './css/transform.js';
+import { contained, placedMatrix } from './layout/block.js';
+import { BOX_RAISES, LINE_BOX_RAISES, PADDED_FACES, Box, CLAMPED, CLIPPED_CELLS, COLLAPSED_CELLS, COLUMN_LINES, COLUMN_PIECES, COLUMN_ROWS, columned, FADED_BLOCKS, PAINT_ORDER, INLINE_OFFSETS, MOVED_OFF_LINES, SHADOWED_TEXT, SHIFTED_LINES, TEXT_RAISES, TEXT_SHIFTS, } from './layout/boxes.js';
 import { CLIPPED_TEXT, clipBoxOf, depthOf, inklessLayout, layoutOffsetOf, layoutOffsets, } from './layout/inline.js';
 import { tableGrid } from './layout/grid.js';
 import { SvgDrawing, inlineDrawing } from './svg.js';
@@ -43,6 +45,33 @@ import { SvgDrawing, inlineDrawing } from './svg.js';
  * (`layoutDocument`).
  */
 export const OUT_OF_FLOW_REACH = new WeakMap();
+/**
+ * How far above and below a block's lines its inline content draws, at
+ * most, by the array its lines are: glyphs taller than a `line-height` under
+ * their face's height, and an atomic's ink past the line it is on. The
+ * slack a paint's cull of the lines takes on top of their own rows
+ * (`paintLines`); none for the lines of almost every block, whose content
+ * is inside them.
+ */
+const LINE_INK = new WeakMap();
+/**
+ * For a box painted through a matrix (`placedMatrix`), the bounds of what
+ * it and its descendants draw before the matrix is applied: what
+ * `boundsX`… would have been, which are where it puts them. The paint
+ * inside the box, and a point taken back into it, are in these.
+ */
+const UNTRANSFORMED = new WeakMap();
+/** The bounds of what a box painted through a matrix draws, in its own
+ *  coordinates: asked of a box `placedMatrix` answers for, whose entry the
+ *  last `computePaintBounds` wrote. */
+export function ownBounds(box) {
+    return (UNTRANSFORMED.get(box) ?? {
+        x: box.boundsX,
+        y: box.boundsY,
+        width: box.boundsWidth,
+        height: box.boundsHeight,
+    });
+}
 export function computePaintBounds(box, moved = false) {
     // A box with no rectangle of its own gives only what it holds: nothing,
     // until a child with bounds is met.
@@ -170,8 +199,21 @@ export function computePaintBounds(box, moved = false) {
     // above has its bounds already: walked from its line as well, an
     // inline-block in an inline-block was walked twice a level, and twenty of
     // them took seventy milliseconds a layout.
+    //
+    // And a line's text is drawn from its face's ascent above the baseline to
+    // its descent below, its content area (CSS 2.1 10.6.1), which is past the
+    // line box wherever `line-height` is under the face's height: a line box
+    // is its line-height, whatever its glyphs are. Zen Garden 215's 91px title
+    // sits on the 20px lines its body's `line-height: 1.25em` gave it, as a
+    // length, and hangs 40px above them and 40px below — ink that a repaint
+    // of those rows has to reach, where the lines alone do not.
+    let above = 0;
+    let below = 0;
     if (lines) {
+        const movedOff = MOVED_OFF_LINES.get(lines);
         for (const line of lines) {
+            let top = line.y;
+            let bottom = line.y + line.height;
             for (const placed of line.atomics) {
                 const atomic = placed.box;
                 if (atomic.boundsY === Infinity)
@@ -180,9 +222,69 @@ export function computePaintBounds(box, moved = false) {
                 y1 = Math.min(y1, atomic.boundsY);
                 x2 = Math.max(x2, atomic.boundsX + atomic.boundsWidth);
                 y2 = Math.max(y2, atomic.boundsY + atomic.boundsHeight);
+                top = Math.min(top, atomic.boundsY);
+                bottom = Math.max(bottom, atomic.boundsY + atomic.boundsHeight);
+            }
+            // what `position: relative` moved off a line the cull finds on its
+            // own (`reachedOff`), wherever it went
+            if (movedOff?.has(line))
+                continue;
+            for (const text of line.texts) {
+                const natural = text.layout.lines[text.layoutLine];
+                if (!natural)
+                    continue;
+                const baseline = text.drawY + natural.baseline;
+                top = Math.min(top, baseline - (natural.ascent ?? 0));
+                bottom = Math.max(bottom, baseline + (natural.descent ?? 0));
+            }
+            if (top < line.y) {
+                y1 = Math.min(y1, top);
+                above = Math.max(above, line.y - top);
+            }
+            if (bottom > line.y + line.height) {
+                y2 = Math.max(y2, bottom);
+                below = Math.max(below, bottom - line.y - line.height);
             }
         }
     }
+    if (lines && (above > 0 || below > 0))
+        LINE_INK.set(lines, { above, below });
+    else if (lines)
+        LINE_INK.delete(lines);
+    // a `clip-path` cuts the box and all it holds: no ink past the path, and
+    // none where it leaves nothing — though the scrollable overflow is what
+    // it was, as a browser has it, which is why a page that hides a box with
+    // one makes it a pixel square as well
+    if (own && box.style.clipPath) {
+        const { rect } = clipPathOf(box, DOCUMENT);
+        x1 = Math.max(x1, rect.x);
+        y1 = Math.max(y1, rect.y);
+        x2 = Math.min(x2, rect.x + rect.w);
+        y2 = Math.min(y2, rect.y + rect.h);
+        if (!(x2 > x1 && y2 > y1))
+            x1 = Infinity;
+    }
+    // A box that turns, scales or skews draws what it holds through its
+    // matrix (`paintTransformed`): its ink is where that puts it, the
+    // rectangle around the one it would have filled, and the one it would
+    // have filled is kept for the paint inside it, which is in its own
+    // coordinates. One flattened to nothing draws nothing.
+    const matrix = own ? placedMatrix(box) : null;
+    if (matrix && x1 !== Infinity) {
+        UNTRANSFORMED.set(box, { x: x1, y: y1, width: x2 - x1, height: y2 - y1 });
+        if (invert(matrix)) {
+            // no further than a length reaches (`LARGEST`): a page's
+            // `scale(1e30)` is a box as large as a browser holds one, and no
+            // larger
+            const to = mapRect(matrix, x1, y1, x2 - x1, y2 - y1);
+            x1 = Math.max(to.x, -LARGEST);
+            y1 = Math.max(to.y, -LARGEST);
+            x2 = Math.min(to.x + to.width, LARGEST);
+            y2 = Math.min(to.y + to.height, LARGEST);
+        }
+        else
+            x1 = Infinity;
+    }
     if (x1 === Infinity) {
         // nothing to draw: no damage meets it, and no parent takes it in
         box.boundsX = Infinity;
@@ -207,13 +309,21 @@ export function computePaintBounds(box, moved = false) {
     // whether the box clips only matters where its content reaches past it,
     // and its style is one more object a walk of every box would read
     const end = empty ? -Infinity : box.y + box.height;
-    if (bottom <= end)
-        return end;
-    const style = box.style;
-    return box.parent &&
-        (style.overflowX !== 'visible' || style.overflowY !== 'visible')
-        ? end
-        : bottom;
+    let reach = end;
+    if (bottom > end) {
+        const style = box.style;
+        reach =
+            box.parent &&
+                (style.overflowX !== 'visible' || style.overflowY !== 'visible')
+                ? end
+                : bottom;
+    }
+    // the scrollable overflow of a transformed box is where its transform
+    // puts it (CSS Overflow 3, 2.2)
+    if (!matrix || reach === -Infinity)
+        return reach;
+    const to = mapRect(matrix, box.x, box.y, box.width, reach - box.y);
+    return Math.min(to.y + to.height, LARGEST);
 }
 /**
  * Whether a box has a rectangle of its own to draw in. An inline box has
@@ -363,12 +473,27 @@ export function paintDocument(ctx, tree, options) {
         return;
     ctx.save();
     const canvas = canvasBackground(tree);
+    const scheme = rootScheme(tree);
+    if (scheme !== tree.paletteScheme) {
+        // A document is drawn on the window's own ground, the palette's, as an
+        // embedded one is on a transparent canvas. Where its root's colour
+        // scheme is not the scheme of what it is embedded in, its canvas is
+        // opaque, in the `Canvas` colour of its own (CSS Color Adjust 1, 2.2):
+        // a page that says it is light, and sets its text dark on no
+        // background, is not read against a dark window.
+        const area = canvasArea(tree.root, options);
+        if (area) {
+            ctx.fillStyle = SCHEME_COLORS[scheme].canvas;
+            ctx.fillRect(area.x, area.y, area.w, area.h);
+        }
+    }
     if (canvas)
         paintCanvas(ctx, canvas, tree.root, options);
     paintBox(ctx, tree.root, {
         ...options,
         canvasSource: canvas?.source,
         negative: tree.negative,
+        selectionStyler: options.selection ? tree.selectionStyler : null,
     });
     ctx.restore();
 }
@@ -414,6 +539,24 @@ function canvasBackground(tree) {
         ? { style: body.style, source: body, anchor: top }
         : null;
 }
+/** The used colour scheme of the document's root element: the `<html>`'s,
+ *  or that of whichever box stands in for it (`canvasBackground`). */
+function rootScheme(tree) {
+    if (tree.impliedHtml)
+        return tree.impliedHtml.colorScheme;
+    return (childNamed(tree.root, 'html') ?? tree.root).style.colorScheme;
+}
+/** The canvas, cut to what is being painted: the whole element where the
+ *  host says what that is, and else the root box. */
+function canvasArea(root, options) {
+    const whole = options.canvas ?? {
+        x: root.x + options.originX,
+        y: root.y + options.originY,
+        width: root.width,
+        height: root.height,
+    };
+    return clampRect(options, Math.round(whole.x), Math.round(whole.y), Math.ceil(whole.width), Math.ceil(whole.height));
+}
 /** A box's child element of that name, or one inside the anonymous boxes
  *  it is wrapped in: a `<body>` in an `<html>` set `display: table` is in
  *  an anonymous row and cell. */
@@ -430,13 +573,7 @@ function childNamed(box, name) {
     return null;
 }
 function paintCanvas(ctx, { style: source, anchor }, root, options) {
-    const whole = options.canvas ?? {
-        x: root.x + options.originX,
-        y: root.y + options.originY,
-        width: root.width,
-        height: root.height,
-    };
-    const area = clampRect(options, Math.round(whole.x), Math.round(whole.y), Math.ceil(whole.width), Math.ceil(whole.height));
+    const area = canvasArea(root, options);
     if (!area)
         return;
     const layers = layersOf(source) ?? [source];
@@ -447,7 +584,7 @@ function paintCanvas(ctx, { style: source, anchor }, root, options) {
             ctx.fillStyle = inkColor(style.backgroundColor, style.color);
             ctx.fillRect(area.x, area.y, area.w, area.h);
         }
-        if (style.backgroundGradient && ctx.createLinearGradient && visible) {
+        if (style.backgroundGradient && visible) {
             // sized by the root element's box and repeated down the canvas, as a
             // browser does — the stripes a short page with a gradient on its
             // body shows — or by the viewport, where it is fixed
@@ -615,28 +752,289 @@ function paintBox(ctx, box, options) {
         return;
     }
     // `clip` shows the part of an absolutely positioned box it names, its own
-    // background and borders among it (CSS 2.1 11.1.2) — written out here,
-    // not called: a frame more a level and a deep document ran out of stack
-    const clip = box.outOfFlow && box.style.clip ? clipOf(box, options) : null;
-    if (!clip || (clip.w > 0 && clip.h > 0)) {
-        const clipped = !!clip && pushClip(ctx, clip, null);
-        paintContent(ctx, box, options);
-        if (clipped)
+    // background and borders among it (CSS 2.1 11.1.2), and `clip-path` the
+    // part of any box (`pushOwnClips`) — the content painted here, not in a
+    // call of its own: a frame more a level and a deep document ran out of
+    // stack
+    const pushed = pushOwnClips(ctx, box, options);
+    if (pushed >= 0) {
+        paintContent(ctx, box, pathClips(box) ? underPath(options) : options);
+        for (let i = 0; i < pushed; i += 1)
             ctx.restore();
     }
     if (fade)
         ctx.restore();
 }
-/** A box and what it holds, cut to its `clip` as `paintBox` cuts it. */
+/** How large a surface a transformed box is drawn on: a large window's
+ *  worth of pixels twice over, and no side longer than a pixmap's may be. */
+const RASTER_LIMIT = 16 * 1024 * 1024;
+const RASTER_SIDE = 16384;
+/** What XRender carries a picture's transform in is 16.16 fixed point: a
+ *  number past this does not fit, and is thrown out of the request's
+ *  encoder. */
+const FIXED_LIMIT = 32000;
+/**
+ * A box that turns, scales or skews (CSS Transforms 1): painted as it was
+ * laid out, through its matrix — about its `transform-origin`, where its
+ * translation has already put it (`placedMatrix`). What it holds is
+ * painted with it, as the stacking context it is (`stacksLayers`), culled
+ * against the damage taken back through the matrix.
+ *
+ * The native contexts draw everything through a matrix, a text layout's
+ * outlines among it, glyphs and all (`scalesText`). ntk's draws paths
+ * through one; a glyph it draws as it was shaped, upright and at its size,
+ * where the matrix puts its origin, and an image through a transform the
+ * server holds in fixed point, which a picture drawn small far across a
+ * window does not fit. So there only a box that is paths and flat colour —
+ * an icon, a chevron, a spinner — is drawn through the matrix, and any
+ * other on a surface of its own, as it was laid out, with the surface
+ * drawn through the matrix (`paintRaster`): a picture of its text rather
+ * than the text, resampled, and right about where it is and which way up.
+ *
+ * A context with no `transform` draws the box where it was laid out: the
+ * headless mock, which draws nothing, and a recording one.
+ */
+function paintTransformed(ctx, box, options) {
+    const matrix = placedMatrix(box);
+    if (!matrix) {
+        paintBox(ctx, box, options);
+        return;
+    }
+    if (!intersects(box, options) ||
+        COLLAPSED_CELLS.has(box) ||
+        CLAMPED.has(box)) {
+        return;
+    }
+    if (typeof ctx.transform !== 'function') {
+        paintPlaced(ctx, box, options);
+        return;
+    }
+    // In the window's coordinates, where the document's origin is the
+    // options': T(origin) · matrix · T(-origin). And about an origin moved
+    // with the box's corner to the pixel it is drawn from: what is painted is
+    // snapped to the pixel grid a box at a time, so a box a fraction of a
+    // pixel down the page is drawn from a whole one, and turned about where
+    // it was laid out it came back off the grid — a square mirrored onto
+    // itself showed a line of what was under it along each side. A browser
+    // snaps a transformed box's corner before its transform the same way.
+    const left = box.x + options.originX;
+    const top = box.y + options.originY;
+    const ox = options.originX + Math.round(left) - left;
+    const oy = options.originY + Math.round(top) - top;
+    const [a, b, c, d] = matrix;
+    const through = [
+        a,
+        b,
+        c,
+        d,
+        matrix[4] + ox - (a * ox + c * oy),
+        matrix[5] + oy - (b * ox + d * oy),
+    ];
+    const back = invert(through);
+    if (!back)
+        return;
+    const damage = options.damage;
+    const inside = {
+        ...options,
+        damage: damage && mapRect(back, damage.x, damage.y, damage.width, damage.height),
+    };
+    if (ctx.scalesText !== true &&
+        !drawnAsPaths(box) &&
+        paintRaster(ctx, box, inside, through)) {
+        return;
+    }
+    ctx.save();
+    ctx.transform(a, b, c, d, through[4], through[5]);
+    paintPlaced(ctx, box, inside);
+    ctx.restore();
+}
+/**
+ * Whether a box's style turns, scales or skews it, which is asked before
+ * every box that may be one is painted (`paintPositioned`, `paintLines`) —
+ * there, and not in `paintBox`, whose frame is one of three a level of
+ * nesting costs the stack: a name more in it, and a document a thousand
+ * boxes deep ran out.
+ */
+function turns(box) {
+    const style = box.style;
+    return (style.transform !== null || style.rotate !== null || style.scale !== null);
+}
+/**
+ * `paintBox` for a box whose ink bounds are not in the coordinates it is
+ * being painted in, and so is not culled by them: one painted through a
+ * matrix, in its own (`paintTransformed`).
+ */
+function paintPlaced(ctx, box, options) {
+    const opacity = opacityOf(box);
+    if (opacity <= 0)
+        return;
+    const fade = opacity < 1 && typeof ctx.globalAlpha === 'number';
+    if (fade) {
+        ctx.save();
+        ctx.globalAlpha = ctx.globalAlpha * opacity;
+    }
+    if (!masked(box.style) || !paintMasked(ctx, box, options)) {
+        paintClipped(ctx, box, options);
+    }
+    if (fade)
+        ctx.restore();
+}
+/**
+ * Whether all a box and what it holds draw is paths and flat colour:
+ * backgrounds, borders, outlines and inline drawings — no text and no list
+ * marker, whose glyphs a context may not turn, and no image, gradient,
+ * shadow or mask, which one draws through a picture's transform
+ * (`paintTransformed`).
+ */
+function drawnAsPaths(box) {
+    if (box.subtreeTextEnd > box.subtreeTextStart)
+        return false;
+    const stack = [box];
+    while (stack.length) {
+        const at = stack.pop();
+        if (at.marker || at.replaced === 'image')
+            return false;
+        const style = at.style;
+        if (style.backgroundImage !== null ||
+            style.backgroundGradient !== null ||
+            style.backgroundImages !== null ||
+            style.boxShadow !== null ||
+            style.borderImage.source !== null ||
+            masked(style)) {
+            return false;
+        }
+        for (const child of at.children)
+            stack.push(child);
+    }
+    return true;
+}
+/**
+ * A transformed box painted on a surface of its own, as it was laid out,
+ * and the surface drawn through its matrix: the part of what it draws that
+ * the damage reaches. True where that is done — or is nothing to do, or
+ * cannot be: a part too large for a surface, or a matrix that does not fit
+ * the fixed point a picture's transform is sent in, which is one that draws
+ * the box a thirtieth its size far across a window, or flatter than can be
+ * seen. None of it is drawn then. False where the context has no surface to
+ * draw on, and the caller draws the box through the matrix itself.
+ */
+function paintRaster(ctx, box, options, through) {
+    if (!options.surface || !ctx.drawImage)
+        return false;
+    const own = ownBounds(box);
+    let x0 = Math.floor(own.x + options.originX);
+    let y0 = Math.floor(own.y + options.originY);
+    let x1 = Math.ceil(own.x + own.width + options.originX);
+    let y1 = Math.ceil(own.y + own.height + options.originY);
+    const damage = options.damage;
+    if (damage) {
+        // a pixel more each way: the edge of what is drawn is sampled from
+        // beside it
+        x0 = Math.max(x0, Math.floor(damage.x) - 1);
+        y0 = Math.max(y0, Math.floor(damage.y) - 1);
+        x1 = Math.min(x1, Math.ceil(damage.x + damage.width) + 1);
+        y1 = Math.min(y1, Math.ceil(damage.y + damage.height) + 1);
+    }
+    const w = x1 - x0;
+    const h = y1 - y0;
+    if (!(w > 0 && h > 0))
+        return true;
+    if (w > RASTER_SIDE || h > RASTER_SIDE || w * h > RASTER_LIMIT)
+        return true;
+    // what the context makes of the draw below: the picture's transform is
+    // the inverse of its matrix after the surface's place in it
+    const placed = invert([
+        through[0],
+        through[1],
+        through[2],
+        through[3],
+        through[0] * x0 + through[2] * y0 + through[4],
+        through[1] * x0 + through[3] * y0 + through[5],
+    ]);
+    if (!placed || placed.some((n) => Math.abs(n) > FIXED_LIMIT))
+        return true;
+    const surface = options.surface(w, h);
+    if (!surface)
+        return false;
+    try {
+        // the surface's own coordinates, the window's moved to its corner
+        const on = {
+            ...options,
+            originX: options.originX - x0,
+            originY: options.originY - y0,
+            damage: { x: 0, y: 0, width: w, height: h },
+            canvas: options.canvas && {
+                ...options.canvas,
+                x: options.canvas.x - x0,
+                y: options.canvas.y - y0,
+            },
+            viewport: options.viewport && {
+                ...options.viewport,
+                x: options.viewport.x - x0,
+                y: options.viewport.y - y0,
+            },
+            clips: [],
+        };
+        paintPlaced(surface.getContext('2d'), box, on);
+        ctx.save();
+        ctx.transform(through[0], through[1], through[2], through[3], through[4], through[5]);
+        ctx.drawImage(surface, x0, y0);
+        ctx.restore();
+        return true;
+    }
+    finally {
+        surface.destroy?.();
+    }
+}
+/** A box and what it holds, cut to its `clip` and its `clip-path` as
+ *  `paintBox` cuts it. */
 function paintClipped(ctx, box, options) {
-    const clip = box.outOfFlow && box.style.clip ? clipOf(box, options) : null;
-    if (clip && !(clip.w > 0 && clip.h > 0))
+    const pushed = pushOwnClips(ctx, box, options);
+    if (pushed < 0)
         return;
-    const clipped = !!clip && pushClip(ctx, clip, null);
-    paintContent(ctx, box, options);
-    if (clipped)
+    paintContent(ctx, box, pathClips(box) ? underPath(options) : options);
+    for (let i = 0; i < pushed; i += 1)
         ctx.restore();
 }
+/**
+ * Cut what follows to what a box shows of itself: the part its `clip`
+ * names, where it is absolutely positioned, and the part its `clip-path`
+ * does (CSS Masking 1, 5.1). How many clips were pushed, for the caller to
+ * restore — none where the context cannot clip — or -1 where they leave
+ * none of the box to show, and nothing was pushed.
+ */
+function pushOwnClips(ctx, box, options) {
+    const style = box.style;
+    const clip = box.outOfFlow && style.clip ? clipOf(box, options) : null;
+    if (clip && !(clip.w > 0 && clip.h > 0))
+        return -1;
+    const path = pathClips(box) ? clipPathOf(box, options) : null;
+    if (path && !(path.rect.w > 0 && path.rect.h > 0))
+        return -1;
+    let pushed = 0;
+    if (clip && pushClip(ctx, clip, null))
+        pushed += 1;
+    if (path && pushClip(ctx, path.rect, path.radii))
+        pushed += 1;
+    return pushed;
+}
+/** Whether a box is cut to a `clip-path`: one with a rectangle of its own
+ *  for the path to be measured in. An inline box is drawn on its block's
+ *  lines, and is not cut. */
+export function pathClips(box) {
+    return box.style.clipPath !== null && hasRect(box);
+}
+/**
+ * The options what a box cut to a `clip-path` holds is painted with: no
+ * clip around it for a positioned box to escape. The path cuts all the
+ * element holds, whatever that is positioned from, where a box that clips
+ * its overflow lets out a box whose containing block is outside it — put
+ * off until that clip ended (`paintPositioned`), one in here was painted
+ * with the path gone too.
+ */
+function underPath(options) {
+    return { ...options, clips: [] };
+}
 const MASK_LAYERS = new WeakMap();
 /** No corners: a mask layer is placed in the box's rectangle, which its
  *  radii do not round (CSS Masking 1, 7). */
@@ -872,6 +1270,13 @@ function paintOwnBackground(ctx, box, options) {
     if (hidden(box))
         return;
     const style = box.style;
+    if (columned.any) {
+        const pieces = COLUMN_PIECES.get(box);
+        if (pieces) {
+            paintColumnPieces(ctx, box, pieces, options);
+            return;
+        }
+    }
     if (style.boxShadow)
         paintShadows(ctx, box, options, false);
     if (box !== options.canvasSource) {
@@ -885,6 +1290,70 @@ function paintOwnBackground(ctx, box, options) {
     if (box.kind === 'table')
         paintPartBackgrounds(ctx, box, options);
 }
+/**
+ * The background and the borders of a block a column break falls inside
+ * (CSS Multi-column 1), a piece at a time: drawn in each column as the
+ * whole box standing there, and cut to the piece of it that is — which is
+ * `box-decoration-break: slice`, CSS's default (CSS Fragmentation 3, 6.1):
+ * no border and no padding at a break, and the background going on from
+ * one piece to the next. Its shadow is not drawn: a sliced box casts one as
+ * a whole and this has no whole box to cast it from.
+ */
+function paintColumnPieces(ctx, box, pieces, options) {
+    if (!ctx.save || !ctx.restore || !ctx.beginPath || !ctx.rect || !ctx.clip)
+        return;
+    for (const piece of pieces) {
+        if (!(piece.height > 0 && piece.width > 0))
+            continue;
+        const frame = {
+            x: piece.x,
+            y: piece.wholeY,
+            width: piece.width,
+            height: piece.wholeHeight,
+            captionTop: 0,
+            captionBottom: 0,
+            borderTop: box.borderTop,
+            borderRight: box.borderRight,
+            borderBottom: box.borderBottom,
+            borderLeft: box.borderLeft,
+            padTop: box.padTop,
+            padRight: box.padRight,
+            padBottom: box.padBottom,
+            padLeft: box.padLeft,
+            style: box.style,
+        };
+        const left = Math.round(piece.x + options.originX);
+        const top = Math.round(piece.y + options.originY);
+        const right = Math.round(piece.x + piece.width + options.originX);
+        const bottom = Math.round(piece.y + piece.height + options.originY);
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(left, top, right - left, bottom - top);
+        ctx.clip();
+        paintLayers(ctx, frame, options, frameImages(ctx, frame, options));
+        paintBorders(ctx, frame, options);
+        ctx.restore();
+    }
+}
+/**
+ * Clip to the rows of a text's layout that are in the text's column
+ * (`COLUMN_ROWS`), where the layout is drawn at `left` and `top`: the rest
+ * of it is another column's, drawn there. Answers whether it clipped, and
+ * the caller restores.
+ */
+function clipToRows(ctx, text, rows, left, top) {
+    if (!ctx.save || !ctx.restore || !ctx.beginPath || !ctx.rect || !ctx.clip)
+        return false;
+    const y1 = Math.round(top + rows.top);
+    const y2 = Math.round(top + rows.bottom);
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(Math.floor(left) - ROW_REACH, y1, Math.ceil(text.layout.width) + 2 * ROW_REACH, y2 - y1);
+    ctx.clip();
+    return true;
+}
+/** How far to either side of its layout a column's text may draw. */
+const ROW_REACH = 2048;
 /**
  * How `paintLayers` draws a frame's image layers: each in the area its
  * `background-clip` names, from the box its `background-origin` names
@@ -1171,6 +1640,8 @@ function inFlow(parent, child, options) {
         style.overflowY === 'visible' &&
         opacityOf(child) >= 1 &&
         !masked(style) &&
+        // cut to a path with all it holds, as one group
+        !style.clipPath &&
         // containment makes it a stacking context, painted whole
         !contained(child, CONTAIN_LAYOUT | CONTAIN_PAINT));
 }
@@ -1197,6 +1668,7 @@ function flowFlex(parent, child, options) {
         style.overflowY === 'visible' &&
         !(child.outOfFlow && style.clip) &&
         !masked(style) &&
+        !style.clipPath &&
         !contained(child, CONTAIN_LAYOUT | CONTAIN_PAINT));
 }
 /**
@@ -1423,7 +1895,11 @@ function paintPositioned(ctx, box, options) {
             return;
         }
     }
-    paintBox(ctx, box, atViewport(box, options));
+    // through its matrix, where it turns, scales or skews
+    if (turns(box))
+        paintTransformed(ctx, box, atViewport(box, options));
+    else
+        paintBox(ctx, box, atViewport(box, options));
 }
 /**
  * The options a box is painted with where it is fixed to the viewport
@@ -1460,13 +1936,16 @@ export function fixedToViewport(box) {
     if (box.style.position !== 'fixed')
         return false;
     for (let at = box.parent; at?.parent; at = at.parent) {
-        if (at.style.translate || at.style.transformTranslate)
-            return false;
-        if (contained(at, CONTAIN_LAYOUT | CONTAIN_PAINT))
+        if (holdsFixed(at))
             return false;
     }
     return true;
 }
+/** Whether a box is the containing block of the fixed boxes in it: a
+ *  transformed box, or one with layout or paint containment. */
+function holdsFixed(box) {
+    return (transformed(box.style) || contained(box, CONTAIN_LAYOUT | CONTAIN_PAINT));
+}
 function rootOf(box) {
     let root = box;
     while (root.parent)
@@ -1476,17 +1955,22 @@ function rootOf(box) {
 /**
  * The box an out-of-flow box is positioned in, whose clips are the ones it
  * is under (`paintPositioned`, and the hit test's `deepestAt`): its nearest
- * positioned or translated ancestor, or the root. Null for a fixed box,
- * which is under none.
+ * positioned or transformed ancestor, or the root. Null for a box fixed to
+ * the viewport, which is under none — one in a transformed box is fixed to
+ * that, and under what it is under.
  */
 export function containingBlockOf(box) {
-    if (box.style.position === 'fixed')
+    if (box.style.position === 'fixed') {
+        for (let at = box.parent; at?.parent; at = at.parent) {
+            if (holdsFixed(at))
+                return at;
+        }
         return null;
+    }
     let containing = box.parent;
     while (containing?.parent &&
         containing.style.position === 'static' &&
-        !containing.style.translate &&
-        !containing.style.transformTranslate) {
+        !transformed(containing.style)) {
         containing = containing.parent;
     }
     return containing;
@@ -1579,6 +2063,201 @@ function clipOf(box, options) {
         h: Math.round(box.y + options.originY + bottom) - y,
     };
 }
+/** The document's own coordinates, as a space to place a clip in. */
+const DOCUMENT = { originX: 0, originY: 0, scale: 1, damage: null };
+/**
+ * A box's `clip-path` in window coordinates (CSS Masking 1, 5.1): the
+ * rectangle its shape is (CSS Shapes 1, 3.1), each edge on the pixel it
+ * falls nearest as a box's are, and its corners where it has any — of no
+ * area where the shape leaves none of the box to show. Measured in the box
+ * the path names, the border box unless it says: `inset()` in from its
+ * edges, `rect()` and `xywh()` from its top left, and the box itself, with
+ * the element's own corners, where no shape is written.
+ */
+function clipPathOf(box, options) {
+    const path = box.style.clipPath;
+    // the box it is measured in, in from the border box — or out from it
+    const within = path.box;
+    const [it, ir, ib, il] = within === 'margin-box'
+        ? [-box.marginTop, -box.marginRight, -box.marginBottom, -box.marginLeft]
+        : edgeInsets(box, within);
+    const width = Math.max(0, box.width - il - ir);
+    const height = Math.max(0, frameHeight(box) - it - ib);
+    // how far in from that box's edges the rectangle's are
+    const [a, b, c, d] = path.lengths;
+    let top = 0;
+    let right = 0;
+    let bottom = 0;
+    let left = 0;
+    if (path.shape === 'inset') {
+        top = resolve(a, height);
+        right = resolve(b, width);
+        bottom = resolve(c, height);
+        left = resolve(d, width);
+        // a pair that adds up to more than the box is across is reduced to
+        // it, each in its proportion, as overlapping radii are (3.1):
+        // `inset(50%)` and `inset(75%)` are both the box's centre, and nothing
+        if (left + right > width && left > 0 && right > 0) {
+            const f = Math.max(0, width) / (left + right);
+            left *= f;
+            right *= f;
+        }
+        if (top + bottom > height && top > 0 && bottom > 0) {
+            const f = Math.max(0, height) / (top + bottom);
+            top *= f;
+            bottom *= f;
+        }
+    }
+    else if (path.shape === 'rect') {
+        // four edges from the top and the left, `auto` the box's own; the
+        // right and the bottom are no less than the left and the top
+        top = a === AUTO ? 0 : resolve(a, height);
+        left = d === AUTO ? 0 : resolve(d, width);
+        right = b === AUTO ? 0 : width - Math.max(left, resolve(b, width));
+        bottom = c === AUTO ? 0 : height - Math.max(top, resolve(c, height));
+    }
+    else if (path.shape === 'xywh') {
+        left = resolve(a, width);
+        top = resolve(b, height);
+        right = width - left - Math.max(0, resolve(c, width));
+        bottom = height - top - Math.max(0, resolve(d, height));
+    }
+    const x0 = box.x + options.originX + il;
+    const y0 = frameY(box) + options.originY + it;
+    const x = Math.round(x0 + left);
+    const y = Math.round(y0 + top);
+    const rect = {
+        x,
+        y,
+        w: Math.max(0, Math.round(x0 + width - right) - x),
+        h: Math.max(0, Math.round(y0 + height - bottom) - y),
+    };
+    let radii = null;
+    if (path.shape === null) {
+        // the box alone: its edge, shaped as the element's corners shape it
+        const corners = cornersOf(box.style, box.width, frameHeight(box));
+        if (corners) {
+            radii =
+                within === 'margin-box'
+                    ? spreadCorners(corners, box.width, frameHeight(box), -it, -ir, -ib, -il)
+                    : roundedOf(insetCorners(corners, it, ir, ib, il));
+        }
+    }
+    else if (path.radii) {
+        // a percentage is of the box the shape is in, and the radii are fitted
+        // to the rectangle they round
+        radii = cornersFor(path.radii, path.radiiY, width, height, rect.w, rect.h);
+    }
+    return { rect, radii };
+}
+/** Corners, or null where every one of them is square. */
+function roundedOf(c) {
+    for (let i = 0; i < 4; i += 1)
+        if (c.x[i] > 0 && c.y[i] > 0)
+            return c;
+    return null;
+}
+/**
+ * Whether a point of the document is in what a box's `clip-path` leaves of
+ * it: what a hit test asks, since nothing the path cuts away — of the box
+ * or of anything in it — is under a pointer (`deepestAt`).
+ */
+export function inClipPath(box, x, y) {
+    const { rect, radii } = clipPathOf(box, DOCUMENT);
+    const right = rect.x + rect.w;
+    const bottom = rect.y + rect.h;
+    if (x < rect.x || x >= right || y < rect.y || y >= bottom)
+        return false;
+    if (!radii)
+        return true;
+    // inside the rectangle, and past a corner's curve: each corner is a
+    // quarter of an ellipse about a centre its radii in from the two edges
+    for (let i = 0; i < 4; i += 1) {
+        const rx = radii.x[i];
+        const ry = radii.y[i];
+        if (!(rx > 0 && ry > 0))
+            continue;
+        const onLeft = i === 0 || i === 3;
+        const cx = onLeft ? rect.x + rx : right - rx;
+        const cy = i < 2 ? rect.y + ry : bottom - ry;
+        if (onLeft ? x >= cx : x <= cx)
+            continue;
+        if (i < 2 ? y >= cy : y <= cy)
+            continue;
+        const dx = (x - cx) / rx;
+        const dy = (y - cy) / ry;
+        if (dx * dx + dy * dy > 1)
+            return false;
+    }
+    return true;
+}
+/**
+ * Whether a point of the document is in the part of a box its `clip` shows
+ * (CSS 2.1 11.1.2) — anywhere, for a box that is cut to none: what a hit
+ * test asks, since what the clip cuts away is not drawn (`deepestAt`). What
+ * it cuts away is the box and what is painted with it: all the box holds
+ * where it is a stacking context (`stacksLayers`), and elsewhere all but a
+ * fixed box, which the context around it paints under no clip
+ * (`clipsFor`). Chrome cuts that one too.
+ */
+export function inClip(box, x, y) {
+    if (!box.outOfFlow || !box.style.clip)
+        return true;
+    const rect = clipOf(box, DOCUMENT);
+    return (x >= rect.x && x < rect.x + rect.w && y >= rect.y && y < rect.y + rect.h);
+}
+/**
+ * The part of the document a box shows through, in the document's own
+ * pixels, or null where nothing cuts it: the `clip` it is cut to (CSS 2.1
+ * 11.1.2), and the clips of the boxes it is under — each that clips its
+ * overflow or is cut to a `clip` of its own, from its containing block up
+ * (11.1.1), so an absolute box is outside a box that clips where its
+ * containing block is, and a fixed one outside them all. And every
+ * `clip-path` from the box up, its own among them: a path cuts all its
+ * element holds, whatever that is positioned from (CSS Masking 1, 5.1) —
+ * to the rectangle a path's shape is, its corners left square. A rectangle
+ * of no area where none of it shows. Painting cuts what it draws as it
+ * walks down; this is for what is not painted here and has to be cut all
+ * the same, a control's widget (`controlRectsOf`).
+ */
+export function clipAround(box, scale = 1) {
+    const space = { originX: 0, originY: 0, scale, damage: null };
+    let x0 = -Infinity;
+    let y0 = -Infinity;
+    let x1 = Infinity;
+    let y1 = Infinity;
+    let cut = false;
+    const under = (rect) => {
+        cut = true;
+        x0 = Math.max(x0, rect.x);
+        y0 = Math.max(y0, rect.y);
+        x1 = Math.min(x1, rect.x + rect.w);
+        y1 = Math.min(y1, rect.y + rect.h);
+    };
+    if (box.outOfFlow && box.style.clip)
+        under(clipOf(box, space));
+    // what holds a box, as clips go: its parent, or out of the flow its
+    // containing block, and the boxes between them do not clip it
+    const holder = (inner) => inner.outOfFlow ? containingBlockOf(inner) : inner.parent;
+    for (let outer = holder(box); outer; outer = holder(outer)) {
+        if (outer.outOfFlow && outer.style.clip)
+            under(clipOf(outer, space));
+        if (clipsOverflow(outer))
+            under(clipEdge(outer, space).rect);
+    }
+    for (let at = box; at; at = at.parent) {
+        if (pathClips(at))
+            under(clipPathOf(at, space).rect);
+    }
+    if (!cut)
+        return null;
+    return {
+        x: x0,
+        y: y0,
+        width: Math.max(0, x1 - x0),
+        height: Math.max(0, y1 - y0),
+    };
+}
 /**
  * The radii of a box's padding edge — its border radii less the borders —
  * for a clip, or null where a rectangle clips the same: padding at least a
@@ -1637,6 +2316,16 @@ function cornersOf(style, w, h) {
         across[3] === 0) {
         return null;
     }
+    return cornersFor(across, down, w, h, w, h);
+}
+/**
+ * Radii as corners in pixels: each a length or a percentage of a box `w`
+ * by `h`, across and down, and all of them reduced together where two on a
+ * side of the rectangle they round — `fitW` by `fitH`, which for a
+ * `border-radius` is that box, and for a `clip-path`'s `round` is the
+ * rectangle inside it — would overlap. Null where every corner is square.
+ */
+function cornersFor(across, down, w, h, fitW, fitH) {
     const vertical = down ?? across;
     const x = [0, 0, 0, 0];
     const y = [0, 0, 0, 0];
@@ -1657,10 +2346,10 @@ function cornersOf(style, w, h) {
         if (sum > side)
             f = Math.min(f, Math.max(0, side) / sum);
     };
-    fit(w, x[0] + x[1]);
-    fit(h, y[1] + y[2]);
-    fit(w, x[2] + x[3]);
-    fit(h, y[3] + y[0]);
+    fit(fitW, x[0] + x[1]);
+    fit(fitH, y[1] + y[2]);
+    fit(fitW, x[2] + x[3]);
+    fit(fitH, y[3] + y[0]);
     if (f < 1) {
         for (let i = 0; i < 4; i += 1) {
             x[i] *= f;
@@ -1789,8 +2478,7 @@ function layered(parent, child) {
         return true;
     if (style.position !== 'relative' &&
         style.position !== 'sticky' &&
-        !style.translate &&
-        !style.transformTranslate) {
+        !transformed(style)) {
         return false;
     }
     return child.kind !== 'inline' && !onLine(parent, child);
@@ -1802,7 +2490,7 @@ function layered(parent, child) {
  * drawn twice — darker at every antialiased edge — and a translucent
  * background had its alpha doubled.
  */
-function onLine(parent, child) {
+export function onLine(parent, child) {
     if (parent.lines === null && parent.kind !== 'inline')
         return false;
     if (child.isFloat || child.outOfFlow)
@@ -1878,24 +2566,31 @@ function settleLayers(box, list) {
  * it itself, and the ones below its flow: positioned with a `z-index`, or a
  * flex item with one; fixed or sticky with none (CSS Positioned Layout 3, as
  * browsers paint them — a fixed header's box set behind its content with
- * `z-index: -1` went behind the page); or under full opacity (CSS Color 4
+ * `z-index: -1` went behind the page); transformed (CSS Transforms 1, 3);
+ * or under full opacity (CSS Color 4
  * 3.2), its own or the opacity it takes from an inline box it broke
  * (`FADED_BLOCKS`), which is painted as one group — faded with it, or at
  * `opacity: 0` not at all, where its root context drew a hover menu's
  * absolute children.
  */
-function stacksLayers(box) {
+export function stacksLayers(box) {
     const style = box.style;
     if (style.position === 'fixed' || style.position === 'sticky')
         return true;
     if (style.opacity < 1 || FADED_BLOCKS.has(box))
         return true;
-    // and so does a mask, which is applied to the group (CSS Masking 1, 7)
-    if (masked(style))
+    // and so does a mask, which is applied to the group (CSS Masking 1, 7),
+    // and a clip path, which cuts it (5.1)
+    if (masked(style) || pathClips(box))
         return true;
     // layout and paint containment make one (CSS Containment 2, 3.3, 3.5)
     if (contained(box, CONTAIN_LAYOUT | CONTAIN_PAINT))
         return true;
+    // and a transform (CSS Transforms 1, 3), on a box one applies to: what it
+    // holds is painted with it, through its matrix, and not by a context
+    // outside it
+    if (transformed(style) && box.kind !== 'inline')
+        return true;
     if (typeof style.zIndex !== 'number')
         return false;
     return style.position !== 'static' || flexItem(box);
@@ -1918,7 +2613,7 @@ export function clipsFor(box, context) {
         const fixed = box.style.position === 'fixed';
         while (from && from !== context) {
             const style = from.style;
-            if (style.translate || style.transformTranslate)
+            if (transformed(style))
                 break;
             if (!fixed && style.position !== 'static')
                 break;
@@ -2018,9 +2713,19 @@ function hoistFrom(box, root) {
     return null;
 }
 function byZIndex(a, b) {
-    const az = a.style.zIndex === 'auto' ? 0 : a.style.zIndex;
-    const bz = b.style.zIndex === 'auto' ? 0 : b.style.zIndex;
-    return az - bz;
+    return layerOf(a) - layerOf(b);
+}
+/** The `z-index` a box is ordered by among its stacking context's layers:
+ *  its own where one applies — to a positioned box, and to a flex or a grid
+ *  item (CSS 2.1 9.9.1, CSS Flexbox 5.4) — and none for a box that is
+ *  among them for its transform alone, which is painted in the document's
+ *  order whatever `z-index` it was given. */
+function layerOf(box) {
+    const style = box.style;
+    const z = style.zIndex;
+    if (z === 'auto')
+        return 0;
+    return style.position !== 'static' || flexItem(box) ? z : 0;
 }
 /** Whether anything this box or its descendants draw is in the damage. */
 function intersects(box, options) {
@@ -2098,7 +2803,7 @@ function paintBackground(ctx, box, options, style) {
         ctx.fillStyle = inkColor(color, style.color);
         fill();
     }
-    if (gradient && ctx.createLinearGradient) {
+    if (gradient) {
         // over the colour, as the layer an image is: the size of the padding
         // box, which is where it starts, and repeated under the borders — or
         // the viewport's, where it is fixed; its line runs across the whole of
@@ -2121,8 +2826,9 @@ function paintBackground(ctx, box, options, style) {
             // with its end colours where a browser would show the next tile
             if (!(at.width > 0 && at.height > 0))
                 return;
-            ctx.fillStyle = linearGradient(ctx, gradient, at.x, at.y, at.width, at.height, style.color, rect);
-            fill();
+            const paint = gradientFill(ctx, gradient, at.x, at.y, at.width, at.height, style.color, rect);
+            if (paint)
+                fillGradient(ctx, paint, rect, rounded);
         }
         else
             paintGradient(ctx, style, gradient, rect, at);
@@ -2170,8 +2876,9 @@ function paintGradient(ctx, style, gradient, area, at) {
         MAX_TILES) {
         // a sliver of a root repeated down a long canvas: the one tile, and
         // its end colours on past it
-        ctx.fillStyle = linearGradient(ctx, gradient, x0, y0, w, h, style.color, area);
-        ctx.fillRect(area.x, area.y, area.w, area.h);
+        const paint = gradientFill(ctx, gradient, x0, y0, w, h, style.color, area);
+        if (paint)
+            fillGradient(ctx, paint, area);
         return;
     }
     for (let y = fromY; y < toY; y += stepY) {
@@ -2185,8 +2892,9 @@ function paintGradient(ctx, style, gradient, area, at) {
             if (right <= left)
                 continue;
             const tile = { x: left, y: top, w: right - left, h: bottom - top };
-            ctx.fillStyle = linearGradient(ctx, gradient, x, y, w, h, style.color, tile);
-            ctx.fillRect(tile.x, tile.y, tile.w, tile.h);
+            const paint = gradientFill(ctx, gradient, x, y, w, h, style.color, tile);
+            if (paint)
+                fillGradient(ctx, paint, tile);
         }
     }
 }
@@ -2216,6 +2924,39 @@ function linearGradient(ctx, gradient, x, y, w, h, currentColor, visible = null)
     const dy = -Math.cos(angle);
     const length = Math.abs(w * dx) + Math.abs(h * dy);
     const stops = gradient.stops;
+    const at = stopOffsets(stops, length);
+    // the context's offsets are 0 to 1, so a line that stops reach past runs
+    // from the first to the last, and the box sees the part of it between
+    const from = Math.min(0, at[0]);
+    const to = Math.max(1, at[at.length - 1]);
+    const startX = x + w / 2 - (dx * length) / 2;
+    const startY = y + h / 2 - (dy * length) / 2;
+    const x0 = startX + dx * length * from;
+    const y0 = startY + dy * length * from;
+    const x1 = startX + dx * length * to;
+    const y1 = startY + dy * length * to;
+    const colors = stops.map((stop) => inkColor(stop.color, currentColor));
+    if (visible &&
+        length > 0 &&
+        !(Math.abs(x0) < GRADIENT_REACH &&
+            Math.abs(y0) < GRADIENT_REACH &&
+            Math.abs(x1) < GRADIENT_REACH &&
+            Math.abs(y1) < GRADIENT_REACH)) {
+        return clippedGradient(ctx, at, colors, startX, startY, dx * length, dy * length, visible);
+    }
+    const g = ctx.createLinearGradient(x0, y0, x1, y1);
+    for (let i = 0; i < stops.length; i += 1) {
+        g.addColorStop((at[i] - from) / (to - from), colors[i]);
+    }
+    return g;
+}
+/**
+ * Where each of a gradient's stops is along a line `length` long, as a
+ * fraction of it (CSS Images 3, 3.5.1): a stop without a position is
+ * spread evenly between its neighbours', the first at 0 and the last at 1
+ * where they have none, and none is before the one before it.
+ */
+function stopOffsets(stops, length) {
     const at = stops.map((stop) => stop.at === null
         ? null
         : length > 0
@@ -2239,30 +2980,195 @@ function linearGradient(ctx, gradient, x, y, w, h, currentColor, visible = null)
         }
         at[i] = Math.max(at[i], at[i - 1]);
     }
-    // the context's offsets are 0 to 1, so a line that stops reach past runs
-    // from the first to the last, and the box sees the part of it between
-    const from = Math.min(0, at[0]);
-    const to = Math.max(1, at[at.length - 1]);
-    const startX = x + w / 2 - (dx * length) / 2;
-    const startY = y + h / 2 - (dy * length) / 2;
-    const x0 = startX + dx * length * from;
-    const y0 = startY + dy * length * from;
-    const x1 = startX + dx * length * to;
-    const y1 = startY + dy * length * to;
-    const colors = stops.map((stop) => inkColor(stop.color, currentColor));
-    if (visible &&
-        length > 0 &&
-        !(Math.abs(x0) < GRADIENT_REACH &&
-            Math.abs(y0) < GRADIENT_REACH &&
-            Math.abs(x1) < GRADIENT_REACH &&
-            Math.abs(y1) < GRADIENT_REACH)) {
-        return clippedGradient(ctx, at, colors, startX, startY, dx * length, dy * length, visible);
+    return at;
+}
+/** A gradient's fill for a box at (`x`, `y`), `w` by `h`: null where the
+ *  context draws no gradient of its kind. */
+function gradientFill(ctx, gradient, x, y, w, h, currentColor, visible = null) {
+    if (gradient.kind === 'radial') {
+        return radialGradient(ctx, gradient, x, y, w, h, currentColor, visible);
     }
-    const g = ctx.createLinearGradient(x0, y0, x1, y1);
-    for (let i = 0; i < stops.length; i += 1) {
-        g.addColorStop((at[i] - from) / (to - from), colors[i]);
+    if (!ctx.createLinearGradient)
+        return null;
+    return {
+        style: linearGradient(ctx, gradient, x, y, w, h, currentColor, visible),
+        matrix: null,
+    };
+}
+/**
+ * A `radial-gradient()` across a box (CSS Images 3, 3.2.2): centred where
+ * its position puts it, and as large as its radii, or as its keyword says
+ * — the side or the corner of the box nearest the centre or furthest from
+ * it, and for an ellipse through a corner, the ellipse with the shape the
+ * sides would give it. The stops are spaced along the ray from the centre
+ * to the ending shape's edge, which for an ellipse is its horizontal
+ * radius; one before the centre, where the ray starts, gives the colour
+ * there and no more, and one past the edge carries the gradient on.
+ *
+ * A shape with no width or no height is drawn as its last colour, as
+ * Chrome draws each (crbug.com/635727): the spec draws a zero width as a
+ * gradient mirrored about the centre line, which Chrome does not.
+ */
+function radialGradient(ctx, gradient, x, y, w, h, currentColor, visible = null) {
+    const colors = gradient.stops.map((stop) => inkColor(stop.color, currentColor));
+    const cx = resolve(gradient.at[0], w);
+    const cy = resolve(gradient.at[1], h);
+    let rx;
+    let ry;
+    if (gradient.radii) {
+        rx = resolve(gradient.radii[0], w);
+        ry = resolve(gradient.radii[1], h);
     }
-    return g;
+    else {
+        const extent = gradient.extent ?? 'farthest-corner';
+        const side = extent.startsWith('closest') ? Math.min : Math.max;
+        const sx = side(Math.abs(cx), Math.abs(w - cx));
+        const sy = side(Math.abs(cy), Math.abs(h - cy));
+        const corner = extent.endsWith('corner');
+        if (gradient.circle) {
+            rx = ry = corner ? Math.hypot(sx, sy) : side(sx, sy);
+        }
+        else {
+            // through the corner, in the shape the sides give it
+            rx = corner ? sx * Math.SQRT2 : sx;
+            ry = corner ? sy * Math.SQRT2 : sy;
+        }
+    }
+    if (!(rx > 0 && ry > 0)) {
+        return { style: colors[colors.length - 1], matrix: null };
+    }
+    if (!hasRadialGradients(ctx))
+        return null;
+    let at = stopOffsets(gradient.stops, rx);
+    let inks = colors;
+    if (at[0] < 0) {
+        // the colour at the centre, between the stops either side of it
+        const first = colorAlong(at, colors, 0);
+        const i = at.findIndex((t) => t > 0);
+        if (i < 0)
+            return { style: first, matrix: null };
+        at = [0, ...at.slice(i)];
+        inks = [first, ...colors.slice(i)];
+    }
+    const ax = x + cx;
+    const ay = y + cy;
+    const seen = visible ?? { x, y, w, h };
+    if (!(Math.abs(ax) < RADIAL_REACH && Math.abs(ay) < RADIAL_REACH)) {
+        return farRadial(ctx, at, inks, ax, ay, rx, ry, seen);
+    }
+    let to = Math.max(1, at[at.length - 1]);
+    if (Math.max(rx, ry) * to > GRADIENT_REACH) {
+        // as far along the ray as what is seen of it reaches, and no further:
+        // a circle a context cannot carry, cut to the part it draws
+        let reach = 0;
+        for (const px of [seen.x, seen.x + seen.w]) {
+            for (const py of [seen.y, seen.y + seen.h]) {
+                reach = Math.max(reach, Math.hypot((px - ax) / rx, (py - ay) / ry));
+            }
+        }
+        if (reach > 0 && reach < to) {
+            const last = colorAlong(at, inks, reach);
+            const kept = at.filter((t) => t < reach).length;
+            at = [...at.slice(0, kept), reach];
+            inks = [...inks.slice(0, kept), last];
+            to = reach;
+        }
+    }
+    const circle = rx === ry;
+    // a circle as wide as the ellipse is narrow, stretched along the other
+    // axis: the matrix only ever widens, so its inverse, which a context
+    // samples the gradient through, reaches no further than the centre does
+    const r = Math.min(rx, ry);
+    const g = circle
+        ? ctx.createRadialGradient(ax, ay, 0, ax, ay, r * to)
+        : ctx.createRadialGradient(0, 0, 0, 0, 0, r * to);
+    for (let i = 0; i < at.length; i += 1) {
+        g.addColorStop(at[i] / to, inks[i]);
+    }
+    return {
+        style: g,
+        matrix: circle ? null : [rx / r, 0, 0, ry / r, ax, ay],
+    };
+}
+/**
+ * How far from the origin a radial gradient's centre may be and still be
+ * the context's to draw: ntk makes a gradient past what X RENDER carries at
+ * a scale that fits, and its 16.16 matrix holds that scale to a fraction of
+ * a pixel to here.
+ */
+const RADIAL_REACH = 1 << 18;
+/**
+ * A radial gradient whose centre is further off than a context carries —
+ * `at 0 calc(infinity * 1px)`, which comes to the largest length there is —
+ * across the part of it that is seen: from that far its rings are as good
+ * as straight, so it is drawn as the linear gradient that runs the way the
+ * rings spread there, as fast as they do, cut to what is seen as a linear
+ * gradient's line is. The rings bend away from it by the square of what is
+ * seen over eight times the distance, under a pixel from here.
+ */
+function farRadial(ctx, at, colors, ax, ay, rx, ry, seen) {
+    if (!ctx.createLinearGradient)
+        return null;
+    // the middle of what is seen, in the circle's own space, and how fast
+    // the gradient runs there, a pixel
+    const px = seen.x + seen.w / 2;
+    const py = seen.y + seen.h / 2;
+    const ux = (px - ax) / rx;
+    const uy = (py - ay) / ry;
+    const t = Math.hypot(ux, uy);
+    const gx = ux / rx / t;
+    const gy = uy / ry / t;
+    const g2 = gx * gx + gy * gy;
+    if (!(t > 0 && g2 > 0 && Number.isFinite(t / g2))) {
+        return { style: colorAlong(at, colors, t), matrix: null };
+    }
+    // the line it runs along, from where it would start to where it is 1
+    const lx = gx / g2;
+    const ly = gy / g2;
+    return {
+        style: clippedGradient(ctx, at, colors, px - lx * t, py - ly * t, lx, ly, seen),
+        matrix: null,
+    };
+}
+/**
+ * Whether a context draws radial gradients. react-x11's macOS and Windows
+ * contexts have the method and paint what it returns flat, in one colour
+ * — over whatever a vignette was meant to let through — and theirs takes
+ * no circles, which is how it is told from one that draws them: ntk's and
+ * the Wayland context's take the six numbers canvas gives it. There a
+ * radial gradient is drawn as nothing, as every one was.
+ */
+function hasRadialGradients(ctx) {
+    return (ctx.createRadialGradient?.length ?? 0) >= 6;
+}
+/**
+ * Fills a rectangle, rounded where `corners` says, with a gradient. An
+ * ellipse's shape is laid down first and filled under its matrix, which a
+ * context applies to the fill's paint and not to a path it already has.
+ */
+function fillGradient(ctx, fill, r, corners = null) {
+    ctx.fillStyle = fill.style;
+    if (!fill.matrix) {
+        if (corners) {
+            ctx.beginPath();
+            roundedRect(ctx, r.x, r.y, r.w, r.h, corners);
+            ctx.fill();
+        }
+        else
+            ctx.fillRect(r.x, r.y, r.w, r.h);
+        return;
+    }
+    if (!ctx.transform || !ctx.beginPath || !ctx.rect || !ctx.fill)
+        return;
+    ctx.save();
+    ctx.beginPath();
+    if (corners)
+        roundedRect(ctx, r.x, r.y, r.w, r.h, corners);
+    else
+        ctx.rect(r.x, r.y, r.w, r.h);
+    ctx.transform(...fill.matrix);
+    ctx.fill();
+    ctx.restore();
 }
 /**
  * How far from the origin a gradient's line may end. X RENDER takes the
@@ -2304,29 +3210,30 @@ function clippedGradient(ctx, at, colors, sx, sy, lx, ly, visible) {
     const cy = (top + bottom) / 2;
     const tc = along(cx, cy);
     const g = ctx.createLinearGradient(cx + (t0 - tc) * lx, cy + (t0 - tc) * ly, cx + (t1 - tc) * lx, cy + (t1 - tc) * ly);
-    // the colour at a place on the line: a stop's, or between two
-    const colorAt = (t) => {
-        if (!(t > at[0]))
-            return colors[0];
-        for (let i = 1; i < at.length; i += 1) {
-            if (t > at[i])
-                continue;
-            const span = at[i] - at[i - 1];
-            const f = span > 0 ? (t - at[i - 1]) / span : 1;
-            return (blend(colors[i - 1], colors[i], f) ??
-                (f < 0.5 ? colors[i - 1] : colors[i]));
-        }
-        return colors[colors.length - 1];
-    };
-    g.addColorStop(0, colorAt(t0));
+    g.addColorStop(0, colorAlong(at, colors, t0));
     for (let i = 0; i < at.length; i += 1) {
         if (at[i] > t0 && at[i] < t1) {
             g.addColorStop((at[i] - t0) / (t1 - t0), colors[i]);
         }
     }
-    g.addColorStop(1, colorAt(t1));
+    g.addColorStop(1, colorAlong(at, colors, t1));
     return g;
 }
+/** The colour at a place along a gradient whose stops are at `at`: a
+ *  stop's, or between two. */
+function colorAlong(at, colors, t) {
+    if (!(t > at[0]))
+        return colors[0];
+    for (let i = 1; i < at.length; i += 1) {
+        if (t > at[i])
+            continue;
+        const span = at[i] - at[i - 1];
+        const f = span > 0 ? (t - at[i - 1]) / span : 1;
+        return (blend(colors[i - 1], colors[i], f) ??
+            (f < 0.5 ? colors[i - 1] : colors[i]));
+    }
+    return colors[colors.length - 1];
+}
 /**
  * The backgrounds of a table's column groups, columns, row groups and rows
  * (CSS 2.1 17.5.1), in that order: over the table's own and under its
@@ -2672,16 +3579,6 @@ function tileSize(size, area, scale) {
     }
     return [area.width, area.height];
 }
-/**
- * Borders, as four rectangles.
- *
- * Not as a stroked path, for the reason richtext gives about its underlines:
- * the mock backend has no path API, and a 1px border on a pixel grid is a
- * rectangle rather than something an antialiased stroke improves. Corners are
- * mitred by drawing the top and bottom full-width and the sides between them,
- * which is right whenever the two sides share a colour and close enough when
- * they do not.
- */
 /**
  * A box's outline (CSS 2.1 18.4, CSS UI 4 5): a border of its own width,
  * style and colour round the border box grown by `outline-offset` — which
@@ -2733,6 +3630,25 @@ function paintOutline(ctx, box, options) {
         style: ring,
     }, options);
 }
+/**
+ * Borders, a side at a time.
+ *
+ * As rectangles where they can be, the top and the bottom full width and
+ * the sides between them, and not as a stroked path, for the reason
+ * richtext gives about its underlines: the mock backend has no path API, and
+ * a 1px border on a pixel grid is a rectangle rather than something an
+ * antialiased stroke improves. That is every border whose sides share a
+ * colour, where a corner looks the same whichever side it is given to.
+ *
+ * Where two sides that meet differ in colour — one of them transparent
+ * included — the corner is cut on the diagonal from its outer point to its
+ * inner one and each side takes its half (CSS Backgrounds 3, 4.3), so a side
+ * is a trapezoid, and a triangle where the box inside the borders has no
+ * width: the CSS triangle a dropdown's caret and a tooltip's arrow are
+ * drawn with, which came out as the rectangle around it. Only a solid side
+ * is cut, and only against a side that is solid or paints nothing; dots,
+ * dashes and a double border's two lines keep their rectangles.
+ */
 function paintBorders(ctx, box, options) {
     // most boxes have none, and are asked on every paint
     if (!(box.borderTop || box.borderRight || box.borderBottom || box.borderLeft))
@@ -2750,28 +3666,148 @@ function paintBorders(ctx, box, options) {
         return;
     if (sculpted(s) && paintSculpted(ctx, box, x, y, w, h, options))
         return;
+    const t = box.borderTop;
+    const r = box.borderRight;
+    const b = box.borderBottom;
+    const l = box.borderLeft;
+    /** What a side is painted in, null where it paints nothing. */
+    const ink = (width, color) => width > 0 && !isTransparent(color) ? inkColor(color, s.color) : null;
+    const topInk = ink(t, s.borderTopColor);
+    const rightInk = ink(r, s.borderRightColor);
+    const bottomInk = ink(b, s.borderBottomColor);
+    const leftInk = ink(l, s.borderLeftColor);
+    // the corners cut on the diagonal; none where the context draws no path,
+    // and the sides are rectangles
+    const paths = !!(ctx.beginPath && ctx.moveTo && ctx.lineTo && ctx.fill);
+    const topStyle = s.borderTopStyle;
+    const rightStyle = s.borderRightStyle;
+    const bottomStyle = s.borderBottomStyle;
+    const leftStyle = s.borderLeftStyle;
+    const tl = paths && mitred(t, l, topInk, leftInk, topStyle, leftStyle);
+    const tr = paths && mitred(t, r, topInk, rightInk, topStyle, rightStyle);
+    const br = paths && mitred(b, r, bottomInk, rightInk, bottomStyle, rightStyle);
+    const bl = paths && mitred(b, l, bottomInk, leftInk, bottomStyle, leftStyle);
     const edge = (ex, ey, ew, eh, style, color, horizontal) => {
         const rect = clampRect(options, ex, ey, ew, eh);
         if (!rect)
             return;
-        ctx.fillStyle = inkColor(color, s.color);
+        ctx.fillStyle = color;
         // The un-clamped start is the dash phase's origin, so the pattern does
         // not crawl as the viewport moves along a long edge.
         fillEdge(ctx, rect, horizontal ? ex : ey, style, horizontal);
     };
-    if (box.borderTop > 0 && !isTransparent(s.borderTopColor)) {
-        edge(x, y, w, box.borderTop, s.borderTopStyle, s.borderTopColor, true);
+    /** A side with a cut corner: its outer edge and then its inner one. */
+    const side = (points, color) => {
+        const area = clampRect(options, x, y, w, h);
+        if (!area)
+            return;
+        ctx.fillStyle = color;
+        fillPolygon(ctx, points, area);
+    };
+    // the border box's far edges, and the padding box inside it
+    const x1 = x + w;
+    const y1 = y + h;
+    const px0 = x + l;
+    const py0 = y + t;
+    const px1 = Math.max(px0, x1 - r);
+    const py1 = Math.max(py0, y1 - b);
+    // The left and the right are drawn after the top and the bottom. Where
+    // one of them is opaque it draws its half of a cut corner over the side
+    // drawn before, which keeps the whole corner: two halves each
+    // antialiased along the diagonal would let what is under the border
+    // show through between them.
+    const over = (color) => color !== null && alphaOf(color) === 1;
+    if (topInk !== null) {
+        const cutLeft = tl && !over(leftInk);
+        const cutRight = tr && !over(rightInk);
+        if (cutLeft || cutRight) {
+            side([x, y, x1, y, cutRight ? px1 : x1, py0, cutLeft ? px0 : x, py0], topInk);
+        }
+        else
+            edge(x, y, w, t, topStyle, topInk, true);
     }
-    if (box.borderBottom > 0 && !isTransparent(s.borderBottomColor)) {
-        edge(x, y + h - box.borderBottom, w, box.borderBottom, s.borderBottomStyle, s.borderBottomColor, true);
+    if (bottomInk !== null) {
+        const cutLeft = bl && !over(leftInk);
+        const cutRight = br && !over(rightInk);
+        if (cutLeft || cutRight) {
+            side([x1, y1, x, y1, cutLeft ? px0 : x, py1, cutRight ? px1 : x1, py1], bottomInk);
+        }
+        else
+            edge(x, y1 - b, w, b, bottomStyle, bottomInk, true);
     }
-    if (box.borderLeft > 0 && !isTransparent(s.borderLeftColor)) {
-        edge(x, y + box.borderTop, box.borderLeft, h - box.borderTop - box.borderBottom, s.borderLeftStyle, s.borderLeftColor, false);
+    if (leftInk !== null) {
+        if (tl || bl) {
+            side([x, bl ? y1 : py1, x, tl ? y : py0, px0, py0, px0, py1], leftInk);
+        }
+        else
+            edge(x, y + t, l, h - t - b, leftStyle, leftInk, false);
     }
-    if (box.borderRight > 0 && !isTransparent(s.borderRightColor)) {
-        edge(x + w - box.borderRight, y + box.borderTop, box.borderRight, h - box.borderTop - box.borderBottom, s.borderRightStyle, s.borderRightColor, false);
+    if (rightInk !== null) {
+        if (tr || br) {
+            side([x1, tr ? y : py0, x1, br ? y1 : py1, px1, py1, px1, py0], rightInk);
+        }
+        else
+            edge(x1 - r, y + t, r, h - t - b, rightStyle, rightInk, false);
     }
 }
+/**
+ * Whether the corner two sides meet at is cut on its diagonal, each side
+ * taking its half (CSS Backgrounds 3, 4.3): where both have a width, they
+ * are painted in different colours or only one is painted at all, and each
+ * is solid or unpainted. Sides of one colour make the same corner either
+ * way, and so does a corner of a single pixel, which is left to the side
+ * that has it.
+ */
+function mitred(a, b, inkA, inkB, styleA, styleB) {
+    if (!(a > 0 && b > 0) || (a <= 1 && b <= 1) || inkA === inkB)
+        return false;
+    return ((inkA === null || styleA === 'solid') &&
+        (inkB === null || styleB === 'solid'));
+}
+/**
+ * Fill a convex polygon, its corners as `x, y` pairs, cut to `area`: the
+ * part of it near what is painted, which is what keeps a side thousands of
+ * pixels long inside X's coordinates. Cut edge by edge rather than by
+ * moving its corners in, which would turn a diagonal that crosses the
+ * painted area: a slanted divider, `border-left: 100vw solid transparent`,
+ * has a corner far outside it.
+ */
+function fillPolygon(ctx, points, area) {
+    const bounds = [area.x, area.y, area.x + area.w, area.y + area.h];
+    let cut = points;
+    // each edge of the area in turn: what is inside it is kept, and an edge
+    // of the polygon that crosses it ends on it (Sutherland–Hodgman)
+    for (let edge = 0; edge < 4 && cut.length; edge += 1) {
+        const axis = edge & 1;
+        const bound = bounds[edge];
+        const sign = edge < 2 ? 1 : -1;
+        const from = cut;
+        cut = [];
+        for (let i = 0; i < from.length; i += 2) {
+            const j = (i + 2) % from.length;
+            const da = sign * (from[i + axis] - bound);
+            const db = sign * (from[j + axis] - bound);
+            if (da >= 0)
+                cut.push(from[i], from[i + 1]);
+            if (da < 0 !== db < 0) {
+                const k = da / (da - db);
+                const other = from[i + 1 - axis] + (from[j + 1 - axis] - from[i + 1 - axis]) * k;
+                if (axis)
+                    cut.push(other, bound);
+                else
+                    cut.push(bound, other);
+            }
+        }
+    }
+    if (cut.length < 6)
+        return;
+    ctx.beginPath();
+    ctx.moveTo(cut[0], cut[1]);
+    for (let i = 2; i < cut.length; i += 2)
+        ctx.lineTo(cut[i], cut[i + 1]);
+    ctx.closePath?.();
+    ctx.fill();
+}
 /**
  * A box's border image in place of its border's style (CSS Backgrounds 3,
  * 6.2): the image cut into nine by its slices, drawn over the border image
@@ -2825,9 +3861,10 @@ function paintBorderImage(ctx, box, options) {
         const drawn = options.cached?.(`border-image|${key}|${w}x${h}`, w, h, (sctx) => {
             if (svg)
                 svg.draw(sctx, 0, 0, w, h, scale);
-            else if (typeof source !== 'string' && sctx.createLinearGradient) {
-                sctx.fillStyle = linearGradient(sctx, source, 0, 0, w, h, box.style.color);
-                sctx.fillRect(0, 0, w, h);
+            else if (typeof source !== 'string') {
+                const paint = gradientFill(sctx, source, 0, 0, w, h, box.style.color);
+                if (paint)
+                    fillGradient(sctx, paint, { x: 0, y: 0, w, h });
             }
         });
         if (!drawn)
@@ -3460,7 +4497,9 @@ function fitted(box, x, y, w, h) {
     };
 }
 /** An inline `<svg>`, drawn in its content box. Its `currentColor` is the
- *  box's `color`, as an icon's is the text's around it. */
+ *  box's `color`, as an icon's is the text's around it, and what it is
+ *  painted with the box's `fill` and `stroke`, where the document's style
+ *  sheets set them: an icon set's `.icon { fill: currentColor }`. */
 function paintSvg(ctx, box, options) {
     if (!box.el)
         return;
@@ -3468,7 +4507,11 @@ function paintSvg(ctx, box, options) {
     const y = Math.round(box.contentY + options.originY);
     const w = Math.round(box.contentX + options.originX + box.contentWidth) - x;
     const h = Math.round(box.contentY + options.originY + box.contentHeight) - y;
-    inlineDrawing(box.el).draw(ctx, x, y, w, h, options.scale ?? 1, box.style.color);
+    const style = box.style;
+    const paint = (value) => value === null || value === 'currentColor' || value === 'none'
+        ? value
+        : inkColor(value, style.color);
+    inlineDrawing(box.el).draw(ctx, x, y, w, h, options.scale ?? 1, style.color, paint(style.fill), paint(style.stroke));
 }
 /**
  * The X protocol carries glyph positions as Int16, so anything drawn past
@@ -3502,8 +4545,15 @@ function paintLines(ctx, box, options) {
         const bottom = top + damage.height;
         let lo = 0;
         let hi = lines.length;
-        const slack = top - box.maxLineHeight;
-        while (lo < hi) {
+        // and a line whose glyphs, or an atomic on it, reach past it
+        // (`LINE_INK`) is drawn where they reach
+        const ink = LINE_INK.get(lines);
+        const above = ink?.above ?? 0;
+        const below = ink?.below ?? 0;
+        const slack = top - box.maxLineHeight - below;
+        // the lines columns took apart are in no order down the page
+        const apart = columned.any && COLUMN_LINES.has(lines);
+        while (!apart && lo < hi) {
             const mid = (lo + hi) >> 1;
             if (lines[mid].y > slack)
                 hi = mid;
@@ -3512,10 +4562,16 @@ function paintLines(ctx, box, options) {
         }
         for (let i = lo; i < lines.length; i += 1) {
             const line = lines[i];
-            if (line.y >= bottom)
+            if (line.y - above >= bottom) {
+                if (apart)
+                    continue;
                 break;
-            if (line.y + line.height > top)
+            }
+            if (line.y < bottom && line.y + line.height > top)
+                visible.push(line);
+            else if (ink && inkInto(line, top, bottom)) {
                 visible.push(line);
+            }
         }
         // and a line the damage misses whose text or inline-block `position:
         // relative` moved into it: drawn by its line, it went undrawn with it
@@ -3523,7 +4579,7 @@ function paintLines(ctx, box, options) {
         if (moved && reachedOff(visible, moved, top, bottom)) {
             const drawn = new Set(visible);
             for (const line of moved) {
-                if (movedInto(line, top, bottom))
+                if (inkInto(line, top, bottom))
                     drawn.add(line);
             }
             visible.length = 0;
@@ -3544,8 +4600,13 @@ function paintLines(ctx, box, options) {
         paintInlineBoxes(ctx, line, lines, options, line === lines[0] ? null : bleeds);
         for (const text of line.texts) {
             const natural = text.layout.lines[text.layoutLine];
-            if (natural)
-                paintRunBackgrounds(ctx, natural, text.drawX + dx, text.drawY + dy, options.scale ?? 1);
+            if (!natural)
+                continue;
+            for (const laid of [natural, trailOf(text, natural)]) {
+                if (!laid)
+                    continue;
+                paintRunBackgrounds(ctx, laid, text.drawX + dx, text.drawY + dy, options.scale ?? 1);
+            }
         }
         paintSelection(ctx, line, options);
     }
@@ -3560,11 +4621,17 @@ function paintLines(ctx, box, options) {
     // drawing it once per line would be one X request per line for the same
     // batch.
     const drawn = new Set();
+    // text a `::selection` colours is drawn in that colour where selected
+    const recolored = options.selectionStyler
+        ? recoloredBands(visible, options)
+        : null;
     for (const line of visible) {
         for (const text of line.texts) {
-            if (drawn.has(text.layout))
+            // once for each column its lines are in, where they are in several
+            const rows = columned.any ? COLUMN_ROWS.get(text) : undefined;
+            if (drawn.has(rows ?? text.layout))
                 continue;
-            drawn.add(text.layout);
+            drawn.add(rows ?? text.layout);
             const top = text.drawY + dy;
             if (top < -COORD_LIMIT || top + text.layout.height > COORD_LIMIT) {
                 // A single layout so tall its own lines overflow the Int16 envelope
@@ -3574,7 +4641,14 @@ function paintLines(ctx, box, options) {
                 // thrown from the protocol encoder.
                 continue;
             }
-            text.layout.draw(ctx, text.drawX + dx, top);
+            const bands = recolored?.get(text.layout);
+            const clipped = rows !== undefined && clipToRows(ctx, text, rows, text.drawX + dx, top);
+            if (bands)
+                drawRecolored(ctx, text.layout, text.drawX + dx, top, bands);
+            else
+                text.layout.draw(ctx, text.drawX + dx, top);
+            if (clipped)
+                ctx.restore();
         }
     }
     paintRules(ctx, visible, dx, dy, options.scale ?? 1, 'over');
@@ -3588,7 +4662,10 @@ function paintLines(ctx, box, options) {
         for (const placed of line.atomics) {
             if (hoisted && HOISTED.has(placed.box))
                 continue;
-            paintBox(ctx, placed.box, options);
+            if (turns(placed.box))
+                paintTransformed(ctx, placed.box, options);
+            else
+                paintBox(ctx, placed.box, options);
         }
     }
 }
@@ -3596,15 +4673,16 @@ function paintLines(ctx, box, options) {
  *  does not already draw, has it within the damage's rows. */
 function reachedOff(visible, moved, top, bottom) {
     for (const line of moved) {
-        if (!visible.includes(line) && movedInto(line, top, bottom))
+        if (!visible.includes(line) && inkInto(line, top, bottom))
             return true;
     }
     return false;
 }
-/** Whether what was moved off a line — its inline-blocks and images, where
- *  their ink is, and its texts, where they are drawn — reaches the rows
- *  between `top` and `bottom`. */
-function movedInto(line, top, bottom) {
+/** Whether what a line draws — its inline-blocks and images, where their
+ *  ink is, and its texts, where they are drawn, their glyphs from ascent to
+ *  descent — reaches the rows between `top` and `bottom`: what was moved off
+ *  it, and what hangs past it. */
+function inkInto(line, top, bottom) {
     for (const placed of line.atomics) {
         const box = placed.box;
         if (box.boundsY < bottom && box.boundsY + box.boundsHeight > top) {
@@ -3615,8 +4693,10 @@ function movedInto(line, top, bottom) {
         const natural = text.layout.lines[text.layoutLine];
         if (!natural)
             continue;
-        const y = text.drawY + natural.y;
-        if (y < bottom && y + natural.height > top)
+        const baseline = text.drawY + natural.baseline;
+        const y1 = Math.min(text.drawY + natural.y, baseline - (natural.ascent ?? 0));
+        const y2 = Math.max(text.drawY + natural.y + natural.height, baseline + (natural.descent ?? 0));
+        if (y1 < bottom && y2 > top)
             return true;
     }
     return false;
@@ -3729,7 +4809,9 @@ function paintClippedText(ctx, block, lines, options) {
             (style.backgroundImages?.find((image) => image !== null && typeof image !== 'string') ||
                 null);
         let fill = null;
-        if (gradient && ctx.createLinearGradient) {
+        // where the fill is a picture of the gradient, the corner it starts at
+        let origin = null;
+        if (gradient) {
             if (!(area.width > 0 && area.height > 0))
                 continue;
             // the text it shows through: what the fill is drawn over
@@ -3745,9 +4827,31 @@ function paintClippedText(ctx, block, lines, options) {
                     y1 = Math.max(y1, r.y + r.height);
                 }
             }
-            fill = linearGradient(ctx, gradient, area.x, area.y, area.width, area.height, style.color, x1 > x0 ? { x: x0, y: y0, w: x1 - x0, h: y1 - y0 } : null);
+            const paint = gradientFill(ctx, gradient, area.x, area.y, area.width, area.height, style.color, x1 > x0 ? { x: x0, y: y0, w: x1 - x0, h: y1 - y0 } : null);
+            if (paint?.matrix) {
+                // An ellipse is a circle filled through a matrix, which would draw
+                // the glyphs through it too: they are filled with a picture of the
+                // gradient instead, drawn once at the area's size
+                const left = Math.round(area.x);
+                const top = Math.round(area.y);
+                const w = Math.max(1, Math.round(area.x + area.width) - left);
+                const h = Math.max(1, Math.round(area.y + area.height) - top);
+                const picture = ctx.createPattern && ctx.translate
+                    ? options.cached?.(`clip-text|${gradientKey(gradient, style.color)}|${w}x${h}`, w, h, (sctx) => {
+                        const p = gradientFill(sctx, gradient, 0, 0, w, h, style.color);
+                        if (p)
+                            fillGradient(sctx, p, { x: 0, y: 0, w, h });
+                    })
+                    : null;
+                if (!picture)
+                    continue;
+                fill = ctx.createPattern(picture, 'no-repeat');
+                origin = { x: left, y: top };
+            }
+            else if (paint)
+                fill = paint.style;
         }
-        else if (!isTransparent(style.backgroundColor)) {
+        if (fill === null && !isTransparent(style.backgroundColor)) {
             fill = inkColor(style.backgroundColor, style.color);
         }
         if (fill === null)
@@ -3762,7 +4866,13 @@ function paintClippedText(ctx, block, lines, options) {
                 ctx.rect(r.x, r.y, r.width, r.height);
             ctx.clip();
             ctx.fillStyle = fill;
-            inkless.draw(ctx, part.x, part.y);
+            if (origin) {
+                // a pattern is placed from the origin of the space it fills
+                ctx.translate(origin.x, origin.y);
+                inkless.draw(ctx, part.x - origin.x, part.y - origin.y);
+            }
+            else
+                inkless.draw(ctx, part.x, part.y);
             ctx.restore();
         }
     }
@@ -3793,11 +4903,16 @@ function paintTextShadows(ctx, lines, options) {
                 continue;
             const left = text.drawX + dx;
             if (cast !== MIXED) {
-                // every run casts the same: the layout's once for each shadow
-                if (whole.has(layout))
+                // every run casts the same: the layout's once for each shadow, in
+                // each column its lines are in
+                const rows = columned.any ? COLUMN_ROWS.get(text) : undefined;
+                if (whole.has(rows ?? layout))
                     continue;
-                whole.add(layout);
+                whole.add(rows ?? layout);
+                const clipped = rows !== undefined && clipToRows(ctx, text, rows, left, top);
                 castShadows(ctx, text, left, top, cast, null);
+                if (clipped)
+                    ctx.restore();
                 continue;
             }
             const natural = layout.lines[text.layoutLine];
@@ -3908,12 +5023,37 @@ function paintRules(ctx, lines, dx, dy, scale, rules) {
         const shifted = SHIFTED_LINES.has(line);
         for (const text of line.texts) {
             const natural = text.layout.lines[text.layoutLine];
-            if (natural) {
-                paintRunRules(ctx, natural, text.drawX + dx, text.drawY + dy + (shifted ? ruleDrop(text) : 0), scale, rules);
+            if (!natural)
+                continue;
+            for (const laid of [natural, trailOf(text, natural)]) {
+                if (!laid)
+                    continue;
+                paintRunRules(ctx, laid, text.drawX + dx, text.drawY + dy + (shifted ? ruleDrop(text) : 0), scale, rules);
             }
         }
     }
 }
+/**
+ * The spaces a text ends on where its line goes on after them
+ * (`LineText.trail`), as a line of one run to draw the decorations of: the
+ * run they are the end of, as wide as they are, after the line's content.
+ * The engine stripped them from the piece it laid out as a line, and a
+ * link's underline stopped at its last letter, a space short of where a
+ * browser draws it. Null where the text has none, or reads right to left.
+ */
+function trailOf(text, natural) {
+    if (!text.trail || !text.trailRun)
+        return null;
+    const last = natural.runs[natural.runs.length - 1];
+    if (!last || last.run?.direction === 'rtl')
+        return null;
+    return {
+        ...natural,
+        runs: [
+            { ...last, x: natural.width, width: text.trail, span: text.trailRun },
+        ],
+    };
+}
 /**
  * How far below a raised text its rules go: to the baseline of the element
  * that decorates it. `vertical-align` moves the text and not the lines an
@@ -4361,15 +5501,34 @@ export function forgetDecoratedAncestors(box) {
  *
  * Translucent under the glyphs rather than inverted over them, so the ink
  * keeps its contrast on either palette — the same call `<textarea>` and
- * `<richtext>` both make.
+ * `<richtext>` both make. From the top of the line to its bottom, and past
+ * them over the glyphs where they are taller than the line (`selectionRows`).
  */
 function paintSelection(ctx, line, options) {
+    for (const band of selectedBands(line, options)) {
+        const fill = band.style ? band.style.background : options.selectionColor;
+        if (!fill || isTransparent(fill))
+            continue;
+        ctx.fillStyle = fill;
+        ctx.fillRect(band.x, band.y, band.width, band.height);
+    }
+}
+const NO_BANDS = [];
+/**
+ * Where the document selection covers a line's text, a band for each
+ * stretch of it one `::selection` styles, in window pixels as the band is
+ * filled — rounded, so a band's text is drawn to its edges and no further
+ * (`drawRecolored`).
+ */
+function selectedBands(line, options) {
     const range = options.selection;
-    if (!range || range.end <= range.start || !options.selectionColor)
-        return;
-    if (line.textEnd <= range.start || line.textStart >= range.end)
-        return;
-    ctx.fillStyle = options.selectionColor;
+    if (!range || range.end <= range.start)
+        return NO_BANDS;
+    if (line.textEnd <= range.start || line.textStart >= range.end) {
+        return NO_BANDS;
+    }
+    const styler = options.selectionStyler;
+    const out = [];
     for (const text of line.texts) {
         const natural = text.layout.lines[text.layoutLine];
         if (!natural)
@@ -4381,9 +5540,192 @@ function paintSelection(ctx, line, options) {
         const offsets = layoutOffsets(text.layout);
         const layoutFrom = layoutOffsetOf(text, from);
         const layoutTo = layoutOffsetOf(text, to, true);
-        for (const band of lineBands(text.layout, natural, offsets, layoutFrom, layoutTo)) {
-            ctx.fillRect(Math.round(band.x + text.drawX + options.originX), Math.round(line.y + options.originY), Math.ceil(band.width), Math.ceil(line.height));
+        const rows = selectionRows(line, text, natural);
+        const y = Math.round(rows.y + options.originY);
+        const height = Math.ceil(rows.height);
+        const pieces = styler
+            ? stylePieces(text, natural, layoutFrom, layoutTo, styler)
+            : [{ from: layoutFrom, to: layoutTo, style: null }];
+        for (const piece of pieces) {
+            for (const band of lineBands(text.layout, natural, offsets, piece.from, piece.to)) {
+                out.push({
+                    x: Math.round(band.x + text.drawX + options.originX),
+                    y,
+                    width: Math.ceil(band.width),
+                    height,
+                    style: piece.style,
+                    layout: text.layout,
+                });
+            }
+        }
+    }
+    return out;
+}
+/**
+ * A line's selected text, `from` to `to` in the layout's offsets, cut where
+ * the `::selection` over it changes: a run's is its element's, and a run of
+ * no element's — an inline box's edge, laid out as a spacer — the one
+ * beside it, so a styled band has no palette-coloured gap at a `<span>`.
+ */
+function stylePieces(text, natural, from, to, styler) {
+    const runs = natural.runs
+        .filter((run) => run.end > from && run.start < to)
+        .sort((a, b) => a.start - b.start);
+    const boxAt = text.spans.boxAt;
+    const styles = runs.map((run) => {
+        const box = boxAt?.call(text.spans, run.start) ?? null;
+        return box ? styler(box) : undefined;
+    });
+    for (let i = 1; i < styles.length; i += 1) {
+        if (styles[i] === undefined)
+            styles[i] = styles[i - 1];
+    }
+    for (let i = styles.length - 2; i >= 0; i -= 1) {
+        if (styles[i] === undefined)
+            styles[i] = styles[i + 1];
+    }
+    const out = [];
+    runs.forEach((run, i) => {
+        const style = styles[i] ?? null;
+        const last = out[out.length - 1];
+        if (last && last.style === style)
+            last.to = Math.min(to, run.end);
+        else {
+            out.push({
+                from: Math.max(from, run.start),
+                to: Math.min(to, run.end),
+                style,
+            });
+        }
+    });
+    return out;
+}
+/**
+ * The layouts whose selected text a `::selection` gives a colour of its
+ * own, each with the bands it is drawn in that colour (`drawRecolored`).
+ * Null where none does, which is every document with no such rule.
+ */
+function recoloredBands(lines, options) {
+    let out = null;
+    for (const line of lines) {
+        for (const band of selectedBands(line, options)) {
+            if (!band.style?.color || !(band.width > 0))
+                continue;
+            out ??= new Map();
+            const list = out.get(band.layout);
+            if (list)
+                list.push(band);
+            else
+                out.set(band.layout, [band]);
+        }
+    }
+    return out;
+}
+/**
+ * A layout with some of its text selected in a `::selection`'s colour
+ * (CSS Pseudo 4, 3.2): its own colours everywhere but those bands, and in
+ * each band the glyphs in that band's colour — cast there as a hard shadow
+ * from the layout drawn clear of the window, the way `castShadows` draws a
+ * text shadow, since a layout draws in its runs' own colours. Drawn over
+ * rather than in place of the text, the old glyphs' edges showed round the
+ * new ones. Where the context cannot clip or cast, the text keeps its own
+ * colours.
+ */
+function drawRecolored(ctx, layout, left, top, bands) {
+    if (!ctx.save ||
+        !ctx.restore ||
+        !ctx.beginPath ||
+        !ctx.rect ||
+        !ctx.clip ||
+        !('shadowBlur' in ctx)) {
+        layout.draw(ctx, left, top);
+        return;
+    }
+    ctx.save();
+    ctx.beginPath();
+    for (const r of outsideOf(bands))
+        ctx.rect(r.x, r.y, r.width, r.height);
+    ctx.clip();
+    layout.draw(ctx, left, top);
+    ctx.restore();
+    let right = layout.width;
+    for (const natural of layout.lines) {
+        right = Math.max(right, natural.x + natural.width);
+    }
+    const shift = Math.ceil(left + right) + 1;
+    const colors = new Map();
+    for (const band of bands) {
+        const color = band.style.color;
+        const group = colors.get(color);
+        if (group)
+            group.push(band);
+        else
+            colors.set(color, [band]);
+    }
+    for (const [color, group] of colors) {
+        ctx.save();
+        ctx.beginPath();
+        for (const r of group)
+            ctx.rect(r.x, r.y, r.width, r.height);
+        ctx.clip();
+        ctx.shadowColor = color;
+        ctx.shadowBlur = 0.01;
+        ctx.shadowOffsetX = shift;
+        ctx.shadowOffsetY = 0;
+        layout.draw(ctx, left - shift, top);
+        ctx.restore();
+    }
+}
+/** Everything but some rectangles, as rectangles: a strip between each two
+ *  of their edges, less what of it they cover. */
+function outsideOf(rects) {
+    const far = COORD_LIMIT;
+    const edges = new Set();
+    for (const r of rects) {
+        edges.add(r.y);
+        edges.add(r.y + r.height);
+    }
+    const ys = [...edges].sort((a, b) => a - b);
+    const out = [
+        { x: -far, y: -far, width: 2 * far, height: ys[0] + far },
+        {
+            x: -far,
+            y: ys[ys.length - 1],
+            width: 2 * far,
+            height: far - ys[ys.length - 1],
+        },
+    ];
+    for (let i = 0; i + 1 < ys.length; i += 1) {
+        const y0 = ys[i];
+        const y1 = ys[i + 1];
+        const spans = rects
+            .filter((r) => r.y <= y0 && r.y + r.height >= y1)
+            .sort((a, b) => a.x - b.x);
+        let x = -far;
+        for (const r of spans) {
+            if (r.x > x)
+                out.push({ x, y: y0, width: r.x - x, height: y1 - y0 });
+            x = Math.max(x, r.x + r.width);
         }
+        if (x < far)
+            out.push({ x, y: y0, width: far - x, height: y1 - y0 });
     }
+    return out;
+}
+/**
+ * The rows a highlight over a line's text covers: the line box's, united
+ * with the text's content area — its face's ascent above the baseline to
+ * its descent below (CSS 2.1 10.6.1) — which is taller wherever
+ * `line-height` is under the face's height. Blink unites the two in the
+ * block direction (`ExpandSelectionRectToLineHeight`), so a selection over
+ * a tall line fills it and one over tall glyphs on a short line covers
+ * them: Zen Garden 215's 91px title on 20px lines had a band a fifth of
+ * its letters' height through their middle.
+ */
+export function selectionRows(line, text, natural) {
+    const baseline = text.drawY + natural.baseline;
+    const top = Math.min(line.y, baseline - (natural.ascent ?? 0));
+    const bottom = Math.max(line.y + line.height, baseline + (natural.descent ?? 0));
+    return { y: top, height: bottom - top };
 }
 //# sourceMappingURL=paint.js.map