@react-x11/components 0.14.0 → 0.16.0

package/src/html/paint.ts

@@ -88,6 +88,7 @@ import type {
   LineText,
   Marker,
   SelectionStyler,
+  ShapeStyler,
 } from './layout/boxes.js';
 import type { SelectionStyle } from './css/cascade.js';
 import {
@@ -100,7 +101,7 @@ import {
 } from './layout/inline.js';
 import { tableGrid } from './layout/grid.js';
 import type { Cell } from './layout/grid.js';
-import { SvgDrawing, inlineDrawing } from './svg.js';
+import { SvgDrawing, concreteSize, inlineDrawing } from './svg.js';
 import type { IntrinsicSize } from './svg.js';
 import type { CollapsedBorder } from './layout/collapse.js';
 
@@ -247,6 +248,9 @@ export interface PaintOptions {
   /** @internal Each box's `::selection`, where a rule styles one
    *  (`BoxTree.selectionStyler`). */
   selectionStyler?: SelectionStyler | null;
+  /** @internal What the rules give the shapes in each drawing, where one
+   *  could reach any (`BoxTree.shapeStyler`). */
+  shapeStyler?: ShapeStyler | null;
 }
 
 /**
@@ -705,6 +709,7 @@ export function paintDocument(
     canvasSource: canvas?.source,
     negative: tree.negative,
     selectionStyler: options.selection ? tree.selectionStyler : null,
+    shapeStyler: tree.shapeStyler,
   });
   ctx.restore();
 }
@@ -971,20 +976,15 @@ function originBox(
  * it falls nearest, as browsers snap a box — boxes that meet share the
  * column their edge is in, and a rule 1.33px wide is one pixel, not two —
  * with the border box's corners less the widths between (5.3), where
- * `rounded` asks for them. Null where it has no area.
+ * `rounded` asks for them — cut to what the paint reaches (`clampArea`).
+ * Null where it has no area there.
  */
 function clipArea(
   box: Frame,
   options: PaintOptions,
   style: ComputedStyle,
   rounded: boolean,
-): {
-  x: number;
-  y: number;
-  w: number;
-  h: number;
-  corners: Corners | null;
-} | null {
+): Area | null {
   const left = box.x + options.originX;
   const top = frameY(box) + options.originY;
   const right = left + box.width;
@@ -1013,7 +1013,7 @@ function clipArea(
       -l,
     );
   }
-  return { x, y, w, h, corners };
+  return clampArea(options, x, y, w, h, corners);
 }
 
 /** What the background and border painters read of a box — which an
@@ -1535,7 +1535,9 @@ function paintContent(
     for (const child of below) 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') paintSvg(ctx, box, options);
   }
@@ -1737,9 +1739,7 @@ function frameImages(
   options: PaintOptions,
 ): (layer: ComputedStyle) => void {
   return (layer) => {
-    const painted = clipArea(frame, options, layer, true);
-    const area =
-      painted && clampRect(options, painted.x, painted.y, painted.w, painted.h);
+    const area = clipArea(frame, options, layer, true);
     if (area) {
       paintBackgroundImage(
         ctx,
@@ -1747,7 +1747,7 @@ function frameImages(
         area,
         originBox(frame, options, layer),
         options,
-        painted.corners,
+        area.corners,
       );
     }
   };
@@ -1761,6 +1761,9 @@ function shadowReach(blur: number): number {
 
 const SQUARE: Corners = { x: [0, 0, 0, 0], y: [0, 0, 0, 0] };
 
+/** A rectangle with no area, where a ring has no inside. */
+const NOWHERE: Rect = { x: 0, y: 0, width: 0, height: 0 };
+
 /** Corners shrunk by `by` — an inner shadow's spread — or grown where it
  *  is negative; a square corner stays square. */
 function grownCorners(c: Corners, by: number): Corners {
@@ -1838,15 +1841,6 @@ function paintShadows(
       ) {
         continue;
       }
-      // Cut, as a background is (`clampRect`), to what the paint reaches
-      // and as far again as the blur does, so the cut edges cast nothing
-      // on it. A shadow down a box thousands of pixels tall went to the
-      // server whole, and its outline, sent in 16.16 fixed point, threw.
-      const within = reach + CLAMP_PAD;
-      const cut = clampAround(options, shape, within);
-      if (!cut) continue;
-      Object.assign(shape, cut);
-      const own = clampAround(options, rect, within) ?? rect;
       const around =
         spreadCorners(
           corners,
@@ -1857,11 +1851,31 @@ function paintShadows(
           s.spread,
           s.spread,
         ) ?? SQUARE;
+      // Cut, as a background is (`clampArea`), to what the paint reaches
+      // and as far again as the blur does, so the cut edges cast nothing
+      // on it, and the box with it, which a ring is the band outside and
+      // the shadow is clipped out of. A shadow down a box thousands of
+      // pixels tall went to the server whole, and its outline, sent in
+      // 16.16 fixed point, threw.
+      const [cut, own] = clampPair(
+        options,
+        reach + CLAMP_PAD,
+        { rect: shape, corners: around },
+        { rect, corners },
+      );
+      if (!cut) continue;
+      const { x, y, width, height } = cut.rect;
       const color = inkColor(s.color, style.color);
       if (!(s.blur > 0) && !s.x && !s.y && s.spread >= 0 && !covered) {
         // a ring about the box: the band between it and the spread
         ctx.fillStyle = color;
-        fillRing(ctx, shape, around, own, corners);
+        fillRing(
+          ctx,
+          cut.rect,
+          cut.corners,
+          own ? own.rect : NOWHERE,
+          own ? own.corners : SQUARE,
+        );
         continue;
       }
       if (!(s.blur > 0) && covered) {
@@ -1871,14 +1885,7 @@ function paintShadows(
           s,
           color,
           (dx) => {
-            roundedRect(
-              ctx,
-              shape.x - dx,
-              shape.y,
-              shape.width,
-              shape.height,
-              around,
-            );
+            roundedRect(ctx, x - dx, y, width, height, cut.corners);
           },
           0,
         );
@@ -1890,21 +1897,24 @@ function paintShadows(
         ctx.save();
         ctx.beginPath();
         ctx.rect!(
-          shape.x - reach - 1,
-          shape.y - reach - 1,
-          shape.width + 2 * reach + 2,
-          shape.height + 2 * reach + 2,
-        );
-        roundedRect(
-          ctx,
-          own.x,
-          own.y,
-          own.width,
-          own.height,
-          corners,
-          true,
-          true,
+          x - reach - 1,
+          y - reach - 1,
+          width + 2 * reach + 2,
+          height + 2 * reach + 2,
         );
+        if (own) {
+          const { rect: r } = own;
+          roundedRect(
+            ctx,
+            r.x,
+            r.y,
+            r.width,
+            r.height,
+            own.corners,
+            true,
+            true,
+          );
+        }
         ctx.clip!();
       }
       fillShadow(
@@ -1912,16 +1922,9 @@ function paintShadows(
         s,
         color,
         (dx) => {
-          shadowShape(
-            ctx,
-            shape.x - dx,
-            shape.y,
-            shape.width,
-            shape.height,
-            around,
-          );
+          shadowShape(ctx, x - dx, y, width, height, cut.corners);
         },
-        shape.x + shape.width + reach,
+        x + width + reach,
       );
       if (clipped) ctx.restore();
     }
@@ -1947,9 +1950,6 @@ function paintShadows(
       );
     }
   }
-  const padCut = clampAround(options, pad, furthest + CLAMP_PAD);
-  if (!padCut) return;
-  Object.assign(pad, padCut);
   const inner = insetCorners(
     corners,
     box.borderTop,
@@ -1961,32 +1961,50 @@ function paintShadows(
     const s = shadows[i];
     if (!s.inset || (s.blur > 0 && !canShadow)) continue;
     const color = inkColor(s.color, style.color);
-    // the hole the shadow is cast around, moved and shrunk by the spread
-    const hole = {
-      x: pad.x + s.x + s.spread,
-      y: pad.y + s.y + s.spread,
-      width: Math.max(0, pad.width - 2 * s.spread),
-      height: Math.max(0, pad.height - 2 * s.spread),
-    };
-    const within = grownCorners(inner, -s.spread);
+    // The hole the shadow is cast around, moved and shrunk by the spread,
+    // cut with the padding box: made from the cut one, it was a spread in
+    // from the cut rather than from the box's edge, and a spread wider
+    // than the margin left none.
+    const [area, hole] = clampPair(
+      options,
+      furthest + CLAMP_PAD,
+      { rect: pad, corners: inner },
+      {
+        rect: {
+          x: pad.x + s.x + s.spread,
+          y: pad.y + s.y + s.spread,
+          width: Math.max(0, pad.width - 2 * s.spread),
+          height: Math.max(0, pad.height - 2 * s.spread),
+        },
+        corners: grownCorners(inner, -s.spread),
+      },
+    );
+    if (!area) continue;
     if (!(s.blur > 0) && !s.x && !s.y && s.spread >= 0) {
       // Tailwind's `ring-inset`: a band inside the padding edge
       ctx.fillStyle = color;
-      fillRing(ctx, pad, inner, hole, within);
+      fillRing(
+        ctx,
+        area.rect,
+        area.corners,
+        hole ? hole.rect : NOWHERE,
+        hole ? hole.corners : SQUARE,
+      );
       continue;
     }
     if (!ctx.clip || !ctx.save || !ctx.rect) continue;
+    const { x, y, width, height } = area.rect;
     ctx.save();
     ctx.beginPath();
-    roundedRect(ctx, pad.x, pad.y, pad.width, pad.height, inner);
+    roundedRect(ctx, x, y, width, height, area.corners);
     ctx.clip();
     // a frame around the hole, as wide as the blur and the offset reach
     const reach = shadowReach(s.blur) + Math.abs(s.x) + Math.abs(s.y) + 1;
     const frame = {
-      x: pad.x - reach,
-      y: pad.y - reach,
-      width: pad.width + 2 * reach,
-      height: pad.height + 2 * reach,
+      x: x - reach,
+      y: y - reach,
+      width: width + 2 * reach,
+      height: height + 2 * reach,
     };
     fillShadow(
       ctx,
@@ -1994,15 +2012,9 @@ function paintShadows(
       color,
       (dx) => {
         ctx.rect!(frame.x - dx, frame.y, frame.width, frame.height);
-        if (hole.width > 0 && hole.height > 0) {
-          shadowShape(
-            ctx,
-            hole.x - dx,
-            hole.y,
-            hole.width,
-            hole.height,
-            within,
-          );
+        if (hole) {
+          const { rect: r } = hole;
+          shadowShape(ctx, r.x - dx, r.y, r.width, r.height, hole.corners);
         }
       },
       frame.x + frame.width + shadowReach(s.blur),
@@ -2250,7 +2262,7 @@ function paintFlowLines(
     }
     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);
     paintFlowLines(ctx, child, options, outlines);
@@ -3410,6 +3422,92 @@ function clampRect(
   return { x: x1, y: y1, w: x2 - x1, h: y2 - y1 };
 }
 
+/** A rectangle with its corners, square where they are null. */
+interface Area {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  corners: Corners | null;
+}
+
+/**
+ * `clampRect` for a rectangle that may be rounded, with the corners it is
+ * left with. Where no radius is larger than `CLAMP_PAD` they are its own,
+ * and it is cut as a square one is: a corner the cut leaves on a cut edge
+ * curves no further in from it than the margin, which keeps it out of what
+ * is painted. A larger radius, a circle's or a pill's, would bend into it
+ * — a circle 400 across repainted a strip at a time was another shape in
+ * every strip across its curve — so there the window is moved out past
+ * any curve it would cross, and a corner on a side it cut is square
+ * (`cutRounded`, as a rounded border's ring is cut).
+ */
+function clampArea(
+  options: PaintOptions,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  corners: Corners | null,
+): Area | null {
+  if (corners && curvesPast(corners, CLAMP_PAD)) {
+    const shape = { rect: { x, y, width: w, height: h }, corners };
+    const cut = cutRounded(roundedWindow(options, [shape]), shape);
+    if (!cut) return null;
+    const { rect } = cut;
+    return {
+      x: rect.x,
+      y: rect.y,
+      w: rect.width,
+      h: rect.height,
+      corners: cut.corners,
+    };
+  }
+  const rect = clampRect(options, x, y, w, h);
+  return rect && { x: rect.x, y: rect.y, w: rect.w, h: rect.h, corners };
+}
+
+/**
+ * Two rounded rectangles drawn against each other — a shadow's shape and
+ * the box it is clipped out of, a hole and what it is cut in — cut to one
+ * window, `pad` round what the paint reaches, as `clampArea` cuts one:
+ * where neither has a corner that curves further than `CLAMP_PAD`, as
+ * square ones are, keeping their corners, and otherwise to a window moved
+ * out past every curve of either it would cross, each square on the sides
+ * it cut. `CLAMP_PAD` and not `pad`, because what a shadow's margin has
+ * past it is what the blur casts back across the cut, and a corner bent
+ * into the margin is cast that far further in. Null for one with nothing
+ * in the window.
+ */
+function clampPair(
+  options: PaintOptions,
+  pad: number,
+  a: Rounded,
+  b: Rounded,
+): [Rounded | null, Rounded | null] {
+  if (!curvesPast(a.corners, CLAMP_PAD) && !curvesPast(b.corners, CLAMP_PAD)) {
+    return [clampKeeping(options, a, pad), clampKeeping(options, b, pad)];
+  }
+  const cut = roundedWindow(options, [a, b], pad);
+  return [cutRounded(cut, a), cutRounded(cut, b)];
+}
+
+/** `clampAround` for a rounded rectangle, keeping its corners. */
+function clampKeeping(
+  options: PaintOptions,
+  { rect, corners }: Rounded,
+  pad: number,
+): Rounded | null {
+  const cut = clampAround(options, rect, pad);
+  return cut && { rect: cut, corners };
+}
+
+/** Whether a corner curves further than `by` along either of its sides. */
+function curvesPast({ x, y }: Corners, by: number): boolean {
+  for (let i = 0; i < 4; i += 1) if (x[i] > by || y[i] > by) return true;
+  return false;
+}
+
 function paintBackground(
   ctx: PaintContext,
   box: Frame,
@@ -3420,20 +3518,16 @@ function paintBackground(
   const gradient = style.backgroundGradient;
   const solid = !isTransparent(color);
   if (!solid && !gradient) return;
-  const area = clipArea(
+  const rect = clipArea(
     box,
     options,
     style,
     !!(ctx.roundRect && ctx.fill && ctx.beginPath),
   );
-  const rect = area && clampRect(options, area.x, area.y, area.w, area.h);
   if (!rect) return;
-  const rounded = area.corners;
+  const rounded = rect.corners;
   const fill = (): void => {
     if (rounded) {
-      // The clamp can only have cut edges further than CLAMP_PAD outside
-      // the damage, and a sane radius is smaller than that — so a corner
-      // that survives the cut is whole, and a cut edge is offscreen.
       ctx.beginPath!();
       roundedRect(ctx, rect.x, rect.y, rect.w, rect.h, rounded);
       ctx.fill!();
@@ -4230,11 +4324,20 @@ function paintBackgroundImage(
     // 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 &&
@@ -4339,7 +4442,7 @@ function roundedTile(
 
 /**
  * A background tile's size (CSS Backgrounds 3, 3.9, over CSS Images' sizing
- * of an object): `auto` is the image's own, as `tileSize` has it; `cover`
+ * of an object): `auto` is the image's own, as `concreteSize` has it; `cover`
  * and `contain` scale it to fill the positioning area or to fit inside it,
  * keeping its ratio, and one with no ratio is the size of the area; and a
  * width or a height alone takes the other from the ratio, or else from the
@@ -4352,7 +4455,8 @@ function sizedTile(
   area: Rect,
   scale: number,
 ): [number, number] {
-  if (size === 'auto') return tileSize(image, area, scale);
+  if (size === 'auto')
+    return concreteSize(image, area.width, area.height, scale);
   const { ratio } = image;
   if (size === 'cover' || size === 'contain') {
     if (!(ratio > 0 && area.height > 0)) return [area.width, area.height];
@@ -4373,34 +4477,7 @@ function sizedTile(
     if (ratio > 0) return [h * ratio, h];
     return [image.width === null ? area.width : image.width * scale, h];
   }
-  return tileSize(image, area, scale);
-}
-
-/**
- * A background image's size, in device pixels, where nothing sets it — CSS
- * 2.1 has no `background-size` — which is CSS Images' default sizing: an
- * image's own size where it has one; the dimension it lacks from its ratio,
- * or else from the positioning area; and one with a ratio alone as large as
- * fits in the area. An SVG may be any of these, and a raster image is the
- * first.
- */
-function tileSize(
-  size: IntrinsicSize,
-  area: Rect,
-  scale: number,
-): [number, number] {
-  const { ratio } = size;
-  const width = size.width === null ? null : size.width * scale;
-  const height = size.height === null ? null : size.height * scale;
-  if (width !== null && height !== null) return [width, height];
-  if (width !== null) return [width, ratio > 0 ? width / ratio : area.height];
-  if (height !== null) return [ratio > 0 ? height * ratio : area.width, height];
-  if (ratio > 0) {
-    return area.width / area.height > ratio
-      ? [area.height * ratio, area.height]
-      : [area.width, area.width / ratio];
-  }
-  return [area.width, area.height];
+  return concreteSize(image, area.width, area.height, scale);
 }
 
 /**
@@ -4473,12 +4550,13 @@ function paintOutline(
  *
  * 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
+ * inner one and each side takes its half (CSS Backgrounds 3, 4.4), 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.
+ * 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: PaintContext,
@@ -4523,21 +4601,16 @@ function paintBorders(
     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 = (
-    ex: number,
-    ey: number,
-    ew: number,
-    eh: number,
+    at: number,
     style: ComputedStyle['borderTopStyle'],
     color: string,
-    horizontal: boolean,
   ): void => {
-    const rect = clampRect(options, ex, ey, ew, eh);
-    if (!rect) return;
     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);
+    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: number[], color: string): void => {
@@ -4568,7 +4641,7 @@ function paintBorders(
         [x, y, x1, y, cutRight ? px1 : x1, py0, cutLeft ? px0 : x, py0],
         topInk,
       );
-    } else edge(x, y, w, t, topStyle, topInk, true);
+    } else edge(0, topStyle, topInk);
   }
   if (bottomInk !== null) {
     const cutLeft = bl && !over(leftInk);
@@ -4578,23 +4651,23 @@ function paintBorders(
         [x1, y1, x, y1, cutLeft ? px0 : x, py1, cutRight ? px1 : x1, py1],
         bottomInk,
       );
-    } else edge(x, y1 - b, w, b, bottomStyle, bottomInk, true);
+    } else edge(2, bottomStyle, bottomInk);
   }
   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);
+    } else edge(3, leftStyle, leftInk);
   }
   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);
+    } 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
+ * taking its half (CSS Backgrounds 3, 4.4): 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
@@ -4616,12 +4689,14 @@ function mitred(
 }
 
 /**
- * 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.
+ * Fill a 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. A polygon that is not convex, a rounded ring's share, may
+ * come out of the cut with an edge run there and back along the area's
+ * border, which fills nothing, and that border is outside the paint.
  */
 function fillPolygon(
   ctx: PaintContext,
@@ -4698,9 +4773,7 @@ function paintBorderImage(
   // the image's size, CSS Images' default sizing in the area: a drawing
   // with no size of its own is as large as it fits there, and a gradient,
   // which has none, is the area's
-  const [cw, ch] = loaded
-    ? tileSize(loaded, { x: 0, y: 0, width: aw, height: ah }, scale)
-    : [aw, ah];
+  const [cw, ch] = loaded ? concreteSize(loaded, aw, ah, scale) : [aw, ah];
   const iw = cw / scale;
   const ih = ch / scale;
   if (!(iw > 0 && ih > 0)) return false;
@@ -4715,12 +4788,13 @@ function paintBorderImage(
     const svg = image instanceof SvgDrawing ? image : null;
     const w = Math.max(1, Math.round(cw));
     const h = Math.max(1, Math.round(ch));
+    const scheme = box.style.colorScheme;
     const drawn = options.cached?.(
-      `border-image|${key}|${w}x${h}`,
+      `border-image|${key}|${w}x${h}|${scheme}`,
       w,
       h,
       (sctx) => {
-        if (svg) svg.draw(sctx, 0, 0, w, h, scale);
+        if (svg) 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 });
@@ -4907,13 +4981,14 @@ function edgeRun(
 
 /**
  * A rounded box's border as the ring between its border edge and its
- * padding edge, each rounded, where every side that has a border has one
- * of the same colour and a solid rule: a card's or a button's. Drawn
- * straight, its corners were square over the background's rounded ones,
- * and an accent border down one side did not follow the corner. The inner
- * radius is the outer less the wider border at that corner (CSS
- * Backgrounds 3, 5.2). False where the border is not such a one, and it is
- * drawn a side at a time.
+ * padding edge, each rounded, where every side that has a border has a
+ * solid rule: a card's or a button's. Drawn straight, its corners were
+ * square over the background's rounded ones, and an accent border down one
+ * side did not follow the corner. The inner radius is the outer less the
+ * wider border at that corner (CSS Backgrounds 3, 5.2). Sides of one colour
+ * are one fill; sides of more are each given their share of the ring
+ * (`ringSides`). False where the border is not such a one, and it is drawn
+ * a side at a time.
  */
 function roundedRing(
   ctx: PaintContext,
@@ -4925,7 +5000,7 @@ function roundedRing(
   options: PaintOptions,
 ): boolean {
   const s = box.style;
-  if (!ctx.roundRect || !ctx.fill || !ctx.beginPath) return false;
+  if (!ctx.fill || !ctx.beginPath) return false;
   const corners = cornersOf(s, w, h);
   if (!corners) return false;
   const sides: [number, string, string][] = [
@@ -4935,35 +5010,550 @@ function roundedRing(
     [box.borderLeft, s.borderLeftColor, s.borderLeftStyle],
   ];
   let color: string | null = null;
+  let mixed = false;
   for (const [width, ink, style] of sides) {
     if (!width) continue;
-    if (style !== 'solid' || (color !== null && ink !== color)) return false;
+    if (style !== 'solid') return false;
+    if (color !== null && ink !== color) mixed = true;
     color = ink;
   }
+  if (mixed) return ringSides(ctx, box, x, y, w, h, corners, options);
+  if (!ctx.roundRect) return false;
   if (color === null) return true;
   if (isTransparent(color)) return true;
-  const rect = clampRect(options, x, y, w, h);
-  if (!rect) return true;
-  const top = box.borderTop;
-  const right = box.borderRight;
-  const bottom = box.borderBottom;
-  const left = box.borderLeft;
-  ctx.fillStyle = inkColor(color, s.color);
+  wholeRing(ctx, box, inkColor(color, s.color), x, y, w, h, corners, options);
+  return true;
+}
+
+/** The ring of a rounded border in one colour, cut to what the paint
+ *  reaches (`cutRing`). */
+function wholeRing(
+  ctx: PaintContext,
+  box: Frame,
+  color: string,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  corners: Corners,
+  options: PaintOptions,
+): void {
+  const ring = cutRing(
+    options,
+    x,
+    y,
+    w,
+    h,
+    corners,
+    box.borderTop,
+    box.borderRight,
+    box.borderBottom,
+    box.borderLeft,
+  );
+  if (!ring) return;
+  const { outer, inner } = ring;
+  ctx.fillStyle = 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),
+    outer.rect,
+    outer.corners,
+    inner ? inner.rect : NOWHERE,
+    inner ? inner.corners : outer.corners,
+  );
+}
+
+/** How far a chord of a flattened corner may stray from its curve, in
+ *  device pixels: a sixteenth, well inside what antialiasing shows. */
+const CURVE_TOLERANCE = 1 / 16;
+
+/** How far past a cut a share reaches under the one drawn over it, in
+ *  device pixels: past the antialiased edge of either. */
+const SEAM = 1.5;
+
+/** Which way a border's sides run at each corner, clockwise from the top
+ *  left: the side that ends at corner i arrives along `ALONG[i]`, and the
+ *  side that begins there leaves along `ALONG[i + 1]`. */
+const ALONG: readonly (readonly [number, number])[] = [
+  [0, -1],
+  [1, 0],
+  [0, 1],
+  [-1, 0],
+];
+
+/**
+ * A rounded border whose solid sides are not all one colour, each side's
+ * share of the ring filled in its own. Where two sides of different colours
+ * meet, the corner is cut on the line from the border box's corner through
+ * the padding box's, as Blink cuts it: CSS Backgrounds 3, 4.4 puts the
+ * transition on the curve at a point that follows the ratio of the two
+ * widths and leaves the rest to the UA. A corner between a side and one
+ * with no width is all the side's (4.4 again), and sides of one colour that
+ * meet are one fill, so nothing is cut where the colour does not change.
+ * Drawn a side at a time, the spinner the web draws — `border-radius: 50%`
+ * with one side of another colour — was a square frame.
+ *
+ * A share is a polygon: the curves flattened to chords no further than
+ * `CURVE_TOLERANCE` from them, so that it is cut to what the paint reaches
+ * as the square corners are (`fillPolygon`) and a large ring repainted a
+ * strip at a time is the same ring. False where the context draws no
+ * lines, and the sides are drawn straight.
+ */
+function ringSides(
+  ctx: PaintContext,
+  box: Frame,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  corners: Corners,
+  options: PaintOptions,
+): boolean {
+  if (!ctx.moveTo || !ctx.lineTo) return false;
+  const area = clampRect(options, x, y, w, h);
+  if (!area) return true;
+  const s = box.style;
+  const widths = [
+    box.borderTop,
+    box.borderRight,
+    box.borderBottom,
+    box.borderLeft,
+  ];
+  const colors = [
+    s.borderTopColor,
+    s.borderRightColor,
+    s.borderBottomColor,
+    s.borderLeftColor,
+  ];
+  // what each side is painted in, null where it paints nothing
+  const inks = widths.map((width, i) =>
+    width > 0 && !isTransparent(colors[i])
+      ? inkColor(colors[i], s.color)
+      : null,
   );
+  // Corners from the top left, clockwise. Corner i is where side i - 1
+  // ends and side i begins: the top left ends the left and begins the top.
+  // Two sides of one colour are joined across their corner.
+  const joined = [0, 1, 2, 3].map((i) => {
+    const before = (i + 3) % 4;
+    return widths[before] > 0 && widths[i] > 0 && inks[before] === inks[i];
+  });
+  if (!joined.includes(false)) {
+    // one colour after all, `currentColor` and the colour it is
+    if (!ctx.roundRect) return false;
+    if (inks[0] !== null) {
+      wholeRing(ctx, box, inks[0], x, y, w, h, corners, options);
+    }
+    return true;
+  }
+  const [t, r, b, l] = widths;
+  const x1 = x + w;
+  const y1 = y + h;
+  // the padding box, inside the borders
+  const ix0 = x + l;
+  const iy0 = y + t;
+  const ix1 = Math.max(ix0, x1 - r);
+  const iy1 = Math.max(iy0, y1 - b);
+  const inside = insetCorners(corners, t, r, b, l);
+  const hollow = ix1 > ix0 && iy1 > iy0;
+  // each corner's point on the border box and on the padding box, which
+  // way it points, and the quarter ellipses that round the two there
+  const sx = [-1, 1, 1, -1];
+  const sy = [-1, -1, 1, 1];
+  const ox = [x, x1, x1, x];
+  const oy = [y, y, y1, y1];
+  const px = [ix0, ix1, ix1, ix0];
+  const py = [iy0, iy0, iy1, iy1];
+  type Quarter = { cx: number; cy: number; rx: number; ry: number } | null;
+  const quarter = (
+    i: number,
+    cornerX: number,
+    cornerY: number,
+    rx: number,
+    ry: number,
+  ): Quarter =>
+    rx > 0 && ry > 0
+      ? { cx: cornerX - sx[i] * rx, cy: cornerY - sy[i] * ry, rx, ry }
+      : null;
+  const outer: Quarter[] = [];
+  const inner: Quarter[] = [];
+  for (let i = 0; i < 4; i += 1) {
+    outer.push(quarter(i, ox[i], oy[i], corners.x[i], corners.y[i]));
+    inner.push(
+      hollow ? quarter(i, px[i], py[i], inside.x[i], inside.y[i]) : null,
+    );
+  }
+  // A corner's quarter turns clockwise from the angle it starts at: the top
+  // left's from pointing left to pointing up.
+  const QUARTER = Math.PI / 2;
+  const start = (i: number): number => Math.PI + i * QUARTER;
+  /** Where a line from (fromX, fromY) along (dx, dy) first meets a quarter
+   *  ellipse, as the angle it is at; the line starts outside it. */
+  const crossing = (
+    i: number,
+    q: Quarter,
+    fromX: number,
+    fromY: number,
+    dx: number,
+    dy: number,
+  ): number => {
+    const a0 = start(i);
+    if (!q) return a0;
+    const ux = (fromX - q.cx) / q.rx;
+    const uy = (fromY - q.cy) / q.ry;
+    const vx = dx / q.rx;
+    const vy = dy / q.ry;
+    const qa = vx * vx + vy * vy;
+    const qb = ux * vx + uy * vy;
+    const disc = qb * qb - qa * (ux * ux + uy * uy - 1);
+    const k = qa > 0 && disc > 0 ? (-qb - Math.sqrt(disc)) / qa : 0;
+    let a = Math.atan2(uy + k * vy, ux + k * vx);
+    // into the quarter's own turn
+    a += 2 * Math.PI * Math.round((a0 + QUARTER / 2 - a) / (2 * Math.PI));
+    return Math.min(a0 + QUARTER, Math.max(a0, a));
+  };
+  // Where the shares meet at each corner, as angles on its two quarters: on
+  // the cut, or at the end of the corner where one side has no width and
+  // the other has all of it — the side that has none paints nothing.
+  const cutOuter: number[] = [];
+  const cutInner: number[] = [];
+  for (let i = 0; i < 4; i += 1) {
+    const before = widths[(i + 3) % 4] > 0;
+    const after = widths[i] > 0;
+    if (before && after) {
+      const dx = px[i] - ox[i];
+      const dy = py[i] - oy[i];
+      cutOuter.push(crossing(i, outer[i], ox[i], oy[i], dx, dy));
+      cutInner.push(crossing(i, inner[i], px[i], py[i], dx, dy));
+    } else {
+      const end = before ? start(i) + QUARTER : start(i);
+      cutOuter.push(end);
+      cutInner.push(end);
+    }
+  }
+  // The shares, a run of sides of one colour each, from the corner the
+  // colour changes at to the next one it changes at. Those that show what
+  // is under them are drawn first.
+  const runs: { from: number; to: number; ink: string | null }[] = [];
+  for (let i = 0; i < 4; i += 1) {
+    if (joined[i]) continue;
+    let j = (i + 1) % 4;
+    while (joined[j]) j = (j + 1) % 4;
+    runs.push({ from: i, to: j, ink: inks[i] });
+  }
+  const opaque = (ink: string | null): boolean =>
+    ink !== null && alphaOf(ink) === 1;
+  runs.sort((a, b) => Number(opaque(a.ink)) - Number(opaque(b.ink)));
+  /** Whether a share reaches past its cut at a corner, under the one on
+   *  the other side of it: where that one is drawn after it and covers it. */
+  const under = (k: number, corner: number): boolean => {
+    const before = widths[(corner + 3) % 4] > 0;
+    if (!(before && widths[corner] > 0)) return false;
+    const other = runs.findIndex(
+      (run) => run !== runs[k] && (run.from === corner || run.to === corner),
+    );
+    return other > k && opaque(runs[other].ink);
+  };
+  // The straight part of each side's edge, between the quarters at its
+  // ends, on the border edge and the padding edge: as far as a share may
+  // reach along it past a corner.
+  const straight = (q: Quarter[], across: number, down: number): number[] => {
+    const rx = (i: number) => q[i]?.rx ?? 0;
+    const ry = (i: number) => q[i]?.ry ?? 0;
+    return [
+      across - rx(0) - rx(1),
+      down - ry(1) - ry(2),
+      across - rx(2) - rx(3),
+      down - ry(3) - ry(0),
+    ].map((v) => Math.max(0, v));
+  };
+  const outerRoom = straight(outer, w, h);
+  const innerRoom = straight(inner, ix1 - ix0, iy1 - iy0);
+  /**
+   * A share's end moved past the cut at a corner, onto the other share,
+   * along an edge from the angle `a` it is at on a quarter: `forward` the
+   * way the corner turns, onto the side that begins there, or back onto
+   * the side that ends there. Far enough that the line it ends on is
+   * `SEAM` from the cut, whatever angle the two make; as the angle it
+   * reaches on the quarter and how far it goes on along the straight edge
+   * past it, no further than `room`.
+   */
+  const past = (
+    q: Quarter,
+    i: number,
+    a: number,
+    forward: boolean,
+    room: number,
+  ): [number, number] => {
+    const end = forward ? start(i) + QUARTER : start(i);
+    const sign = forward ? 1 : -1;
+    const [ex, ey] = forward ? ALONG[(i + 1) % 4] : ALONG[i];
+    // the way it goes, and the sine of its angle with the cut
+    let tx = forward ? ex : -ex;
+    let ty = forward ? ey : -ey;
+    if (q && a !== end) {
+      const speed = Math.hypot(q.rx * Math.sin(a), q.ry * Math.cos(a));
+      tx = (sign * -q.rx * Math.sin(a)) / speed;
+      ty = (sign * q.ry * Math.cos(a)) / speed;
+    }
+    const dx = px[i] - ox[i];
+    const dy = py[i] - oy[i];
+    const sine = Math.abs(tx * dy - ty * dx) / Math.hypot(dx, dy);
+    let left = SEAM / Math.max(0.25, sine);
+    let at = a;
+    for (let n = 0; q && n < 8 && left > 0 && at !== end; n += 1) {
+      const speed = Math.hypot(q.rx * Math.sin(at), q.ry * Math.cos(at));
+      const turn = Math.abs(end - at);
+      if (left >= turn * speed) {
+        left -= turn * speed;
+        at = end;
+      } else {
+        at += (sign * left) / speed;
+        left = 0;
+      }
+    }
+    return [at, at === end ? Math.min(left, room) : 0];
+  };
+  const points: number[] = [];
+  /** The point at an angle on a quarter, or the corner where it is square,
+   *  and `over` on past the quarter's end along the edge `along`. */
+  const point = (
+    q: Quarter,
+    a: number,
+    cx: number,
+    cy: number,
+    over = 0,
+    along: readonly number[] = ALONG[0],
+  ): void => {
+    const x = (q ? q.cx + q.rx * Math.cos(a) : cx) + over * along[0];
+    const y = (q ? q.cy + q.ry * Math.sin(a) : cy) + over * along[1];
+    const n = points.length;
+    if (n && points[n - 2] === x && points[n - 1] === y) return;
+    points.push(x, y);
+  };
+  /** A quarter's curve from one angle to another, as chords, after the
+   *  point it starts at. */
+  const sweep = (q: Quarter, from: number, to: number): void => {
+    if (!q || from === to) return;
+    const radius = Math.max(q.rx, q.ry);
+    const step =
+      radius > CURVE_TOLERANCE
+        ? 2 * Math.acos(1 - CURVE_TOLERANCE / radius)
+        : QUARTER;
+    const n = Math.min(64, Math.ceil(Math.abs(to - from) / step));
+    for (let k = 1; k <= n; k += 1) {
+      point(q, from + ((to - from) * k) / n, 0, 0);
+    }
+  };
+  for (let k = 0; k < runs.length; k += 1) {
+    const { from: i, to: j, ink } = runs[k];
+    if (ink === null) continue;
+    // Where the share starts and ends on each edge. Two antialiased fills
+    // that meet on a line each cover half of the pixels along it, and what
+    // is under the border shows through between them. So a share reaches
+    // on under the one drawn after it and covering it, and that one's
+    // edge is the cut, over it — as Blink overdraws a corner, and as the
+    // square corners are drawn.
+    let [so, soOver] = [cutOuter[i], 0];
+    let [si, siOver] = [cutInner[i], 0];
+    let [eo, eoOver] = [cutOuter[j], 0];
+    let [ei, eiOver] = [cutInner[j], 0];
+    const back = (i + 3) % 4;
+    if (under(k, i)) {
+      [so, soOver] = past(outer[i], i, so, false, outerRoom[back]);
+      [si, siOver] = past(inner[i], i, si, false, innerRoom[back]);
+    }
+    if (under(k, j)) {
+      [eo, eoOver] = past(outer[j], j, eo, true, outerRoom[j]);
+      [ei, eiOver] = past(inner[j], j, ei, true, innerRoom[j]);
+    }
+    const onward = ALONG[(j + 1) % 4];
+    const backward = [-ALONG[i][0], -ALONG[i][1]];
+    points.length = 0;
+    // along the border edge, clockwise
+    point(outer[i], so, ox[i], oy[i], soOver, backward);
+    point(outer[i], so, ox[i], oy[i]);
+    sweep(outer[i], so, start(i) + QUARTER);
+    for (let c = (i + 1) % 4; ; c = (c + 1) % 4) {
+      point(outer[c], start(c), ox[c], oy[c]);
+      if (c === j) break;
+      sweep(outer[c], start(c), start(c) + QUARTER);
+    }
+    sweep(outer[j], start(j), eo);
+    point(outer[j], eo, ox[j], oy[j], eoOver, onward);
+    // and back along the padding edge
+    point(inner[j], ei, px[j], py[j], eiOver, onward);
+    point(inner[j], ei, px[j], py[j]);
+    sweep(inner[j], ei, start(j));
+    for (let c = (j + 3) % 4; ; c = (c + 3) % 4) {
+      point(inner[c], start(c) + QUARTER, px[c], py[c]);
+      if (c === i) break;
+      sweep(inner[c], start(c) + QUARTER, start(c));
+    }
+    sweep(inner[i], start(i) + QUARTER, si);
+    point(inner[i], si, px[i], py[i], siOver, backward);
+    ctx.fillStyle = ink;
+    fillPolygon(ctx, points, area);
+  }
   return true;
 }
 
+/** A rectangle and the radii of its corners. */
+interface Rounded {
+  rect: Rect;
+  corners: Corners;
+}
+
+/**
+ * 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. The window is the border edge's
+ * (`roundedWindow`), whose curves the padding edge's run inside, and each
+ * edge is cut to it as `cutRounded` cuts one. Null where the ring has
+ * nothing in the window.
+ */
+function cutRing(
+  options: PaintOptions,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  corners: Corners,
+  top: number,
+  right: number,
+  bottom: number,
+  left: number,
+): { outer: Rounded; inner: Rounded | null } | null {
+  const edge = { rect: { x, y, width: w, height: h }, corners };
+  const cut = roundedWindow(options, [edge]);
+  const outer = cutRounded(cut, edge);
+  if (!outer) return null;
+  const iw = w - left - right;
+  const ih = h - top - bottom;
+  const inner =
+    iw > 0 && ih > 0
+      ? cutRounded(cut, {
+          rect: { x: x + left, y: y + top, width: iw, height: ih },
+          corners: 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 };
+}
+
+/** Where a paint is cut to (`roundedWindow`): left, top, right, bottom. */
+type Cut = [number, number, number, number];
+
+/**
+ * The window `clampRect` cuts to, `pad` round what the paint reaches, for
+ * rectangles with rounded corners: a cut is straight, so a side of it is
+ * moved out past any corner's curve it would cross, in any of them.
+ */
+function roundedWindow(
+  options: PaintOptions,
+  shapes: readonly Rounded[],
+  pad = CLAMP_PAD,
+): Cut {
+  // where each corner's curve runs, across and down
+  const across: [number, number][] = [];
+  const down: [number, number][] = [];
+  for (const { rect, corners } of shapes) {
+    const { x, y, width: w, height: h } = rect;
+    const { x: cx, y: cy } = corners;
+    across.push(
+      [x, x + cx[0]],
+      [x + w - cx[1], x + w],
+      [x + w - cx[2], x + w],
+      [x, x + cx[3]],
+    );
+    down.push(
+      [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: number, spans: [number, number][], towards: number) =>
+    Math.max(
+      -COORD_LIMIT,
+      Math.min(COORD_LIMIT, outOfSpans(at, spans, towards)),
+    );
+  return [
+    side(d ? d.x - pad : -COORD_LIMIT, across, -1),
+    side(d ? d.y - pad : -COORD_LIMIT, down, -1),
+    side(d ? d.x + d.width + pad : COORD_LIMIT, across, 1),
+    side(d ? d.y + d.height + pad : COORD_LIMIT, down, 1),
+  ];
+}
+
+/**
+ * A rounded rectangle cut to a window (`roundedWindow`), as `clampRect`
+ * cuts a rectangle: a corner on a side the window cut is square, its
+ * curve being outside, and the rest are whole. Null where none of it is in
+ * the window.
+ */
+function cutRounded(
+  [x0, y0, x1, y1]: Cut,
+  { rect: { x, y, width: w, height: h }, corners: c }: Rounded,
+): Rounded | null {
+  const l = Math.max(x, x0);
+  const t = Math.max(y, y0);
+  const r = Math.min(x + w, x1);
+  const b = Math.min(y + h, y1);
+  if (r <= l || b <= t) return null;
+  // the corners of the sides the window left where they were
+  const kept = [
+    t === y && l === x,
+    t === y && r === x + w,
+    b === y + h && r === x + w,
+    b === y + h && l === x,
+  ];
+  return {
+    rect: { x: l, y: t, width: r - l, height: b - t },
+    corners: {
+      x: c.x.map((v, i) => (kept[i] ? v : 0)) as Corners['x'],
+      y: c.y.map((v, i) => (kept[i] ? v : 0)) as Corners['y'],
+    },
+  };
+}
+
+/** 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: number,
+  spans: readonly [number, number][],
+  towards: number,
+): number {
+  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: Rounded, b: Rounded): boolean {
+  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
@@ -4971,12 +5561,17 @@ function roundedRing(
  * 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: PaintContext,
@@ -4998,43 +5593,60 @@ function pushBorderArea(
   const w = Math.round(left + box.width) - x;
   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) return false;
+  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 }: Rounded, hole: boolean): void =>
+        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: number,
-      ey: number,
-      ew: number,
-      eh: number,
-      style: ComputedStyle['borderTopStyle'],
-      horizontal: boolean,
-    ): void => {
-      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: number, ey: number, ew: number, eh: number) {
+        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: ComputedStyle['borderTopStyle'][] = 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;
@@ -5071,10 +5683,12 @@ function sculpted(s: ComputedStyle): boolean {
  * 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: PaintContext,
@@ -5093,10 +5707,6 @@ function paintSculpted(
   const r = box.borderRight;
   const b = box.borderBottom;
   const l = box.borderLeft;
-  const cx = (v: number) =>
-    Math.max(area.x - 1, Math.min(v, area.x + area.w + 1));
-  const cy = (v: number) =>
-    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: number, outer: number, inner: number, color: string) => {
@@ -5117,12 +5727,7 @@ function paintSculpted(
             ? [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: [number, string, string][] = [
     [t, s.borderTopStyle, s.borderTopColor],
@@ -5242,52 +5847,174 @@ function paintCollapsedBorders(
   );
   for (const s of segments) {
     if (isTransparent(s.border.color)) continue;
-    const rect = clampRect(options, s.x, s.y, s.w, s.h);
-    if (!rect) continue;
+    if (!clampRect(options, s.x, s.y, s.w, s.h)) continue;
     ctx.fillStyle = s.border.color;
-    fillEdge(ctx, rect, s.horizontal ? s.x : s.y, s.border.style, s.horizontal);
+    fillEdge(ctx, options, s.x, s.y, s.w, s.h, 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: Pick<FillContext, 'fillRect'>,
+  options: PaintOptions,
+  at: number,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  widths: readonly number[],
+  style: ComputedStyle['borderTopStyle'],
+  joins: readonly boolean[],
+): void {
+  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: number, ly: number, lw: number, lh: number): void => {
+      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;
+  if (horizontal) fillEdge(ctx, options, ex, ey, w, width, style, true);
+  else fillEdge(ctx, options, ex, ey, width, h - t - b, style, false);
+}
+
+/**
+ * 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: Frame): readonly boolean[] {
+  const s = box.style;
+  const color = (
+    width: number,
+    style: ComputedStyle['borderTopStyle'],
+    value: string,
+  ): string | null =>
+    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: readonly boolean[] = [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: number): number {
+  return Math.max(1, Math.floor(thickness / 3));
+}
+
+/**
+ * A side at `x, y`, `w` by `h`, running across when `horizontal`, as the
+ * rectangles its style makes, each cut to what the paint reaches. The
+ * dashes, the dots and a double side's lines are measured from the side
+ * and cut after: measured from the cut, a side wider than `CLAMP_PAD` had
+ * dashes as long and as far apart as the cut was wide, starting wherever
+ * it started, and a strip repainted down one dash was striped across it.
+ */
 function fillEdge(
   ctx: Pick<FillContext, 'fillRect'>,
-  rect: { x: number; y: number; w: number; h: number },
-  phaseOrigin: number,
+  options: PaintOptions,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
   style: ComputedStyle['borderTopStyle'],
   horizontal: boolean,
 ): void {
-  const { x, y, w, h } = rect;
   const length = horizontal ? w : h;
   const thickness = horizontal ? h : w;
-  if (length <= 0 || thickness <= 0) return;
+  if (!(length > 0 && thickness > 0)) return;
+  const fill = (fx: number, fy: number, fw: number, fh: number): void => {
+    const rect = clampRect(options, fx, fy, fw, fh);
+    if (rect) ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
+  };
   if (style === 'dashed' || style === 'dotted') {
+    // what of the side the paint reaches, so that a side far longer than
+    // that is not walked from its start
+    const cut = clampRect(options, x, y, w, h);
+    if (!cut) return;
     const period = style === 'dotted' ? thickness * 2 : thickness * 3;
     const on = style === 'dotted' ? thickness : thickness * 2;
-    const from = horizontal ? x : y;
-    // Start on the pattern boundary at or before the clamped start, so the
-    // dash the viewport cuts into is the same dash it always was.
-    let i = Math.floor((from - phaseOrigin) / period) * period + phaseOrigin;
-    for (; i < from + length; i += period) {
-      const start = Math.max(i, from);
-      const run = Math.min(i + on, from + length) - start;
-      if (run <= 0) continue;
-      if (horizontal) ctx.fillRect(start, y, run, thickness);
-      else ctx.fillRect(x, start, thickness, run);
+    const start = horizontal ? x : y;
+    const end = start + length;
+    const from = horizontal ? cut.x : cut.y;
+    const to = from + (horizontal ? cut.w : cut.h);
+    // from the side's start, so the dash the paint cuts into is the one it
+    // always was
+    for (
+      let i = start + Math.floor((from - start) / period) * period;
+      i < to;
+      i += period
+    ) {
+      const run = Math.min(i + on, end) - i;
+      if (horizontal) fill(i, y, run, thickness);
+      else fill(x, i, thickness, run);
     }
     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);
+      fill(x, y, length, band);
+      fill(x, y + thickness - band, length, band);
     } else {
-      ctx.fillRect(x, y, band, length);
-      ctx.fillRect(x + thickness - band, y, band, length);
+      fill(x, y, band, length);
+      fill(x + thickness - band, y, band, length);
     }
     return;
   }
-  ctx.fillRect(x, y, w, h);
+  fill(x, y, w, h);
 }
 
 /** A list item's bullet or number, in the margin. */
@@ -5295,6 +6022,8 @@ function paintMarker(
   ctx: PaintContext,
   marker: Marker,
   options: PaintOptions,
+  /** The item's colour scheme, which an SVG image in it is drawn in. */
+  scheme: 'light' | 'dark',
 ): void {
   const x = marker.x + options.originX;
   const y = marker.y + options.originY;
@@ -5304,7 +6033,15 @@ function paintMarker(
     const loaded = options.backgroundImageFor?.(url);
     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);
     return;
   }
@@ -5336,7 +6073,15 @@ function paintImage(ctx: PaintContext, box: Box, options: PaintOptions): void {
     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);
     if (clipped) ctx.restore();
     return;
@@ -5427,7 +6172,8 @@ 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, 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 }`. */
+ *  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: PaintContext, box: Box, options: PaintOptions): void {
   if (!box.el) return;
   const x = Math.round(box.contentX + options.originX);
@@ -5449,6 +6195,7 @@ function paintSvg(ctx: PaintContext, box: Box, options: PaintOptions): void {
     style.color,
     paint(style.fill),
     paint(style.stroke),
+    options.shapeStyler?.(box) ?? null,
   );
 }
 
@@ -5732,7 +6479,7 @@ function paintClippedText(
         ) +
         2;
       for (const run of natural.runs) {
-        const clip = clipBoxOf(text.spans.boxAt?.(run.start) ?? null, block);
+        const clip = clipBoxOf(text.spans.boxAt?.(run.start) ?? null);
         if (!clip) continue;
         let byLayout = parts.get(clip);
         if (!byLayout) parts.set(clip, (byLayout = new Map()));
@@ -5754,7 +6501,7 @@ function paintClippedText(
     const list = [...byLayout.values()];
     const style = clip.style;
     let area: Rect;
-    if (clip === block) area = paddingBox(block, options);
+    if (clip.kind !== 'inline') area = paddingBox(clip, options);
     else {
       // an inline box: its runs, and its padding round them
       let x0 = Infinity;