@react-x11/components 0.14.1 → 0.16.1

package/src/html/paint.ts

@@ -101,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';
 
@@ -976,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;
@@ -1018,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
@@ -1744,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,
@@ -1754,7 +1747,7 @@ function frameImages(
         area,
         originBox(frame, options, layer),
         options,
-        painted.corners,
+        area.corners,
       );
     }
   };
@@ -1768,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 {
@@ -1845,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,
@@ -1864,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) {
@@ -1878,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,
         );
@@ -1897,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(
@@ -1919,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();
     }
@@ -1954,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,
@@ -1968,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,
@@ -2001,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),
@@ -3417,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,
@@ -3427,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!();
@@ -4355,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
@@ -4368,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];
@@ -4389,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);
 }
 
 /**
@@ -4489,7 +4550,7 @@ 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
@@ -4606,7 +4667,7 @@ function paintBorders(
 
 /**
  * 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
@@ -4628,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,
@@ -4710,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;
@@ -4920,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,
@@ -4938,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][] = [
@@ -4948,13 +5010,34 @@ 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;
+  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,
@@ -4967,16 +5050,350 @@ function roundedRing(
     box.borderBottom,
     box.borderLeft,
   );
-  if (!ring) return true;
+  if (!ring) return;
   const { outer, inner } = ring;
-  ctx.fillStyle = inkColor(color, s.color);
+  ctx.fillStyle = color;
   fillRing(
     ctx,
     outer.rect,
     outer.corners,
-    inner ? inner.rect : { x: 0, y: 0, width: 0, height: 0 },
+    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;
 }
 
@@ -4994,10 +5411,10 @@ interface Rounded {
  * the box first and insetting the cut by the borders put the hole a
  * border's width in from the cut rather than from the box's edge, and left
  * none where a border was wider than `CLAMP_PAD`: the ring filled whatever
- * of the box a paint reached. A cut is straight, so a side of the window
- * is moved out past any corner's curve it would cross, and a corner on a
- * side the window cut is square, its curve being outside. Null where the
- * ring has nothing in the window.
+ * 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,
@@ -5011,77 +5428,101 @@ function cutRing(
   bottom: number,
   left: number,
 ): { outer: Rounded; inner: Rounded | null } | null {
-  const { x: cx, y: cy } = corners;
-  // where each corner's curve runs, across and down — the padding edge's
-  // run inside the border edge's
-  const across: [number, number][] = [
-    [x, x + cx[0]],
-    [x + w - cx[1], x + w],
-    [x + w - cx[2], x + w],
-    [x, x + cx[3]],
-  ];
-  const down: [number, number][] = [
-    [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)),
-    );
-  const x0 = side(d ? d.x - CLAMP_PAD : -COORD_LIMIT, across, -1);
-  const y0 = side(d ? d.y - CLAMP_PAD : -COORD_LIMIT, down, -1);
-  const x1 = side(d ? d.x + d.width + CLAMP_PAD : COORD_LIMIT, across, 1);
-  const y1 = side(d ? d.y + d.height + CLAMP_PAD : COORD_LIMIT, down, 1);
-  const cut = (
-    rx: number,
-    ry: number,
-    rw: number,
-    rh: number,
-    c: Corners,
-  ): Rounded | null => {
-    const l = Math.max(rx, x0);
-    const t = Math.max(ry, y0);
-    const r = Math.min(rx + rw, x1);
-    const b = Math.min(ry + rh, y1);
-    if (r <= l || b <= t) return null;
-    // the corners of the sides the window left where they were
-    const kept = [
-      t === ry && l === rx,
-      t === ry && r === rx + rw,
-      b === ry + rh && r === rx + rw,
-      b === ry + rh && l === rx,
-    ];
-    return {
-      rect: { x: l, y: t, width: r - l, height: b - t },
-      corners: {
-        x: c.x.map((v, i) => (kept[i] ? v : 0)) as Corners['x'],
-        y: c.y.map((v, i) => (kept[i] ? v : 0)) as Corners['y'],
-      },
-    };
-  };
-  const outer = cut(x, y, w, h, corners);
+  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
-      ? cut(
-          x + left,
-          y + top,
-          iw,
-          ih,
-          insetCorners(corners, top, right, bottom, left),
-        )
+      ? 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(
@@ -5406,10 +5847,9 @@ 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);
   }
 }
 
@@ -5471,12 +5911,8 @@ function fillSide(
   }
   const ex = at === 1 ? x + w - r : x;
   const ey = at === 0 ? y : at === 2 ? y + h - b : y + t;
-  const rect = horizontal
-    ? clampRect(options, ex, ey, w, width)
-    : clampRect(options, ex, ey, width, h - t - b);
-  // The un-clamped start is the dash phase's origin, so the pattern does
-  // not crawl as the viewport moves along a long edge.
-  if (rect) fillEdge(ctx, rect, horizontal ? ex : ey, style, horizontal);
+  if (horizontal) fillEdge(ctx, options, ex, ey, w, width, style, true);
+  else fillEdge(ctx, options, ex, ey, width, h - t - b, style, false);
 }
 
 /**
@@ -5518,45 +5954,67 @@ 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 = 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. */
@@ -6021,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()));
@@ -6043,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;