@react-x11/components 0.13.0 → 0.14.1

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';
@@ -52,6 +54,24 @@ export const OUT_OF_FLOW_REACH = new WeakMap();
  * 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.
@@ -231,6 +251,40 @@ export function computePaintBounds(box, moved = false) {
         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;
@@ -255,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
@@ -411,6 +473,20 @@ 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, {
@@ -418,6 +494,7 @@ export function paintDocument(ctx, tree, options) {
         canvasSource: canvas?.source,
         negative: tree.negative,
         selectionStyler: options.selection ? tree.selectionStyler : null,
+        shapeStyler: tree.shapeStyler,
     });
     ctx.restore();
 }
@@ -463,6 +540,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. */
@@ -479,13 +574,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];
@@ -496,7 +585,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
@@ -664,28 +753,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). */
@@ -826,8 +1176,9 @@ function paintContent(ctx, box, options) {
             paintStacked(ctx, child, options);
     }
     if (visible) {
-        if (box.marker)
-            paintMarker(ctx, box.marker, options);
+        if (box.marker) {
+            paintMarker(ctx, box.marker, options, box.style.colorScheme);
+        }
         if (box.replaced === 'image')
             paintImage(ctx, box, options);
         else if (box.replaced === 'svg')
@@ -921,6 +1272,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) {
@@ -934,6 +1292,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
@@ -1220,6 +1642,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));
 }
@@ -1246,6 +1670,7 @@ function flowFlex(parent, child, options) {
         style.overflowY === 'visible' &&
         !(child.outOfFlow && style.clip) &&
         !masked(style) &&
+        !style.clipPath &&
         !contained(child, CONTAIN_LAYOUT | CONTAIN_PAINT));
 }
 /**
@@ -1319,7 +1744,7 @@ function paintFlowLines(ctx, box, options, outlines) {
         if (!intersects(child, options))
             continue;
         if (child.marker && child.style.visibility === 'visible') {
-            paintMarker(ctx, child.marker, options);
+            paintMarker(ctx, child.marker, options, child.style.colorScheme);
         }
         if (child.lines)
             paintLines(ctx, child, options);
@@ -1472,7 +1897,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
@@ -1509,13 +1938,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)
@@ -1525,17 +1957,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;
@@ -1628,6 +2065,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
@@ -1686,6 +2318,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];
@@ -1706,10 +2348,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;
@@ -1838,8 +2480,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);
@@ -1851,7 +2492,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)
@@ -1927,24 +2568,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);
@@ -1967,7 +2615,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;
@@ -2067,9 +2715,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) {
@@ -2147,7 +2805,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
@@ -2170,8 +2828,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);
@@ -2219,8 +2878,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) {
@@ -2234,8 +2894,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);
         }
     }
 }
@@ -2265,6 +2926,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
@@ -2288,30 +2982,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
@@ -2353,29 +3212,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
@@ -2568,12 +3428,13 @@ function paintBackgroundImage(ctx, style, area, at, options, corners = null) {
         // a drawing is drawn a tile at a time, at the size it was given
         if (tiles <= MAX_TILES) {
             for (let y = fromY; y < toY; y += stepY) {
-                for (let x = fromX; x < toX; x += stepX)
-                    svg.draw(ctx, Math.round(x), Math.round(y), iw, ih, scale);
+                for (let x = fromX; x < toX; x += stepX) {
+                    svg.drawImage(ctx, Math.round(x), Math.round(y), iw, ih, scale, style.colorScheme);
+                }
             }
         }
         else {
-            svg.draw(ctx, x0, y0, iw, ih, scale);
+            svg.drawImage(ctx, x0, y0, iw, ih, scale, style.colorScheme);
         }
     }
     else if (tiles > 1 &&
@@ -2721,16 +3582,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
@@ -2782,6 +3633,26 @@ 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, the lines
+ * joined where two double sides of one colour meet (`fillSide`).
+ */
 function paintBorders(ctx, box, options) {
     // most boxes have none, and are asked on every paint
     if (!(box.borderTop || box.borderRight || box.borderBottom || box.borderLeft))
@@ -2799,27 +3670,145 @@ function paintBorders(ctx, box, options) {
         return;
     if (sculpted(s) && paintSculpted(ctx, box, x, y, w, h, options))
         return;
-    const edge = (ex, ey, ew, eh, style, color, horizontal) => {
-        const rect = clampRect(options, ex, ey, ew, eh);
-        if (!rect)
+    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 widths = [t, r, b, l];
+    const joins = doubleJoins(box);
+    /** A side with square corners, the top first and clockwise. */
+    const edge = (at, style, color) => {
+        ctx.fillStyle = color;
+        fillSide(ctx, options, at, x, y, w, h, widths, style, joins);
+    };
+    /** 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 = inkColor(color, s.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);
+        ctx.fillStyle = color;
+        fillPolygon(ctx, points, area);
     };
-    if (box.borderTop > 0 && !isTransparent(s.borderTopColor)) {
-        edge(x, y, w, box.borderTop, s.borderTopStyle, s.borderTopColor, true);
+    // 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(0, topStyle, topInk);
     }
-    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(2, bottomStyle, bottomInk);
     }
-    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(3, leftStyle, leftInk);
     }
-    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(1, rightStyle, rightInk);
+    }
+}
+/**
+ * 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,
@@ -2871,12 +3860,14 @@ function paintBorderImage(ctx, box, options) {
         const svg = image instanceof SvgDrawing ? image : null;
         const w = Math.max(1, Math.round(cw));
         const h = Math.max(1, Math.round(ch));
-        const drawn = options.cached?.(`border-image|${key}|${w}x${h}`, w, h, (sctx) => {
+        const scheme = box.style.colorScheme;
+        const drawn = options.cached?.(`border-image|${key}|${w}x${h}|${scheme}`, 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);
+                svg.drawImage(sctx, 0, 0, w, h, scale, scheme);
+            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)
@@ -3074,22 +4065,107 @@ function roundedRing(ctx, box, x, y, w, h, options) {
         return true;
     if (isTransparent(color))
         return true;
-    const rect = clampRect(options, x, y, w, h);
-    if (!rect)
+    const ring = cutRing(options, x, y, w, h, corners, box.borderTop, box.borderRight, box.borderBottom, box.borderLeft);
+    if (!ring)
         return true;
-    const top = box.borderTop;
-    const right = box.borderRight;
-    const bottom = box.borderBottom;
-    const left = box.borderLeft;
+    const { outer, inner } = ring;
     ctx.fillStyle = inkColor(color, s.color);
-    fillRing(ctx, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }, corners, {
-        x: rect.x + left,
-        y: rect.y + top,
-        width: Math.max(0, rect.w - left - right),
-        height: Math.max(0, rect.h - top - bottom),
-    }, insetCorners(corners, top, right, bottom, left));
+    fillRing(ctx, outer.rect, outer.corners, inner ? inner.rect : { x: 0, y: 0, width: 0, height: 0 }, inner ? inner.corners : outer.corners);
     return true;
 }
+/**
+ * A rounded box's ring — its border edge and its padding edge, the box
+ * inside its borders — cut to the neighbourhood of what is being painted,
+ * as `clampRect` cuts a rectangle. Both edges are the box's own, cut to
+ * one window, so what is left is the part of the true ring in it. Cutting
+ * the box first and insetting the cut by the borders put the hole a
+ * border's width in from the cut rather than from the box's edge, and left
+ * none where a border was wider than `CLAMP_PAD`: the ring filled whatever
+ * of the box a paint reached. A cut is straight, so a side of the window
+ * is moved out past any corner's curve it would cross, and a corner on a
+ * side the window cut is square, its curve being outside. Null where the
+ * ring has nothing in the window.
+ */
+function cutRing(options, x, y, w, h, corners, top, right, bottom, left) {
+    const { x: cx, y: cy } = corners;
+    // where each corner's curve runs, across and down — the padding edge's
+    // run inside the border edge's
+    const across = [
+        [x, x + cx[0]],
+        [x + w - cx[1], x + w],
+        [x + w - cx[2], x + w],
+        [x, x + cx[3]],
+    ];
+    const down = [
+        [y, y + cy[0]],
+        [y, y + cy[1]],
+        [y + h - cy[2], y + h],
+        [y + h - cy[3], y + h],
+    ];
+    const d = options.damage;
+    const side = (at, spans, towards) => Math.max(-COORD_LIMIT, Math.min(COORD_LIMIT, outOfSpans(at, spans, towards)));
+    const x0 = side(d ? d.x - CLAMP_PAD : -COORD_LIMIT, across, -1);
+    const y0 = side(d ? d.y - CLAMP_PAD : -COORD_LIMIT, down, -1);
+    const x1 = side(d ? d.x + d.width + CLAMP_PAD : COORD_LIMIT, across, 1);
+    const y1 = side(d ? d.y + d.height + CLAMP_PAD : COORD_LIMIT, down, 1);
+    const cut = (rx, ry, rw, rh, c) => {
+        const l = Math.max(rx, x0);
+        const t = Math.max(ry, y0);
+        const r = Math.min(rx + rw, x1);
+        const b = Math.min(ry + rh, y1);
+        if (r <= l || b <= t)
+            return null;
+        // the corners of the sides the window left where they were
+        const kept = [
+            t === ry && l === rx,
+            t === ry && r === rx + rw,
+            b === ry + rh && r === rx + rw,
+            b === ry + rh && l === rx,
+        ];
+        return {
+            rect: { x: l, y: t, width: r - l, height: b - t },
+            corners: {
+                x: c.x.map((v, i) => (kept[i] ? v : 0)),
+                y: c.y.map((v, i) => (kept[i] ? v : 0)),
+            },
+        };
+    };
+    const outer = cut(x, y, w, h, corners);
+    if (!outer)
+        return null;
+    const iw = w - left - right;
+    const ih = h - top - bottom;
+    const inner = iw > 0 && ih > 0
+        ? cut(x + left, y + top, iw, ih, insetCorners(corners, top, right, bottom, left))
+        : null;
+    // a window inside the padding edge, where the ring has nothing
+    if (inner && sameRounded(outer, inner))
+        return null;
+    return { outer, inner };
+}
+/** A position moved out of any of `spans` it is inside, towards their
+ *  starts where `towards` is negative and their ends where it is not. */
+function outOfSpans(at, spans, towards) {
+    for (let moved = true; moved;) {
+        moved = false;
+        for (const [from, to] of spans) {
+            if (at > from && at < to) {
+                at = towards < 0 ? from : to;
+                moved = true;
+            }
+        }
+    }
+    return at;
+}
+/** Whether two rounded rectangles are one shape. */
+function sameRounded(a, b) {
+    return (a.rect.x === b.rect.x &&
+        a.rect.y === b.rect.y &&
+        a.rect.width === b.rect.width &&
+        a.rect.height === b.rect.height &&
+        a.corners.x.every((v, i) => v === b.corners.x[i]) &&
+        a.corners.y.every((v, i) => v === b.corners.y[i]));
+}
 /**
  * Clip to what a box's border paints, for a layer of `background-clip:
  * border-area` (CSS Backgrounds 4, 2.1): each side's width and style, and
@@ -3097,12 +4173,17 @@ function roundedRing(ctx, box, x, y, w, h, options) {
  * the value is for. The shapes are the border painter's own, so that the
  * background shows exactly where that border would: the ring `roundedRing`
  * fills where a rounded border is solid, the ring the trapezoids of a 3D
- * style make, and otherwise the rectangles `fillEdge` fills a side at a
- * time — the dots, the dashes, the two lines of a double border. All of
+ * style make, and otherwise the rectangles `fillSide` fills a side at a
+ * time — the dots, the dashes, the two lines of a double border joined as
+ * they are painted, by the sides' colours though neither is drawn. All of
  * them run clockwise and a ring's inside the other way, so the clip is the
- * union by the non-zero rule, the one every context's `clip` takes. False
- * where the border paints nothing or the context cannot clip, and nothing
- * is pushed.
+ * union by the non-zero rule, the one every context's `clip` takes. Each
+ * is placed from the box's edges and then cut to the painted area: placed
+ * from the cut, a border wider than `CLAMP_PAD` put its bands and its
+ * ring's hole a border's width in from wherever the paint was cut, and
+ * the background was painted over the content of a box repainted in part.
+ * False where the border paints nothing in the painted area or the context
+ * cannot clip, and nothing is pushed.
  */
 function pushBorderArea(ctx, box, options) {
     const t = box.borderTop;
@@ -3121,44 +4202,53 @@ function pushBorderArea(ctx, box, options) {
     const h = Math.round(top + frameHeight(box)) - y;
     if (w <= 0 || h <= 0)
         return false;
-    const area = clampRect(options, x, y, w, h);
-    if (!area)
+    if (!clampRect(options, x, y, w, h))
         return false;
     const corners = cornersOf(s, w, h);
     ctx.save();
     ctx.beginPath();
+    // how many shapes the path has: none, and the border paints nothing here
+    let shapes = 0;
     if (corners && canCurve(ctx) && solidBorder(box)) {
-        roundedRect(ctx, area.x, area.y, area.w, area.h, corners, true);
-        const iw = area.w - l - r;
-        const ih = area.h - t - b;
-        if (iw > 0 && ih > 0) {
-            const inner = insetCorners(corners, t, r, b, l);
-            roundedRect(ctx, area.x + l, area.y + t, iw, ih, inner, true, true);
+        const ring = cutRing(options, x, y, w, h, corners, t, r, b, l);
+        if (ring) {
+            const add = ({ rect, corners: c }, hole) => roundedRect(ctx, rect.x, rect.y, rect.width, rect.height, c, true, hole);
+            add(ring.outer, false);
+            // the padding edge run the other way, which cuts it out
+            if (ring.inner)
+                add(ring.inner, true);
+            shapes = 1;
         }
     }
-    else if (sculpted(s)) {
-        // a band a side, which the trapezoids cover between them
-        ctx.rect(area.x, area.y, area.w, t);
-        ctx.rect(area.x, area.y + area.h - b, area.w, b);
-        ctx.rect(area.x, area.y + t, l, area.h - t - b);
-        ctx.rect(area.x + area.w - r, area.y + t, r, area.h - t - b);
-    }
     else {
-        const path = { fillRect: ctx.rect.bind(ctx) };
-        const edge = (ex, ey, ew, eh, style, horizontal) => {
-            const rect = clampRect(options, ex, ey, ew, eh);
-            if (rect)
-                fillEdge(path, rect, horizontal ? ex : ey, style, horizontal);
+        // A side at a time, from the box's edges and cut to the painted area
+        // after: a 3D side as a band, which the trapezoids cover between them,
+        // and any other as `fillSide` fills it.
+        const path = {
+            fillRect(ex, ey, ew, eh) {
+                ctx.rect(ex, ey, ew, eh);
+                shapes += 1;
+            },
         };
-        const between = h - t - b;
-        if (t > 0)
-            edge(x, y, w, t, s.borderTopStyle, true);
-        if (b > 0)
-            edge(x, y + h - b, w, b, s.borderBottomStyle, true);
-        if (l > 0)
-            edge(x, y + t, l, between, s.borderLeftStyle, false);
-        if (r > 0)
-            edge(x + w - r, y + t, r, between, s.borderRightStyle, false);
+        const widths = [t, r, b, l];
+        const joins = doubleJoins(box);
+        const styles = sculpted(s)
+            ? ['solid', 'solid', 'solid', 'solid']
+            : [
+                s.borderTopStyle,
+                s.borderRightStyle,
+                s.borderBottomStyle,
+                s.borderLeftStyle,
+            ];
+        for (let at = 0; at < 4; at += 1) {
+            if (widths[at] > 0) {
+                fillSide(path, options, at, x, y, w, h, widths, styles[at], joins);
+            }
+        }
+    }
+    if (!shapes) {
+        ctx.restore();
+        return false;
     }
     ctx.clip();
     return true;
@@ -3187,10 +4277,12 @@ function sculpted(s) {
  * colour's shadow and `outset` its bottom and right; `groove` is `inset`
  * outside `outset`, a band each, and `ridge` the other way round
  * (`borderShades`). A side of any other style takes its trapezoid in its
- * colour. The trapezoids are clamped to the painted area, which leaves a
- * cut end square and out of sight and keeps a long box's far corners out
- * of X's coordinates. False where the context cannot draw a path, and the
- * sides are drawn straight.
+ * colour. The trapezoids are cut to the painted area (`fillPolygon`), which
+ * keeps a long box's far corners out of X's coordinates and a join on its
+ * diagonal: its corners clamped in, a border wider than `CLAMP_PAD` turned
+ * the join to cross the damage at 45° wherever it was, and a scrolled
+ * strip smeared the corners of a thick one. False where the context cannot
+ * draw a path, and the sides are drawn straight.
  */
 function paintSculpted(ctx, box, x, y, w, h, options) {
     if (!ctx.beginPath || !ctx.moveTo || !ctx.lineTo || !ctx.fill)
@@ -3203,8 +4295,6 @@ function paintSculpted(ctx, box, x, y, w, h, options) {
     const r = box.borderRight;
     const b = box.borderBottom;
     const l = box.borderLeft;
-    const cx = (v) => Math.max(area.x - 1, Math.min(v, area.x + area.w + 1));
-    const cy = (v) => Math.max(area.y - 1, Math.min(v, area.y + area.h + 1));
     /** The band between the edge `outer` of the way in and `inner`, for one
      *  side: 0 is the border box, 1 the padding box. */
     const band = (side, outer, inner, color) => {
@@ -3224,12 +4314,7 @@ function paintSculpted(ctx, box, x, y, w, h, options) {
                     ? [o.x1, o.y1, o.x0, o.y1, i.x0, i.y1, i.x1, i.y1]
                     : [o.x0, o.y1, o.x0, o.y0, i.x0, i.y0, i.x0, i.y1];
         ctx.fillStyle = color;
-        ctx.beginPath();
-        ctx.moveTo(cx(points[0]), cy(points[1]));
-        for (let k = 2; k < 8; k += 2)
-            ctx.lineTo(cx(points[k]), cy(points[k + 1]));
-        ctx.closePath?.();
-        ctx.fill();
+        fillPolygon(ctx, points, area);
     };
     const sides = [
         [t, s.borderTopStyle, s.borderTopColor],
@@ -3341,6 +4426,91 @@ function paintCollapsedBorders(ctx, table, options) {
         fillEdge(ctx, rect, s.horizontal ? s.x : s.y, s.border.style, s.horizontal);
     }
 }
+/**
+ * One side of a border box at `x, y`, `w` by `h` — `at` counts the top
+ * first and clockwise — as rectangles cut to what the paint reaches: the
+ * top and the bottom the width of the box and the left and the right
+ * between them, so a corner is a square of one side or the other.
+ *
+ * A double side is two lines, a band each along its outer and its inner
+ * edge. Where it meets another double side of its colour (`joins`, the
+ * top left corner first) the lines of the two meet as two frames do, one
+ * inside the other (CSS Backgrounds 3, 4.2 and 4.3): the outer line of the
+ * left or the right runs on to the outer line of the top or the bottom,
+ * and the inner line of the top or the bottom stops at the inner line of
+ * the side. With square corners the outer frame was open at each of them
+ * and the inner line of the top ran on past the side's to the border edge.
+ * Each line is cut to the paint on its own, so a border wider than the
+ * reach around the paint keeps its lines at its edges, and not at the
+ * edges of the part of it cut out.
+ */
+function fillSide(ctx, options, at, x, y, w, h, widths, style, joins) {
+    const [t, r, b, l] = widths;
+    const width = widths[at];
+    const horizontal = (at & 1) === 0;
+    if (style === 'double' && width >= 3) {
+        const band = doubleBand(width);
+        const line = (lx, ly, lw, lh) => {
+            const rect = clampRect(options, lx, ly, lw, lh);
+            if (rect)
+                ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
+        };
+        if (horizontal) {
+            // the outer line the width of the box, and the inner one from the
+            // inner line of a side it joins, or from the edge of the box
+            const from = joins[at === 0 ? 0 : 3] ? x + l - doubleBand(l) : x;
+            const to = joins[at === 0 ? 1 : 2] ? x + w - r + doubleBand(r) : x + w;
+            line(x, at === 0 ? y : y + h - band, w, band);
+            line(from, at === 0 ? y + t - band : y + h - b, to - from, band);
+        }
+        else {
+            // the outer line from the outer line of a side it joins, or from
+            // that side's inner edge, and the inner one between the two sides
+            const from = joins[at === 3 ? 0 : 1] ? y + doubleBand(t) : y + t;
+            const to = joins[at === 3 ? 3 : 2] ? y + h - doubleBand(b) : y + h - b;
+            line(at === 3 ? x : x + w - band, from, band, to - from);
+            line(at === 3 ? x + l - band : x + w - r, y + t, band, h - t - b);
+        }
+        return;
+    }
+    const ex = at === 1 ? x + w - r : x;
+    const ey = at === 0 ? y : at === 2 ? y + h - b : y + t;
+    const rect = horizontal
+        ? clampRect(options, ex, ey, w, width)
+        : clampRect(options, ex, ey, width, h - t - b);
+    // The un-clamped start is the dash phase's origin, so the pattern does
+    // not crawl as the viewport moves along a long edge.
+    if (rect)
+        fillEdge(ctx, rect, horizontal ? ex : ey, style, horizontal);
+}
+/**
+ * The corners of a box where two double sides of one colour meet, the top
+ * left first and clockwise, and whose lines `fillSide` joins. By the
+ * colours as written, a transparent one included, which is how a clip to
+ * the border's area draws the border it does not paint.
+ */
+function doubleJoins(box) {
+    const s = box.style;
+    const color = (width, style, value) => style === 'double' && width >= 3 ? inkColor(value, s.color) : null;
+    const top = color(box.borderTop, s.borderTopStyle, s.borderTopColor);
+    const bottom = color(box.borderBottom, s.borderBottomStyle, s.borderBottomColor);
+    if (top === null && bottom === null)
+        return UNJOINED;
+    const right = color(box.borderRight, s.borderRightStyle, s.borderRightColor);
+    const left = color(box.borderLeft, s.borderLeftStyle, s.borderLeftColor);
+    return [
+        top !== null && top === left,
+        top !== null && top === right,
+        bottom !== null && bottom === right,
+        bottom !== null && bottom === left,
+    ];
+}
+const UNJOINED = [false, false, false, false];
+/** How wide each of a double border's two lines is, the gap between them
+ *  what is left of the side. */
+function doubleBand(thickness) {
+    return Math.max(1, Math.floor(thickness / 3));
+}
 function fillEdge(ctx, rect, phaseOrigin, style, horizontal) {
     const { x, y, w, h } = rect;
     const length = horizontal ? w : h;
@@ -3367,7 +4537,7 @@ function fillEdge(ctx, rect, phaseOrigin, style, horizontal) {
         return;
     }
     if (style === 'double' && thickness >= 3) {
-        const band = Math.max(1, Math.floor(thickness / 3));
+        const band = doubleBand(thickness);
         if (horizontal) {
             ctx.fillRect(x, y, length, band);
             ctx.fillRect(x, y + thickness - band, length, band);
@@ -3381,7 +4551,9 @@ function fillEdge(ctx, rect, phaseOrigin, style, horizontal) {
     ctx.fillRect(x, y, w, h);
 }
 /** A list item's bullet or number, in the margin. */
-function paintMarker(ctx, marker, options) {
+function paintMarker(ctx, marker, options, 
+/** The item's colour scheme, which an SVG image in it is drawn in. */
+scheme) {
     const x = marker.x + options.originX;
     const y = marker.y + options.originY;
     if (marker.image) {
@@ -3391,7 +4563,7 @@ function paintMarker(ctx, marker, options) {
         if (!loaded || !(width > 0 && height > 0))
             return;
         if (loaded.image instanceof SvgDrawing) {
-            loaded.image.draw(ctx, x, y, width, height, options.scale ?? 1);
+            loaded.image.drawImage(ctx, x, y, width, height, options.scale ?? 1, scheme);
         }
         else
             ctx.drawImage?.(loaded.image, x, y, width, height);
@@ -3423,7 +4595,7 @@ function paintImage(ctx, box, options) {
         const past = at.x < x || at.y < y || at.x + at.w > x + w || at.y + at.h > y + h;
         const clipped = (!!corners || past) && pushClip(ctx, { x, y, w, h }, corners);
         if (image instanceof SvgDrawing) {
-            image.draw(ctx, at.x, at.y, at.w, at.h, options.scale ?? 1);
+            image.drawImage(ctx, at.x, at.y, at.w, at.h, options.scale ?? 1, box.style.colorScheme);
         }
         else
             ctx.drawImage(image, at.x, at.y, at.w, at.h);
@@ -3509,7 +4681,10 @@ 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 }`. What
+ *  they give a shape inside it is asked for here (`BoxTree.shapeStyler`). */
 function paintSvg(ctx, box, options) {
     if (!box.el)
         return;
@@ -3517,7 +4692,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), options.shapeStyler?.(box) ?? null);
 }
 /**
  * The X protocol carries glyph positions as Int16, so anything drawn past
@@ -3557,7 +4736,9 @@ function paintLines(ctx, box, options) {
         const above = ink?.above ?? 0;
         const below = ink?.below ?? 0;
         const slack = top - box.maxLineHeight - below;
-        while (lo < hi) {
+        // 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;
@@ -3566,8 +4747,11 @@ function paintLines(ctx, box, options) {
         }
         for (let i = lo; i < lines.length; i += 1) {
             const line = lines[i];
-            if (line.y - above >= bottom)
+            if (line.y - above >= bottom) {
+                if (apart)
+                    continue;
                 break;
+            }
             if (line.y < bottom && line.y + line.height > top)
                 visible.push(line);
             else if (ink && inkInto(line, top, bottom)) {
@@ -3601,8 +4785,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);
     }
@@ -3623,9 +4812,11 @@ function paintLines(ctx, box, 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
@@ -3636,10 +4827,13 @@ function paintLines(ctx, box, options) {
                 continue;
             }
             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');
@@ -3653,7 +4847,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);
         }
     }
 }
@@ -3797,7 +4994,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
@@ -3813,9 +5012,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)
@@ -3830,7 +5051,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();
         }
     }
@@ -3861,11 +5088,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];
@@ -3976,12 +5208,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