@react-x11/components 0.13.0 → 0.14.0

package/src/html/paint.ts

@@ -26,16 +26,25 @@ import {
   paintRunRules,
 } from '../richtext/runs.js';
 import type { FillContext } 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 type { Len } from './css/values.js';
 import type {
   BackgroundClip,
   BackgroundRepeat,
   BoxShadow,
   ComputedStyle,
+  Gradient,
+  GradientStop,
   ImageRepeat,
   LinearGradient,
+  RadialGradient,
   RepeatMode,
 } from './css/style.js';
 import {
@@ -46,7 +55,10 @@ import {
   masked,
   scrolls,
 } from './css/style.js';
-import { contained } from './layout/block.js';
+import { LARGEST } from './css/calc.js';
+import { invert, mapRect, transformed } from './css/transform.js';
+import type { Matrix } from './css/transform.js';
+import { contained, placedMatrix } from './layout/block.js';
 import {
   BOX_RAISES,
   LINE_BOX_RAISES,
@@ -55,6 +67,10 @@ import {
   CLAMPED,
   CLIPPED_CELLS,
   COLLAPSED_CELLS,
+  COLUMN_LINES,
+  COLUMN_PIECES,
+  COLUMN_ROWS,
+  columned,
   FADED_BLOCKS,
   PAINT_ORDER,
   INLINE_OFFSETS,
@@ -66,6 +82,7 @@ import {
 } from './layout/boxes.js';
 import type {
   BoxTree,
+  ColumnPiece,
   EdgePlacement,
   LineBox,
   LineText,
@@ -124,6 +141,24 @@ export interface PaintContext extends FillContext {
     x1: number,
     y1: number,
   ): { addColorStop(offset: number, color: string): void };
+  createRadialGradient?(
+    x0: number,
+    y0: number,
+    r0: number,
+    x1: number,
+    y1: number,
+    r1: number,
+  ): { addColorStop(offset: number, color: string): void };
+  /** Multiplies the current matrix, which a fill's paint is sampled
+   *  through and a path already laid down is not. */
+  transform?(
+    a: number,
+    b: number,
+    c: number,
+    d: number,
+    e: number,
+    f: number,
+  ): void;
   clip?(): void;
   /** Canvas shadows: ntk bakes and caches the blur, CoreGraphics draws it. */
   shadowColor?: string;
@@ -134,6 +169,20 @@ export interface PaintContext extends FillContext {
   /** ntk's X11 context has patterns; the Cocoa one does not, and tiles. */
   createPattern?(image: unknown, repetition: string): unknown;
   translate?(x: number, y: number): void;
+  /** Multiplies the context's matrix: what a transformed box is drawn
+   *  through (`paintTransformed`). */
+  transform?(
+    a: number,
+    b: number,
+    c: number,
+    d: number,
+    e: number,
+    f: number,
+  ): void;
+  /** Whether text drawn under a matrix that turns or scales is drawn
+   *  turned and scaled, glyphs and all: the native contexts', and not
+   *  ntk's, whose glyphs are drawn as they were shaped. */
+  scalesText?: boolean;
   /** What every drawing is multiplied by: an element's `opacity`. */
   globalAlpha?: number;
   /** How a drawing meets what is under it; a value a backend does not
@@ -151,8 +200,9 @@ export interface PaintOptions {
   /** Where the document's origin sits in the window. Scrolling is this. */
   originX: number;
   originY: number;
-  /** Device pixels per logical pixel, for the run rules — a link's
-   *  underline is a logical pixel thick, not a device one. Default 1. */
+  /** Device pixels per logical pixel, for the run rules — the two lines
+   *  of a double one are a logical pixel apart, not a device one; a rule's
+   *  thickness is its style's, in device pixels already. Default 1. */
   scale?: number;
   /** The rectangle being repainted, in window coordinates, or null for all. */
   damage: Rect | null;
@@ -228,6 +278,28 @@ const LINE_INK = new WeakMap<
   { above: number; below: number }
 >();
 
+/**
+ * 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<Box, Rect>();
+
+/** 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: Box): Rect {
+  return (
+    UNTRANSFORMED.get(box) ?? {
+      x: box.boundsX,
+      y: box.boundsY,
+      width: box.boundsWidth,
+      height: box.boundsHeight,
+    }
+  );
+}
+
 export function computePaintBounds(box: Box, moved = false): number {
   // A box with no rectangle of its own gives only what it holds: nothing,
   // until a child with bounds is met.
@@ -398,6 +470,37 @@ export function computePaintBounds(box: Box, moved = false): number {
   }
   if (lines && (above > 0 || below > 0)) LINE_INK.set(lines, { above, below });
   else if (lines) LINE_INK.delete(lines);
+  // a `clip-path` cuts the box and all it holds: no ink past the path, and
+  // none where it leaves nothing — though the scrollable overflow is what
+  // it was, as a browser has it, which is why a page that hides a box with
+  // one makes it a pixel square as well
+  if (own && box.style.clipPath) {
+    const { rect } = clipPathOf(box, DOCUMENT);
+    x1 = Math.max(x1, rect.x);
+    y1 = Math.max(y1, rect.y);
+    x2 = Math.min(x2, rect.x + rect.w);
+    y2 = Math.min(y2, rect.y + rect.h);
+    if (!(x2 > x1 && y2 > y1)) x1 = Infinity;
+  }
+  // A box that turns, scales or skews draws what it holds through its
+  // matrix (`paintTransformed`): its ink is where that puts it, the
+  // rectangle around the one it would have filled, and the one it would
+  // have filled is kept for the paint inside it, which is in its own
+  // coordinates. One flattened to nothing draws nothing.
+  const matrix = own ? placedMatrix(box) : null;
+  if (matrix && x1 !== Infinity) {
+    UNTRANSFORMED.set(box, { x: x1, y: y1, width: x2 - x1, height: y2 - y1 });
+    if (invert(matrix)) {
+      // no further than a length reaches (`LARGEST`): a page's
+      // `scale(1e30)` is a box as large as a browser holds one, and no
+      // larger
+      const to = mapRect(matrix, x1, y1, x2 - x1, y2 - y1);
+      x1 = Math.max(to.x, -LARGEST);
+      y1 = Math.max(to.y, -LARGEST);
+      x2 = Math.min(to.x + to.width, LARGEST);
+      y2 = Math.min(to.y + to.height, LARGEST);
+    } else x1 = Infinity;
+  }
   if (x1 === Infinity) {
     // nothing to draw: no damage meets it, and no parent takes it in
     box.boundsX = Infinity;
@@ -420,12 +523,20 @@ export function computePaintBounds(box: Box, moved = false): number {
   // 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);
 }
 
 /**
@@ -574,6 +685,20 @@ export function paintDocument(
   if (!canFill(ctx)) return;
   ctx.save();
   const canvas = canvasBackground(tree);
+  const scheme = rootScheme(tree);
+  if (scheme !== tree.paletteScheme) {
+    // A document is drawn on the window's own ground, the palette's, as an
+    // embedded one is on a transparent canvas. Where its root's colour
+    // scheme is not the scheme of what it is embedded in, its canvas is
+    // opaque, in the `Canvas` colour of its own (CSS Color Adjust 1, 2.2):
+    // a page that says it is light, and sets its text dark on no
+    // background, is not read against a dark window.
+    const area = canvasArea(tree.root, options);
+    if (area) {
+      ctx.fillStyle = SCHEME_COLORS[scheme].canvas;
+      ctx.fillRect(area.x, area.y, area.w, area.h);
+    }
+  }
   if (canvas) paintCanvas(ctx, canvas, tree.root, options);
   paintBox(ctx, tree.root, {
     ...options,
@@ -631,6 +756,34 @@ function canvasBackground(tree: BoxTree): CanvasBackground | null {
     : 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: BoxTree): 'light' | 'dark' {
+  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: Box,
+  options: PaintOptions,
+): { x: number; y: number; w: number; h: number } | null {
+  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. */
@@ -651,19 +804,7 @@ function paintCanvas(
   root: Box,
   options: PaintOptions,
 ): void {
-  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];
   const visible = source.visibility === 'visible';
@@ -673,7 +814,7 @@ function paintCanvas(
       ctx.fillStyle = inkColor(style.backgroundColor as string, 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
@@ -936,28 +1077,312 @@ function paintBox(ctx: PaintContext, box: Box, options: PaintOptions): void {
     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) ctx.restore();
+  // 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: PaintContext,
+  box: Box,
+  options: PaintOptions,
+): void {
+  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: Matrix = [
+    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: PaintOptions = {
+    ...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: Box): boolean {
+  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: PaintContext, box: Box, options: PaintOptions): void {
+  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: Box): boolean {
+  if (box.subtreeTextEnd > box.subtreeTextStart) return false;
+  const stack: Box[] = [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: PaintContext,
+  box: Box,
+  options: PaintOptions,
+  through: Matrix,
+): boolean {
+  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: PaintOptions = {
+      ...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') as PaintContext, 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: PaintContext,
   box: Box,
   options: PaintOptions,
 ): void {
-  const clip = box.outOfFlow && box.style.clip ? clipOf(box, options) : null;
-  if (clip && !(clip.w > 0 && clip.h > 0)) return;
-  const clipped = !!clip && pushClip(ctx, clip, null);
-  paintContent(ctx, box, options);
-  if (clipped) ctx.restore();
+  const pushed = pushOwnClips(ctx, box, options);
+  if (pushed < 0) return;
+  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: PaintContext,
+  box: Box,
+  options: PaintOptions,
+): number {
+  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: Box): boolean {
+  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: PaintOptions): PaintOptions {
+  return { ...options, clips: [] };
 }
 
 const MASK_LAYERS = new WeakMap<ComputedStyle, ComputedStyle[]>();
@@ -1200,6 +1625,13 @@ function paintOwnBackground(
   if (box.kind === 'table-row' || box.kind === 'table-row-group') return;
   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) {
     paintLayers(ctx, box, options, frameImages(ctx, box, options));
@@ -1211,6 +1643,88 @@ function paintOwnBackground(
   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: PaintContext,
+  box: Box,
+  pieces: readonly ColumnPiece[],
+  options: PaintOptions,
+): void {
+  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: 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: PaintContext,
+  text: LineText,
+  rows: { top: number; bottom: number },
+  left: number,
+  top: number,
+): boolean {
+  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
@@ -1632,6 +2146,8 @@ function inFlow(parent: Box, child: Box, options: PaintOptions): boolean {
     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)
   );
@@ -1660,6 +2176,7 @@ function flowFlex(parent: Box, child: Box, options: PaintOptions): boolean {
     style.overflowY === 'visible' &&
     !(child.outOfFlow && style.clip) &&
     !masked(style) &&
+    !style.clipPath &&
     !contained(child, CONTAIN_LAYOUT | CONTAIN_PAINT)
   );
 }
@@ -1750,7 +2267,7 @@ function paintFlowLines(
  *  beyond its background's edge. */
 function overflowClip(
   box: Box,
-  options: PaintOptions,
+  options: ClipSpace,
 ): { x: number; y: number; w: number; h: number } {
   const left = box.x + options.originX;
   const top = frameY(box) + options.originY;
@@ -1776,7 +2293,7 @@ function overflowClip(
  */
 function clipEdge(
   box: Box,
-  options: PaintOptions,
+  options: ClipSpace,
 ): {
   rect: { x: number; y: number; w: number; h: number };
   radii: Corners | null;
@@ -1932,7 +2449,9 @@ function paintPositioned(
       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));
 }
 
 /**
@@ -1971,12 +2490,19 @@ export const FIXED_BOXES = new WeakMap<object, Box[]>();
 export function fixedToViewport(box: Box): boolean {
   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)) return false;
+    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: Box): boolean {
+  return (
+    transformed(box.style) || contained(box, CONTAIN_LAYOUT | CONTAIN_PAINT)
+  );
+}
+
 function rootOf(box: Box): Box {
   let root = box;
   while (root.parent) root = root.parent;
@@ -1986,17 +2512,22 @@ function rootOf(box: Box): 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: Box): Box | null {
-  if (box.style.position === 'fixed') return null;
+  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;
   }
@@ -2080,7 +2611,7 @@ export function clipsOverflow(box: Box): boolean {
 /** A box's `clip` region, in window coordinates. */
 function clipOf(
   box: Box,
-  options: PaintOptions,
+  options: ClipSpace,
 ): { x: number; y: number; w: number; h: number } {
   const clip = box.style.clip!;
   const left = clip.left ?? 0;
@@ -2097,6 +2628,212 @@ function clipOf(
   };
 }
 
+/** What placing a clip reads of a paint's options: where the document's
+ *  origin is, its scale, and how far an axis left open has to reach. */
+type ClipSpace = Pick<PaintOptions, 'originX' | 'originY' | 'scale' | 'damage'>;
+
+/** The document's own coordinates, as a space to place a clip in. */
+const DOCUMENT: ClipSpace = { 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: Box,
+  options: ClipSpace,
+): {
+  rect: { x: number; y: number; w: number; h: number };
+  radii: Corners | null;
+} {
+  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: Corners | null = 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: Corners): Corners | null {
+  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: Box, x: number, y: number): boolean {
+  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: Box, x: number, y: number): boolean {
+  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: Box, scale = 1): Rect | null {
+  const space: ClipSpace = { 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: { x: number; y: number; w: number; h: number }) => {
+    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: Box): Box | null =>
+    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 | null = 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
@@ -2177,6 +2914,24 @@ function cornersOf(style: ComputedStyle, w: number, h: number): Corners | null {
   ) {
     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: readonly Len[],
+  down: readonly Len[] | null,
+  w: number,
+  h: number,
+  fitW: number,
+  fitH: number,
+): Corners | null {
   const vertical = down ?? across;
   const x: Corners['x'] = [0, 0, 0, 0];
   const y: Corners['y'] = [0, 0, 0, 0];
@@ -2194,10 +2949,10 @@ function cornersOf(style: ComputedStyle, w: number, h: number): Corners | null {
   const fit = (side: number, sum: number): void => {
     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;
@@ -2349,8 +3104,7 @@ function layered(parent: Box, child: Box): boolean {
   if (
     style.position !== 'relative' &&
     style.position !== 'sticky' &&
-    !style.translate &&
-    !style.transformTranslate
+    !transformed(style)
   ) {
     return false;
   }
@@ -2364,7 +3118,7 @@ function layered(parent: Box, child: Box): boolean {
  * drawn twice — darker at every antialiased edge — and a translucent
  * background had its alpha doubled.
  */
-function onLine(parent: Box, child: Box): boolean {
+export function onLine(parent: Box, child: Box): boolean {
   if (parent.lines === null && parent.kind !== 'inline') return false;
   if (child.isFloat || child.outOfFlow) return false;
   return (
@@ -2438,20 +3192,26 @@ function settleLayers(box: Box, list: Box[]): void {
  * 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: Box): boolean {
+export function stacksLayers(box: Box): boolean {
   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)) return true;
+  // 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);
 }
@@ -2475,7 +3235,7 @@ export function clipsFor(box: Box, context: Box): Box[] {
     const fixed = box.style.position === 'fixed';
     while (from && from !== context) {
       const style = from.style;
-      if (style.translate || style.transformTranslate) break;
+      if (transformed(style)) break;
       if (!fixed && style.position !== 'static') break;
       from = from.parent;
     }
@@ -2571,9 +3331,19 @@ function hoistFrom(box: Box, root: boolean): Box[] | null {
 }
 
 function byZIndex(a: Box, b: Box): number {
-  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: Box): number {
+  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. */
@@ -2673,7 +3443,7 @@ function paintBackground(
     ctx.fillStyle = inkColor(color as string, 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
@@ -2695,7 +3465,7 @@ function paintBackground(
       // one fill in the rounded shape; under the borders it carries on
       // with its end colours where a browser would show the next tile
       if (!(at.width > 0 && at.height > 0)) return;
-      ctx.fillStyle = linearGradient(
+      const paint = gradientFill(
         ctx,
         gradient,
         at.x,
@@ -2705,7 +3475,7 @@ function paintBackground(
         style.color,
         rect,
       );
-      fill();
+      if (paint) fillGradient(ctx, paint, rect, rounded);
     } else paintGradient(ctx, style, gradient, rect, at);
   }
 }
@@ -2735,7 +3505,7 @@ const NO_SIZE: IntrinsicSize = { width: null, height: null, ratio: 0 };
 function paintGradient(
   ctx: PaintContext,
   style: ComputedStyle,
-  gradient: LinearGradient,
+  gradient: Gradient,
   area: { x: number; y: number; w: number; h: number },
   at: Rect,
 ): void {
@@ -2784,17 +3554,8 @@ function paintGradient(
   ) {
     // 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) {
@@ -2806,17 +3567,8 @@ function paintGradient(
       const right = Math.min(x + w, area.x + area.w);
       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);
     }
   }
 }
@@ -2856,32 +3608,11 @@ function linearGradient(
   const dy = -Math.cos(angle);
   const length = Math.abs(w * dx) + Math.abs(h * dy);
   const stops = gradient.stops;
-  const at: (number | null)[] = stops.map((stop) =>
-    stop.at === null
-      ? null
-      : length > 0
-        ? resolve(stop.at, length) / length
-        : 0,
-  );
-  if (at[0] === null) at[0] = 0;
-  if (at[at.length - 1] === null) at[at.length - 1] = 1;
-  for (let i = 1; i < at.length; i += 1) {
-    if (at[i] === null) {
-      // spread the ones without a position between the ones with
-      let j = i;
-      while (at[j] === null) j += 1;
-      const from = at[i - 1]!;
-      const to = at[j]!;
-      for (let k = i; k < j; k += 1) {
-        at[k] = from + ((to - from) * (k - i + 1)) / (j - i + 1);
-      }
-    }
-    at[i] = Math.max(at[i]!, at[i - 1]!);
-  }
+  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 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;
@@ -2912,11 +3643,278 @@ function linearGradient(
   }
   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]);
+    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: GradientStop[], length: number): number[] {
+  const at: (number | null)[] = stops.map((stop) =>
+    stop.at === null
+      ? null
+      : length > 0
+        ? resolve(stop.at, length) / length
+        : 0,
+  );
+  if (at[0] === null) at[0] = 0;
+  if (at[at.length - 1] === null) at[at.length - 1] = 1;
+  for (let i = 1; i < at.length; i += 1) {
+    if (at[i] === null) {
+      // spread the ones without a position between the ones with
+      let j = i;
+      while (at[j] === null) j += 1;
+      const from = at[i - 1]!;
+      const to = at[j]!;
+      for (let k = i; k < j; k += 1) {
+        at[k] = from + ((to - from) * (k - i + 1)) / (j - i + 1);
+      }
+    }
+    at[i] = Math.max(at[i]!, at[i - 1]!);
+  }
+  return at as number[];
+}
+
+/** What a gradient fills with: the context's gradient, or the one colour
+ *  it comes to, and the matrix it is sampled through where it is an
+ *  ellipse — a context's radial gradients are circles, and an ellipse is
+ *  one stretched along its longer axis. */
+interface GradientFill {
+  style: unknown;
+  matrix: [number, number, number, number, number, number] | null;
+}
+
+/** 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: PaintContext,
+  gradient: Gradient,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  currentColor: string,
+  visible: { x: number; y: number; w: number; h: number } | null = null,
+): GradientFill | null {
+  if (gradient.kind === 'radial') {
+    return radialGradient(ctx, gradient, x, y, w, h, currentColor, visible);
+  }
+  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: PaintContext,
+  gradient: RadialGradient,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  currentColor: string,
+  visible: { x: number; y: number; w: number; h: number } | null = null,
+): GradientFill | 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: number;
+  let ry: number;
+  if (gradient.radii) {
+    rx = resolve(gradient.radii[0], w);
+    ry = resolve(gradient.radii[1], h);
+  } 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: PaintContext,
+  at: number[],
+  colors: string[],
+  ax: number,
+  ay: number,
+  rx: number,
+  ry: number,
+  seen: { x: number; y: number; w: number; h: number },
+): GradientFill | null {
+  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: PaintContext): boolean {
+  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: PaintContext,
+  fill: GradientFill,
+  r: { x: number; y: number; w: number; h: number },
+  corners: Corners | null = null,
+): void {
+  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
  * ends in 16.16 fixed point, and a pair past ±32,767 pixels threw from the
@@ -2972,30 +3970,32 @@ function clippedGradient(
     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: number): string => {
-    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: number[], colors: string[], t: number): string {
+  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
@@ -3403,16 +4403,6 @@ function tileSize(
   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
@@ -3471,6 +4461,25 @@ function paintOutline(
   );
 }
 
+/**
+ * Borders, a side at a time.
+ *
+ * As rectangles where they can be, the top and the bottom full width and
+ * the sides between them, and not as a stroked path, for the reason
+ * richtext gives about its underlines: the mock backend has no path API, and
+ * a 1px border on a pixel grid is a rectangle rather than something an
+ * antialiased stroke improves. That is every border whose sides share a
+ * colour, where a corner looks the same whichever side it is given to.
+ *
+ * Where two sides that meet differ in colour — one of them transparent
+ * included — the corner is cut on the diagonal from its outer point to its
+ * inner one and each side takes its half (CSS Backgrounds 3, 4.3), so a side
+ * is a trapezoid, and a triangle where the box inside the borders has no
+ * width: the CSS triangle a dropdown's caret and a tooltip's arrow are
+ * drawn with, which came out as the rectangle around it. Only a solid side
+ * is cut, and only against a side that is solid or paints nothing; dots,
+ * dashes and a double border's two lines keep their rectangles.
+ */
 function paintBorders(
   ctx: PaintContext,
   box: Frame,
@@ -3490,6 +4499,30 @@ function paintBorders(
   if (roundedRing(ctx, box, x, y, w, h, options)) return;
   if (sculpted(s) && paintSculpted(ctx, box, x, y, w, h, options)) return;
 
+  const t = box.borderTop;
+  const r = box.borderRight;
+  const b = box.borderBottom;
+  const l = box.borderLeft;
+  /** What a side is painted in, null where it paints nothing. */
+  const ink = (width: number, color: string): string | null =>
+    width > 0 && !isTransparent(color) ? inkColor(color, s.color) : null;
+  const topInk = ink(t, s.borderTopColor);
+  const rightInk = ink(r, s.borderRightColor);
+  const bottomInk = ink(b, s.borderBottomColor);
+  const leftInk = ink(l, s.borderLeftColor);
+  // the corners cut on the diagonal; none where the context draws no path,
+  // and the sides are rectangles
+  const paths = !!(ctx.beginPath && ctx.moveTo && ctx.lineTo && ctx.fill);
+  const topStyle = s.borderTopStyle;
+  const rightStyle = s.borderRightStyle;
+  const bottomStyle = s.borderBottomStyle;
+  const leftStyle = s.borderLeftStyle;
+  const tl = paths && mitred(t, l, topInk, leftInk, topStyle, leftStyle);
+  const tr = paths && mitred(t, r, topInk, rightInk, topStyle, rightStyle);
+  const br =
+    paths && mitred(b, r, bottomInk, rightInk, bottomStyle, rightStyle);
+  const bl = paths && mitred(b, l, bottomInk, leftInk, bottomStyle, leftStyle);
+
   const edge = (
     ex: number,
     ey: number,
@@ -3501,47 +4534,130 @@ function paintBorders(
   ): void => {
     const rect = clampRect(options, ex, ey, ew, eh);
     if (!rect) return;
-    ctx.fillStyle = inkColor(color, s.color);
+    ctx.fillStyle = color;
     // The un-clamped start is the dash phase's origin, so the pattern does
     // not crawl as the viewport moves along a long edge.
     fillEdge(ctx, rect, horizontal ? ex : ey, style, horizontal);
   };
-  if (box.borderTop > 0 && !isTransparent(s.borderTopColor)) {
-    edge(x, y, w, box.borderTop, s.borderTopStyle, s.borderTopColor, true);
+  /** A side with a cut corner: its outer edge and then its inner one. */
+  const side = (points: number[], color: string): void => {
+    const area = clampRect(options, x, y, w, h);
+    if (!area) return;
+    ctx.fillStyle = color;
+    fillPolygon(ctx, points, area);
+  };
+  // the border box's far edges, and the padding box inside it
+  const x1 = x + w;
+  const y1 = y + h;
+  const px0 = x + l;
+  const py0 = y + t;
+  const px1 = Math.max(px0, x1 - r);
+  const py1 = Math.max(py0, y1 - b);
+  // The left and the right are drawn after the top and the bottom. Where
+  // one of them is opaque it draws its half of a cut corner over the side
+  // drawn before, which keeps the whole corner: two halves each
+  // antialiased along the diagonal would let what is under the border
+  // show through between them.
+  const over = (color: string | null): boolean =>
+    color !== null && alphaOf(color) === 1;
+  if (topInk !== null) {
+    const cutLeft = tl && !over(leftInk);
+    const cutRight = tr && !over(rightInk);
+    if (cutLeft || cutRight) {
+      side(
+        [x, y, x1, y, cutRight ? px1 : x1, py0, cutLeft ? px0 : x, py0],
+        topInk,
+      );
+    } else edge(x, y, w, t, topStyle, topInk, true);
+  }
+  if (bottomInk !== null) {
+    const cutLeft = bl && !over(leftInk);
+    const cutRight = br && !over(rightInk);
+    if (cutLeft || cutRight) {
+      side(
+        [x1, y1, x, y1, cutLeft ? px0 : x, py1, cutRight ? px1 : x1, py1],
+        bottomInk,
+      );
+    } else edge(x, y1 - b, w, b, bottomStyle, bottomInk, true);
   }
-  if (box.borderBottom > 0 && !isTransparent(s.borderBottomColor)) {
-    edge(
-      x,
-      y + h - box.borderBottom,
-      w,
-      box.borderBottom,
-      s.borderBottomStyle,
-      s.borderBottomColor,
-      true,
-    );
+  if (leftInk !== null) {
+    if (tl || bl) {
+      side([x, bl ? y1 : py1, x, tl ? y : py0, px0, py0, px0, py1], leftInk);
+    } else edge(x, y + t, l, h - t - b, leftStyle, leftInk, false);
   }
-  if (box.borderLeft > 0 && !isTransparent(s.borderLeftColor)) {
-    edge(
-      x,
-      y + box.borderTop,
-      box.borderLeft,
-      h - box.borderTop - box.borderBottom,
-      s.borderLeftStyle,
-      s.borderLeftColor,
-      false,
-    );
+  if (rightInk !== null) {
+    if (tr || br) {
+      side([x1, tr ? y : py0, x1, br ? y1 : py1, px1, py1, px1, py0], rightInk);
+    } else edge(x1 - r, y + t, r, h - t - b, rightStyle, rightInk, false);
   }
-  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,
-    );
+}
+
+/**
+ * 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: number,
+  b: number,
+  inkA: string | null,
+  inkB: string | null,
+  styleA: ComputedStyle['borderTopStyle'],
+  styleB: ComputedStyle['borderTopStyle'],
+): boolean {
+  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: PaintContext,
+  points: number[],
+  area: { x: number; y: number; w: number; h: number },
+): void {
+  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!();
 }
 
 /**
@@ -3605,17 +4721,9 @@ function paintBorderImage(
       h,
       (sctx) => {
         if (svg) svg.draw(sctx, 0, 0, w, h, scale);
-        else if (typeof source !== 'string' && sctx.createLinearGradient) {
-          sctx.fillStyle = linearGradient(
-            sctx,
-            source,
-            0,
-            0,
-            w,
-            h,
-            box.style.color,
-          );
-          sctx.fillRect(0, 0, w, h);
+        else if (typeof source !== 'string') {
+          const paint = gradientFill(sctx, source, 0, 0, w, h, box.style.color);
+          if (paint) fillGradient(sctx, paint, { x: 0, y: 0, w, h });
         }
       },
     );
@@ -3739,11 +4847,11 @@ function paintBorderImage(
   return true;
 }
 
-const GRADIENT_KEYS = new WeakMap<LinearGradient, string>();
+const GRADIENT_KEYS = new WeakMap<Gradient, string>();
 
 /** A gradient as a key for what is drawn of it: its angle and stops, and
  *  the colour `currentColor` among them is. */
-function gradientKey(gradient: LinearGradient, color: string): string {
+function gradientKey(gradient: Gradient, color: string): string {
   let key = GRADIENT_KEYS.get(gradient);
   if (key === undefined) {
     key = JSON.stringify(gradient);
@@ -4317,13 +5425,20 @@ function fitted(
 }
 
 /** An inline `<svg>`, drawn in its content box. Its `currentColor` is the
- *  box's `color`, as an icon's is the text's around it. */
+ *  box's `color`, as an icon's is the text's around it, and what it is
+ *  painted with the box's `fill` and `stroke`, where the document's style
+ *  sheets set them: an icon set's `.icon { fill: currentColor }`. */
 function paintSvg(ctx: PaintContext, box: Box, options: PaintOptions): void {
   if (!box.el) return;
   const x = Math.round(box.contentX + options.originX);
   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;
+  const style = box.style;
+  const paint = (value: string | null): string | null =>
+    value === null || value === 'currentColor' || value === 'none'
+      ? value
+      : inkColor(value, style.color);
   inlineDrawing(box.el).draw(
     ctx,
     x,
@@ -4331,7 +5446,9 @@ function paintSvg(ctx: PaintContext, box: Box, options: PaintOptions): void {
     w,
     h,
     options.scale ?? 1,
-    box.style.color,
+    style.color,
+    paint(style.fill),
+    paint(style.stroke),
   );
 }
 
@@ -4374,14 +5491,19 @@ function paintLines(ctx: PaintContext, box: Box, options: PaintOptions): void {
     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;
       else lo = mid + 1;
     }
     for (let i = lo; i < lines.length; i += 1) {
       const line = lines[i];
-      if (line.y - above >= bottom) break;
+      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)) {
         visible.push(line);
@@ -4415,14 +5537,17 @@ function paintLines(ctx: PaintContext, box: Box, options: PaintOptions): void {
     );
     for (const text of line.texts) {
       const natural = text.layout.lines[text.layoutLine];
-      if (natural)
+      if (!natural) continue;
+      for (const laid of [natural, trailOf(text, natural)]) {
+        if (!laid) continue;
         paintRunBackgrounds(
           ctx,
-          natural,
+          laid,
           text.drawX + dx,
           text.drawY + dy,
           options.scale ?? 1,
         );
+      }
     }
     paintSelection(ctx, line, options);
   }
@@ -4445,8 +5570,10 @@ function paintLines(ctx: PaintContext, box: Box, options: PaintOptions): void {
     : null;
   for (const line of visible) {
     for (const text of line.texts) {
-      if (drawn.has(text.layout)) continue;
-      drawn.add(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(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
@@ -4457,8 +5584,11 @@ function paintLines(ctx: PaintContext, box: Box, options: PaintOptions): void {
         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();
     }
   }
 
@@ -4471,7 +5601,8 @@ function paintLines(ctx: PaintContext, box: Box, options: PaintOptions): void {
   for (const line of visible) {
     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);
     }
   }
 }
@@ -4648,12 +5779,14 @@ function paintClippedText(
     const gradient =
       style.backgroundGradient ??
       (style.backgroundImages?.find(
-        (image): image is LinearGradient =>
+        (image): image is Gradient =>
           image !== null && typeof image !== 'string',
       ) ||
         null);
     let fill: unknown = null;
-    if (gradient && ctx.createLinearGradient) {
+    // where the fill is a picture of the gradient, the corner it starts at
+    let origin: { x: number; y: number } | null = null;
+    if (gradient) {
       if (!(area.width > 0 && area.height > 0)) continue;
       // the text it shows through: what the fill is drawn over
       let x0 = Infinity;
@@ -4668,7 +5801,7 @@ function paintClippedText(
           y1 = Math.max(y1, r.y + r.height);
         }
       }
-      fill = linearGradient(
+      const paint = gradientFill(
         ctx,
         gradient,
         area.x,
@@ -4678,7 +5811,40 @@ function paintClippedText(
         style.color,
         x1 > x0 ? { x: x0, y: y0, w: x1 - x0, h: y1 - y0 } : null,
       );
-    } else if (!isTransparent(style.backgroundColor)) {
+      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;
+    }
+    if (fill === null && !isTransparent(style.backgroundColor)) {
       fill = inkColor(style.backgroundColor as string, style.color);
     }
     if (fill === null) continue;
@@ -4690,7 +5856,11 @@ function paintClippedText(
       for (const r of part.rects) 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();
     }
   }
@@ -4730,10 +5900,15 @@ function paintTextShadows(
       if (cast === null) 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)) continue;
-        whole.add(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(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];
@@ -4865,10 +6040,12 @@ function paintRules(
     const shifted = SHIFTED_LINES.has(line);
     for (const text of line.texts) {
       const natural = text.layout.lines[text.layoutLine];
-      if (natural) {
+      if (!natural) continue;
+      for (const laid of [natural, trailOf(text, natural)]) {
+        if (!laid) continue;
         paintRunRules(
           ctx,
-          natural,
+          laid,
           text.drawX + dx,
           text.drawY + dy + (shifted ? ruleDrop(text) : 0),
           scale,
@@ -4879,6 +6056,29 @@ function paintRules(
   }
 }
 
+/**
+ * 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<L extends LineText['layout']['lines'][number]>(
+  text: LineText,
+  natural: L,
+): L | null {
+  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