@react-x11/components 0.13.0 → 0.14.0

package/src/html/css/style.ts

@@ -40,6 +40,8 @@ import {
 } from './content.js';
 import type { ContentItem, CounterChange } from './content.js';
 import type { CustomProps } from './vars.js';
+import { parseRotate, parseScale, parseTransform } from './transform.js';
+import type { TransformFunction } from './transform.js';
 import { LIGHT_DARK, lightDark, usedColorScheme } from './color.js';
 
 export type Display =
@@ -108,15 +110,43 @@ export interface BoxShadow {
   inset: boolean;
 }
 
+/** A gradient's colour stop: its colour, at a position along the gradient
+ *  or, with none, where its neighbours put it. */
+export interface GradientStop {
+  color: string;
+  at: Len | null;
+}
+
 /** A `linear-gradient()` (CSS Images 3, 3.1): its direction, an angle
  *  clockwise from up or a corner the box's shape turns into one, and its
- *  colour stops, each at a position or where its neighbours put it. */
+ *  colour stops. */
 export interface LinearGradient {
+  kind: 'linear';
   angle: number;
   corner: 'top left' | 'top right' | 'bottom left' | 'bottom right' | null;
-  stops: { color: string; at: Len | null }[];
+  stops: GradientStop[];
 }
 
+/** A `radial-gradient()` (CSS Images 3, 3.2): its ending shape, a circle or
+ *  an ellipse; that shape's size, a keyword for the side or the corner of
+ *  the box it reaches or the radii it was given, one for a circle and two
+ *  for an ellipse; its centre, a position in the box; and its colour stops,
+ *  along the ray from the centre to the shape's edge. */
+export interface RadialGradient {
+  kind: 'radial';
+  circle: boolean;
+  extent: RadialExtent | null;
+  radii: [Len, Len] | null;
+  at: [Len, Len];
+  stops: GradientStop[];
+}
+
+export type RadialExtent =
+  'closest-side' | 'closest-corner' | 'farthest-side' | 'farthest-corner';
+
+/** An image a gradient function draws. */
+export type Gradient = LinearGradient | RadialGradient;
+
 /** Where a grid item starts or ends (CSS Grid 1, 8.3): a line, counted
  *  among the lines of a name where it has one; a span, to a line of a name
  *  where it has one; a name alone, an area's edge or a line's; or auto. */
@@ -174,6 +204,121 @@ function parseClip(
   return { top: edges[0], right: edges[1], bottom: edges[2], left: edges[3] };
 }
 
+/** The box a `clip-path`'s shape is measured in, a `<geometry-box>` (CSS
+ *  Masking 1, 5.1). */
+export type ClipBox =
+  'margin-box' | 'border-box' | 'padding-box' | 'content-box';
+
+/**
+ * `clip-path` (CSS Masking 1, 5.1): a rectangle in a box of the element's,
+ * its corners rounded or not — a `<basic-shape-rect>` (CSS Shapes 1, 3.1),
+ * kept as the function it was written as, since each measures its four
+ * lengths its own way and a percentage among them has no pixels before
+ * layout. The element shows through it, and everything in it does.
+ */
+export interface ClipPath {
+  box: ClipBox;
+  /** What the four lengths are: `inset()`'s, how far in from the box's
+   *  top, right, bottom and left; `rect()`'s, those four edges from its top
+   *  and its left, `auto` the box's own; `xywh()`'s, the rectangle's left
+   *  and top from the box's, and its width and height. Null for a box
+   *  named alone, which is the shape: the whole of it, rounded as the
+   *  element's corners are. */
+  shape: 'inset' | 'rect' | 'xywh' | null;
+  lengths: readonly [Len, Len, Len, Len];
+  /** `round`: the corners' radii across, and down where they differ, as
+   *  `border-radius` has them — a percentage is of the box, and not of the
+   *  rectangle in it. Null for square corners. */
+  radii: readonly [Len, Len, Len, Len] | null;
+  radiiY: readonly [Len, Len, Len, Len] | null;
+}
+
+/** The boxes `clip-path` names; an SVG one is the CSS box that stands for
+ *  it on an element with a CSS layout box (5.1). */
+const CLIP_BOXES: Record<string, ClipBox> = {
+  'margin-box': 'margin-box',
+  'border-box': 'border-box',
+  'padding-box': 'padding-box',
+  'content-box': 'content-box',
+  'fill-box': 'content-box',
+  'stroke-box': 'border-box',
+  'view-box': 'border-box',
+};
+
+/** The shapes that are no rectangle, and a reference to a `<clipPath>`
+ *  element: a value, which sets the property, and none this draws. */
+const UNDRAWN_CLIPS = /^(circle|ellipse|polygon|path|shape|url)\(/i;
+
+const NO_LENGTHS = [0, 0, 0, 0] as const;
+
+/**
+ * `none`; a rectangle's function, a box, or the two in either order; or a
+ * shape that is no rectangle, which is a value and clips nothing here.
+ * Undefined for anything else, which leaves the value as it was.
+ */
+function parseClipPath(
+  value: string,
+  ctx: UnitContext,
+): ClipPath | null | undefined {
+  const v = value.trim();
+  if (/^none$/i.test(v)) return null;
+  let box: ClipBox | null = null;
+  let shape: Omit<ClipPath, 'box'> | null | undefined;
+  for (const part of splitValue(v)) {
+    const named = CLIP_BOXES[part.toLowerCase()];
+    if (named) {
+      if (box) return undefined;
+      box = named;
+      continue;
+    }
+    if (shape !== undefined) return undefined;
+    if (UNDRAWN_CLIPS.test(part) && part.endsWith(')')) shape = null;
+    else shape = rectShape(part, ctx);
+    if (shape === undefined) return undefined;
+  }
+  if (shape === null) return null;
+  if (shape) return { box: box ?? 'border-box', ...shape };
+  if (!box) return undefined;
+  return { box, shape: null, lengths: NO_LENGTHS, radii: null, radiiY: null };
+}
+
+/** `inset()`, `rect()` or `xywh()`, with the corners it rounds; undefined
+ *  for anything else. */
+function rectShape(
+  text: string,
+  ctx: UnitContext,
+): Omit<ClipPath, 'box'> | undefined {
+  const m = /^(inset|rect|xywh)\((.*)\)$/is.exec(text);
+  if (!m) return undefined;
+  const shape = m[1].toLowerCase() as 'inset' | 'rect' | 'xywh';
+  const parts = splitValue(m[2].trim());
+  const round = parts.findIndex((p) => p.toLowerCase() === 'round');
+  const sides = round < 0 ? parts : parts.slice(0, round);
+  let radii: ClipPath['radii'] = null;
+  let radiiY: ClipPath['radiiY'] = null;
+  if (round >= 0) {
+    const corners = parseRadii(parts.slice(round + 1).join(' '), ctx);
+    if (!corners) return undefined;
+    [radii, radiiY] = corners;
+  }
+  // one to four insets, as a margin's sides are written; the other two
+  // take all four
+  if (
+    shape === 'inset' ? !sides.length || sides.length > 4 : sides.length !== 4
+  )
+    return undefined;
+  const lengths: Len[] = [];
+  for (let i = 0; i < sides.length; i += 1) {
+    const len = parseLength(sides[i], ctx);
+    if (len === null) return undefined;
+    // only `rect()` has an edge that is `auto`, and a width is not negative
+    if (len === AUTO && shape !== 'rect') return undefined;
+    if (shape === 'xywh' && i > 1 && !notNegative(len)) return undefined;
+    lengths.push(len);
+  }
+  return { shape, lengths: fourSides(lengths), radii, radiiY };
+}
+
 export type BorderStyle =
   | 'none'
   | 'hidden'
@@ -187,7 +332,7 @@ export type BorderStyle =
   | 'outset';
 
 /** A background layer's image: a url, a gradient, or none. */
-export type BackgroundImage = string | LinearGradient | null;
+export type BackgroundImage = string | Gradient | null;
 
 /** An intrinsic size: `min-content`, `max-content` or `fit-content`, and
  *  `fit-content()`, whose argument stands in for the room (`fit`). */
@@ -290,6 +435,15 @@ export interface ComputedStyle {
    *  in place of its `list-style-type`'s; null for `none`. */
   listStyleImage: string | null;
   cursor: string | null;
+  /** `pointer-events`: `none` for an element the pointer passes through,
+   *  to what is under it (CSS UI 4, 5.2). Its SVG values are `auto`. */
+  pointerEvents: 'auto' | 'none';
+  /** `fill` and `stroke`, what an `<svg>` in the document is painted with
+   *  (SVG 2, 13.2): a colour, `currentColor`, `none`, or a `url()` of a
+   *  paint server in the drawing — and null where nothing has set one,
+   *  which leaves the drawing its own. */
+  fill: string | null;
+  stroke: string | null;
   borderCollapse: 'separate' | 'collapse';
   /** `border-spacing`: between columns, and between rows. */
   borderSpacing: number;
@@ -369,6 +523,26 @@ export interface ComputedStyle {
    *  multicol container, which this lays out as one column and which
    *  `line-clamp` does not clamp (CSS Overflow 4, 5.2). */
   columns: number;
+  /** `column-count` where it is a number, and `column-width` where it is
+   *  a length; null for `auto` (CSS Multi-column 1, 2 and 3). */
+  columnCount: number | null;
+  columnWidth: number | null;
+  /** Whether `column-gap` is `normal`: nothing in a flex box or a grid,
+   *  and an em between the columns of a multicol container (4.1). */
+  columnGapNormal: boolean;
+  /** The fewest lines of a block a column may end on, and the fewest it
+   *  may start with (CSS Fragmentation 3, 4.3). Inherited. */
+  orphans: number;
+  widows: number;
+  /** `break-inside`: whether a column break may fall inside the box;
+   *  `avoid-column` and `avoid-page` are read as `avoid`. */
+  breakInside: 'auto' | 'avoid';
+  /** `column-fill`: whether the columns are balanced, or each filled
+   *  before the next is started; `balance-all` is `balance`. */
+  columnFill: 'balance' | 'auto';
+  /** `column-span: all`: whether the box is set across all the columns of
+   *  the multicol container it is in (CSS Multi-column 1, 6). */
+  columnSpan: boolean;
   /** How a line cut by `overflow` ends: `clip`, or with an ellipsis. */
   textOverflow: 'clip' | 'ellipsis';
   /** `aspect-ratio`: a box's width over its height, where its height is
@@ -388,16 +562,28 @@ export interface ComputedStyle {
    *  its edges measured from the border box's top left, a null edge the
    *  border box's own (CSS 2.1 11.1.2). Null for `auto`. */
   clip: ClipRect | null;
+  /** `clip-path`: the rectangle the element and all it holds show through
+   *  (CSS Masking 1, 5.1); null for `none`, and for a shape this does not
+   *  draw. */
+  clipPath: ClipPath | null;
   opacity: number;
   /** Where `translate` moves the box after layout (CSS Transforms 2): a
    *  length or a percentage of its own border box across and down; null
    *  for `none`. */
   translate: [Len, Len] | null;
-  /** The translation in its `transform`, the one part of a transform
-   *  this draws — rotating, scaling and skewing are not; null for `none`.
-   *  Either makes the box a containing block and paints it with the
-   *  positioned boxes, as a transform does. */
-  transformTranslate: [Len, Len] | null;
+  /** `rotate`: a turn in the plane of the page, in degrees; null for
+   *  `none`, and for a turn about an axis in the page. */
+  rotate: number | null;
+  /** `scale`: across and down; null for `none`. */
+  scale: [number, number] | null;
+  /** `transform`: its functions in the order written, the ones out of the
+   *  plane left out (`css/transform.ts`); null for `none`. Any of the four
+   *  makes the box a containing block and a stacking context, and paints it
+   *  with the positioned boxes (CSS Transforms 1, 3; `transformed`). */
+  transform: TransformFunction[] | null;
+  /** `transform-origin`: the point a transform turns and scales about,
+   *  from the border box's top left, a percentage of its width and height. */
+  transformOrigin: [Len, Len];
   zIndex: number | 'auto';
   /** A keyword, a length to raise the box by, or a percentage of its own
    *  line height. */
@@ -484,7 +670,7 @@ export interface ComputedStyle {
   backgroundImage: string | null;
   /** A background drawn rather than fetched: the first layer's linear
    *  gradient, where it is one. */
-  backgroundGradient: LinearGradient | null;
+  backgroundGradient: Gradient | null;
   /** How the first layer repeats across and down (CSS Backgrounds 3, 3.4):
    *  one of a few pairs made once, so a style copies no array. */
   backgroundRepeat: BackgroundRepeat;
@@ -543,10 +729,17 @@ export interface ComputedStyle {
    *  set it (`decorate`). No property: the cascade works them out. */
   underline: string | null;
   underlineStyle: 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy';
-  /** And the underline's thickness and offset, the box's that set it. */
+  /** And the underline's thickness and offset, the box's that set it: the
+   *  thickness the one used, which `auto` takes from that box's font size
+   *  (`usedThickness`), and the offset null where it is `auto`. */
   underlineThickness: number | null;
   underlineOffset: number | null;
   lineThrough: string | null;
+  /** And the line through's style and thickness, the box's that set it, as
+   *  the underline's are. It has no offset to set: it is drawn where each
+   *  font it crosses puts it (`paintRunRules`). */
+  lineThroughStyle: 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy';
+  lineThroughThickness: number | null;
 
   // flex — handed to yoga rather than interpreted here
   flexDirection: 'row' | 'row-reverse' | 'column' | 'column-reverse';
@@ -653,6 +846,8 @@ export const INHERITED = [
   'fontFeatureSettings',
   'tabSize',
   'tabSizeIsLength',
+  'orphans',
+  'widows',
   'whiteSpace',
   'overflowWrap',
   'wordBreak',
@@ -664,6 +859,9 @@ export const INHERITED = [
   'listStylePosition',
   'listStyleImage',
   'cursor',
+  'pointerEvents',
+  'fill',
+  'stroke',
   'borderCollapse',
   'borderSpacing',
   'borderSpacingY',
@@ -758,6 +956,9 @@ export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
     listStylePosition: 'outside',
     listStyleImage: null,
     cursor: null,
+    pointerEvents: 'auto',
+    fill: null,
+    stroke: null,
     borderCollapse: 'separate',
     // CSS's initial value; a `<table>` gets its 2px from the UA sheet, and
     // an anonymous table, which no sheet names, has none
@@ -793,6 +994,14 @@ export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
     webkitBoxAlign: null,
     webkitBoxFlex: 0,
     columns: 0,
+    columnCount: null,
+    columnWidth: null,
+    columnGapNormal: true,
+    orphans: 2,
+    widows: 2,
+    breakInside: 'auto',
+    columnFill: 'balance',
+    columnSpan: false,
     textOverflow: 'clip',
     aspectRatio: null,
     objectFit: 'fill',
@@ -802,9 +1011,13 @@ export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
     overflowX: 'visible',
     overflowY: 'visible',
     clip: null,
+    clipPath: null,
     opacity: 1,
     translate: null,
-    transformTranslate: null,
+    rotate: null,
+    scale: null,
+    transform: null,
+    transformOrigin: [{ pct: 50 }, { pct: 50 }],
     zIndex: AUTO,
     verticalAlign: 'baseline',
 
@@ -894,6 +1107,8 @@ export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
     underlineThickness: null,
     underlineOffset: null,
     lineThrough: null,
+    lineThroughStyle: 'solid',
+    lineThroughThickness: null,
 
     flexDirection: 'row',
     flexWrap: 'nowrap',
@@ -1003,6 +1218,8 @@ export function inherit(
   out.fontFeatureSettings = parent.fontFeatureSettings;
   out.tabSize = parent.tabSize;
   out.tabSizeIsLength = parent.tabSizeIsLength;
+  out.orphans = parent.orphans;
+  out.widows = parent.widows;
   out.whiteSpace = parent.whiteSpace;
   out.overflowWrap = parent.overflowWrap;
   out.wordBreak = parent.wordBreak;
@@ -1014,6 +1231,9 @@ export function inherit(
   out.listStylePosition = parent.listStylePosition;
   out.listStyleImage = parent.listStyleImage;
   out.cursor = parent.cursor;
+  out.pointerEvents = parent.pointerEvents;
+  out.fill = parent.fill;
+  out.stroke = parent.stroke;
   out.borderCollapse = parent.borderCollapse;
   out.borderSpacing = parent.borderSpacing;
   out.borderSpacingY = parent.borderSpacingY;
@@ -1033,6 +1253,8 @@ export function inherit(
   out.underlineThickness = parent.underlineThickness;
   out.underlineOffset = parent.underlineOffset;
   out.lineThrough = parent.lineThrough;
+  out.lineThroughStyle = parent.lineThroughStyle;
+  out.lineThroughThickness = parent.lineThroughThickness;
   return out;
 }
 
@@ -1067,6 +1289,8 @@ export const FIRST_LINE_INHERITED = [
   'underlineThickness',
   'underlineOffset',
   'lineThrough',
+  'lineThroughStyle',
+  'lineThroughThickness',
 ] as const satisfies readonly (keyof ComputedStyle)[];
 
 /**
@@ -1142,6 +1366,15 @@ const BORDER_WIDTH_KEYWORDS: Record<string, number> = {
   thick: 5,
 };
 
+/** `-webkit-` names that are the multicol properties' own. */
+const MULTICOL_ALIASES: Record<string, string> = {
+  '-webkit-columns': 'columns',
+  '-webkit-column-count': 'column-count',
+  '-webkit-column-width': 'column-width',
+  '-webkit-column-gap': 'column-gap',
+  '-webkit-column-break-inside': 'break-inside',
+};
+
 /**
  * Apply one declaration to a style, in place.
  *
@@ -1157,7 +1390,12 @@ export function applyDeclaration(
   rawValue: string,
   ctx: UnitContext,
 ): void {
-  const name = prop.toLowerCase();
+  const written = prop.toLowerCase();
+  // the multicol properties under the names WebKit had them by, which
+  // Blink still reads, each an alias of the property (`-webkit-column-
+  // count` in its `css_properties.json5`): a page written for it alone
+  // names no other
+  const name = MULTICOL_ALIASES[written] ?? written;
   let value = rawValue.trim();
   if (!value) return;
   // a logical property is the physical one it stands for, the CSS-wide
@@ -1285,17 +1523,63 @@ export function applyDeclaration(
     case 'column-count':
     case 'column-width':
     case 'columns': {
-      // `auto`, or a count, a width or both of them
+      // `auto`, or a count, a width or both of them, in either order; what
+      // the shorthand leaves out is `auto`
       const bit = name === 'column-count' ? 1 : name === 'column-width' ? 2 : 3;
-      let set = 0;
+      let count: number | null = null;
+      let width: number | null = null;
       for (const part of splitValue(value)) {
         const v = part.toLowerCase();
         if (v === 'auto') continue;
-        if (/^\d+$/.test(v) && Number(v) >= 1) set |= 1;
-        else if (parseLength(part, ctx) !== null) set |= 2;
-        else return;
+        if (/^\d+$/.test(v) && Number(v) >= 1) {
+          if (count !== null || !(bit & 1)) return;
+          count = Number(v);
+          continue;
+        }
+        const len = parseLength(part, ctx);
+        if (typeof len !== 'number' || !(len > 0)) return;
+        if (width !== null || !(bit & 2)) return;
+        width = len;
+      }
+      if (bit & 1) style.columnCount = count;
+      if (bit & 2) style.columnWidth = width;
+      style.columns =
+        (style.columnCount !== null ? 1 : 0) |
+        (style.columnWidth !== null ? 2 : 0);
+      return;
+    }
+    case 'orphans':
+    case 'widows': {
+      // a whole number of lines, one or more
+      const v = value.trim();
+      if (!/^\+?\d+$/.test(v) || Number(v) < 1) return;
+      style[name] = Number(v);
+      return;
+    }
+    case '-webkit-column-span':
+    case 'column-span': {
+      const v = value.trim().toLowerCase();
+      if (v === 'all') style.columnSpan = true;
+      else if (v === 'none') style.columnSpan = false;
+      return;
+    }
+    case 'column-fill': {
+      const v = value.trim().toLowerCase();
+      if (v === 'auto') style.columnFill = 'auto';
+      else if (v === 'balance' || v === 'balance-all') {
+        style.columnFill = 'balance';
+      }
+      return;
+    }
+    case 'break-inside':
+    case 'page-break-inside': {
+      const v = value.trim().toLowerCase();
+      if (v === 'auto') style.breakInside = 'auto';
+      else if (/^avoid(?:-page|-column|-region)?$/.test(v)) {
+        // the legacy property knows `avoid` alone
+        if (name === 'page-break-inside' && v !== 'avoid') return;
+        style.breakInside = 'avoid';
       }
-      style.columns = (style.columns & ~bit) | (set & bit);
       return;
     }
     case '-webkit-box-flex': {
@@ -1534,6 +1818,12 @@ export function applyDeclaration(
       if (clip !== undefined) style.clip = clip;
       return;
     }
+    case 'clip-path':
+    case '-webkit-clip-path': {
+      const path = parseClipPath(value, ctx);
+      if (path !== undefined) style.clipPath = path;
+      return;
+    }
     case 'opacity': {
       const a = parseAlpha(value);
       if (a !== null) style.opacity = a;
@@ -1553,9 +1843,31 @@ export function applyDeclaration(
       style.translate = [x, y ?? 0];
       return;
     }
-    case 'transform': {
-      const moved = transformTranslation(value, ctx);
-      if (moved !== undefined) style.transformTranslate = moved;
+    case 'rotate': {
+      const turn = parseRotate(value);
+      if (turn !== undefined) style.rotate = turn;
+      return;
+    }
+    case 'scale': {
+      const factors = parseScale(value);
+      if (factors !== undefined) style.scale = factors;
+      return;
+    }
+    case 'transform':
+    case '-webkit-transform': {
+      const list = parseTransform(value, ctx);
+      if (list !== undefined) style.transform = list;
+      return;
+    }
+    case 'transform-origin':
+    case '-webkit-transform-origin': {
+      // across and down, as a position is, and a depth nothing here has
+      const parts = splitValue(value);
+      if (parts.length === 3) {
+        if (typeof parseLength(parts.pop()!, ctx) !== 'number') return;
+      } else if (parts.length > 2) return;
+      const origin = positionPair(parts, ctx);
+      if (origin) style.transformOrigin = origin;
       return;
     }
     case 'visibility': {
@@ -1818,19 +2130,8 @@ export function applyDeclaration(
       return;
     }
     case 'border-radius': {
-      // one to four radii, and after a `/` one to four more for the
-      // vertical radii where they differ: elliptical corners
-      const halves = value.split('/');
-      if (halves.length > 2) return;
-      const [horizontal, vertical] = halves.map((half) =>
-        splitValue(half).map((p) => radiusOf(p, ctx)),
-      );
-      for (const parts of vertical ? [horizontal, vertical] : [horizontal]) {
-        if (!parts.length || parts.length > 4 || parts.includes(null)) return;
-      }
-      style.borderRadius = fourSides(horizontal as Len[]);
-      const y = vertical ? fourSides(vertical as Len[]) : null;
-      style.borderRadiusY = y && !sameRadii(style.borderRadius, y) ? y : null;
+      const radii = parseRadii(value, ctx);
+      if (radii) [style.borderRadius, style.borderRadiusY] = radii;
       return;
     }
 
@@ -2073,7 +2374,20 @@ export function applyDeclaration(
         )
         .filter(Boolean)
         .join(', ');
-      style.fontFamily = ctx.families ? ctx.families(list) : list;
+      // A list that ends in no generic family ends in the document's own
+      // font: where no face in the list matches, the text is set in the
+      // user agent's default (CSS Fonts 4, 5.1), which for a browser is its
+      // standard font and here is the one the document is set in. The text
+      // engine's own answer for a name nothing has is its platform's pick,
+      // Verdana under fontconfig: the Zen Garden's 216 sets its summary in
+      // Montserrat alone, which no machine here has, and Chrome sets it in
+      // Times where ours was Verdana, a fifth wider
+      const last = names[names.length - 1].trim();
+      const generic =
+        !/^['"]/.test(last) && GENERIC_FAMILY.has(last.toLowerCase());
+      const fallback = generic ? null : (ctx.fallbackFamily?.() ?? null);
+      const full = fallback ? `${list}, ${fallback}` : list;
+      style.fontFamily = ctx.families ? ctx.families(full) : full;
       return;
     }
     case 'font-size': {
@@ -2479,6 +2793,20 @@ export function applyDeclaration(
       style.cursor = splitCommas(value)[0]?.trim().toLowerCase() || null;
       return;
     }
+    case 'pointer-events': {
+      // `none`, or one of the values SVG gives it, which are `auto` on
+      // anything that is not SVG's to draw
+      const v = value.trim().toLowerCase();
+      if (v === 'none') style.pointerEvents = 'none';
+      else if (POINTER_EVENTS.has(v)) style.pointerEvents = 'auto';
+      return;
+    }
+    case 'fill':
+    case 'stroke': {
+      const paint = svgPaint(value);
+      if (paint !== null) style[name] = paint;
+      return;
+    }
 
     // --- lists --------------------------------------------------------------
     case 'list-style': {
@@ -2651,7 +2979,11 @@ export function applyDeclaration(
       const col = parts.length > 1 ? gap(parts[1]) : row;
       if (row === null || col === null) return;
       if (which !== 'column-gap') style.rowGap = row;
-      if (which !== 'row-gap') style.columnGap = col;
+      if (which !== 'row-gap') {
+        style.columnGap = col;
+        const word = parts[parts.length - 1].toLowerCase();
+        style.columnGapNormal = word === 'normal';
+      }
       return;
     }
     case 'grid-template-columns':
@@ -3128,6 +3460,12 @@ function alignKeyword(value: string): string | null {
       return 'flex-end';
     case 'first baseline':
       return 'baseline';
+    // By last baselines, which nothing here aligns: set where that falls
+    // back to, the end (CSS Box Alignment 3, 4.2). Dropped, a row that asks
+    // for it stretched its items, and a flex box among them was as tall as
+    // the row, its lines spread down it.
+    case 'last baseline':
+      return 'flex-end';
     case 'center':
       return 'center';
     case 'stretch':
@@ -3799,7 +4137,7 @@ function backgroundImageOf(
   ctx: UnitContext,
 ): BackgroundImage | undefined {
   const v = text.trim();
-  if (IMAGE_FUNCTION.test(v.toLowerCase())) return parseLinearGradient(v, ctx);
+  if (IMAGE_FUNCTION.test(v.toLowerCase())) return parseGradient(v, ctx);
   return parseUrl(v);
 }
 
@@ -3821,7 +4159,7 @@ function layerValues<T>(
 interface BackgroundLayer {
   color: string | null;
   image: string | null;
-  gradient: LinearGradient | null;
+  gradient: Gradient | null;
   repeat: ComputedStyle['backgroundRepeat'];
   size: ComputedStyle['backgroundSize'];
   attachment: ComputedStyle['backgroundAttachment'];
@@ -3837,7 +4175,7 @@ interface BackgroundLayer {
  * is dropped rather than resetting the background it meant to replace
  * (CSS 2.1 4.2). What CSS3 adds is read too, so that a declaration a
  * browser keeps is kept: `/ cover` after the position, `space` and `round`,
- * a gradient — drawn as nothing, over the layer's colour.
+ * and a gradient, over the layer's colour.
  */
 function readBackgroundLayer(
   text: string,
@@ -3872,7 +4210,7 @@ function readBackgroundLayer(
         const url = parseUrl(part);
         if (url === undefined) return null;
         layer.image = url;
-      } else if (v !== 'none') layer.gradient = parseLinearGradient(part, ctx);
+      } else if (v !== 'none') layer.gradient = parseGradient(part, ctx);
       i += 1;
     } else if (v === 'repeat-x' || v === 'repeat-y' || REPEATS.has(v)) {
       if (!once(2)) return null;
@@ -3936,10 +4274,8 @@ function readBackgroundLayer(
 
 /**
  * A `linear-gradient()`, or null for any other image function and for one
- * that is no gradient: a direction by angle, by side or by corner, with a
- * colour interpolation method (`in oklab`, which Tailwind 4 writes) read and
- * not honoured, and at least two stops, each with no position, one, or two;
- * a bare percentage between stops, a hint, is passed over.
+ * that is no gradient: a direction by angle, by side or by corner, and its
+ * colour stops.
  */
 function parseLinearGradient(
   text: string,
@@ -3948,14 +4284,13 @@ function parseLinearGradient(
   const m = /^linear-gradient\((.*)\)$/is.exec(text.trim());
   if (!m) return null;
   const args = splitCommas(m[1]).map((a) => a.trim());
-  const out: LinearGradient = { angle: Math.PI, corner: null, stops: [] };
-  const first = (args[0] ?? '')
-    .toLowerCase()
-    .replace(
-      /\bin\s+[a-z-]+(?:\s+(?:shorter|longer|increasing|decreasing)\s+hue)?/,
-      '',
-    )
-    .trim();
+  const out: LinearGradient = {
+    kind: 'linear',
+    angle: Math.PI,
+    corner: null,
+    stops: [],
+  };
+  const first = withoutInterpolation(args[0] ?? '');
   let from = 0;
   if (!first || first.startsWith('to ')) {
     from = 1;
@@ -3991,7 +4326,120 @@ function parseLinearGradient(
       from = 1;
     }
   }
-  for (const arg of args.slice(from)) {
+  const stops = parseStops(args.slice(from), ctx);
+  if (!stops) return null;
+  out.stops = stops;
+  return out;
+}
+
+/**
+ * A `radial-gradient()` (CSS Images 3, 3.2.1), or null for anything else:
+ * an ending shape, `circle` or `ellipse`, and its size, in either order —
+ * a keyword for the side or corner of the box it reaches, one length for a
+ * circle's radius, or two lengths or percentages for an ellipse's — then
+ * `at` and its centre, a position as `background-position` writes one;
+ * each of the three may be left out, for an ellipse through the farthest
+ * corner from the middle of the box. A colour interpolation method is read
+ * and not honoured, and the stops are a linear gradient's, spaced along
+ * the ray from the centre to the shape's edge.
+ */
+function parseRadialGradient(
+  text: string,
+  ctx: UnitContext,
+): RadialGradient | null {
+  const m = /^radial-gradient\((.*)\)$/is.exec(text.trim());
+  if (!m) return null;
+  const args = splitCommas(m[1]).map((a) => a.trim());
+  const out: RadialGradient = {
+    kind: 'radial',
+    circle: false,
+    extent: null,
+    radii: null,
+    at: [{ pct: 50 }, { pct: 50 }],
+    stops: [],
+  };
+  const first = withoutInterpolation(args[0] ?? '');
+  let from = 0;
+  if (!first) from = 1;
+  else if (parseColor(splitValue(first)[0]) === null) {
+    from = 1;
+    const words = splitValue(first);
+    const at = words.indexOf('at');
+    if (at >= 0) {
+      const position = positionPair(words.slice(at + 1), ctx);
+      if (!position) return null;
+      out.at = position;
+    }
+    let shape: string | null = null;
+    const sizes: Len[] = [];
+    // the size is one run of words, the shape's keyword before or after it
+    let sized = false;
+    for (const word of at >= 0 ? words.slice(0, at) : words) {
+      if (word === 'circle' || word === 'ellipse') {
+        if (shape) return null;
+        shape = word;
+        if (sizes.length || out.extent) sized = true;
+        continue;
+      }
+      if (sized || out.extent) return null;
+      if (RADIAL_EXTENTS.has(word)) {
+        if (sizes.length) return null;
+        out.extent = word as RadialExtent;
+        continue;
+      }
+      const len = parseLength(word, ctx);
+      if (len === null || len === AUTO || !notNegative(len)) return null;
+      sizes.push(len);
+    }
+    if (sizes.length === 1) {
+      // a circle's radius is a length: a percentage of what, the spec asks
+      const [r] = sizes;
+      if (shape === 'ellipse' || typeof r !== 'number') {
+        return null;
+      }
+      out.circle = true;
+      out.radii = [r, r];
+    } else if (sizes.length === 2) {
+      if (shape === 'circle') return null;
+      out.radii = [sizes[0], sizes[1]];
+    } else if (sizes.length) return null;
+    else {
+      out.circle = shape === 'circle';
+      out.extent ??= 'farthest-corner';
+    }
+  }
+  const stops = parseStops(args.slice(from), ctx);
+  if (!stops) return null;
+  out.stops = stops;
+  return out;
+}
+
+const RADIAL_EXTENTS = new Set([
+  'closest-side',
+  'closest-corner',
+  'farthest-side',
+  'farthest-corner',
+]);
+
+/** A gradient's first argument, lower-cased, without the colour
+ *  interpolation method CSS Images 4 adds to it (`in oklab`, which
+ *  Tailwind 4 writes): read, and not honoured. */
+function withoutInterpolation(arg: string): string {
+  return arg
+    .toLowerCase()
+    .replace(
+      /\bin\s+[a-z-]+(?:\s+(?:shorter|longer|increasing|decreasing)\s+hue)?/,
+      '',
+    )
+    .trim();
+}
+
+/** A gradient's colour stops, at least two, each with no position, one or
+ *  two; a bare length between two stops, a hint, is passed over. Null
+ *  where an argument is none of those. */
+function parseStops(args: string[], ctx: UnitContext): GradientStop[] | null {
+  const stops: GradientStop[] = [];
+  for (const arg of args) {
     const parts = splitValue(arg);
     const color = parseColor(parts[0] ?? '');
     if (color === null) {
@@ -4002,14 +4450,19 @@ function parseLinearGradient(
     if (parts.length > 3) return null;
     const at = parts.slice(1).map((p) => parseLength(p, ctx));
     if (at.some((p) => p === null || p === AUTO)) return null;
-    if (!at.length) out.stops.push({ color, at: null });
-    for (const p of at) out.stops.push({ color, at: p as Len });
+    if (!at.length) stops.push({ color, at: null });
+    for (const p of at) stops.push({ color, at: p as Len });
   }
-  return out.stops.length >= 2 ? out : null;
+  return stops.length >= 2 ? stops : null;
+}
+
+/** A gradient function's image, where it is one this draws. */
+function parseGradient(text: string, ctx: UnitContext): Gradient | null {
+  return parseLinearGradient(text, ctx) ?? parseRadialGradient(text, ctx);
 }
 
 /** The images CSS3 has beyond `url()`, which a layer may name: a linear
- *  gradient is drawn, and the rest draw as nothing. */
+ *  and a radial gradient are drawn, and the rest draw as nothing. */
 const IMAGE_FUNCTION =
   /^(?:-(?:webkit|moz|o|ms)-)?(?:(?:repeating-)?(?:linear|radial|conic)-gradient|gradient|image-set|cross-fade|element|paint)\(/;
 
@@ -4050,87 +4503,6 @@ function whiteSpaceOf(collapse: Collapse, wrap: boolean): WhiteSpace {
   return 'pre-line';
 }
 
-/**
- * The translation a `transform` makes: the sum of its translate functions'
- * and its matrices' — `translate(-50%, -50%)`, Tailwind 3's `translate(
- * var(--tw-translate-x), var(--tw-translate-y)) rotate(…) skewX(…) …` —
- * with the functions that rotate, scale, skew or add perspective read and
- * not drawn. Null for `none`, and undefined for what is no transform list,
- * which drops the declaration.
- */
-function transformTranslation(
-  value: string,
-  ctx: UnitContext,
-): [Len, Len] | null | undefined {
-  if (value.trim().toLowerCase() === 'none') return null;
-  let x: Len = 0;
-  let y: Len = 0;
-  const parts = splitValue(value);
-  if (!parts.length) return undefined;
-  for (const part of parts) {
-    const m = /^([a-z0-9]+)\((.*)\)$/is.exec(part.trim());
-    if (!m) return undefined;
-    const name = m[1].toLowerCase();
-    const args = splitCommas(m[2]).map((a) => a.trim());
-    let dx: Len | null = 0;
-    let dy: Len | null = 0;
-    if (name === 'translate' || name === 'translate3d') {
-      dx = parseLength(args[0] ?? '', ctx);
-      dy = args[1] === undefined ? 0 : parseLength(args[1], ctx);
-    } else if (name === 'translatex') dx = parseLength(args[0] ?? '', ctx);
-    else if (name === 'translatey') dy = parseLength(args[0] ?? '', ctx);
-    else if (name === 'matrix' || name === 'matrix3d') {
-      // the translation is the last column's
-      const n = args.map(Number);
-      if (n.length !== (name === 'matrix' ? 6 : 16) || n.some(isNaN)) {
-        return undefined;
-      }
-      [dx, dy] = name === 'matrix' ? [n[4], n[5]] : [n[12], n[13]];
-    } else if (!TRANSFORMS.has(name)) return undefined;
-    if (dx === null || dx === AUTO || dy === null || dy === AUTO) {
-      return undefined;
-    }
-    const sx = addLen(x, dx);
-    const sy = addLen(y, dy);
-    if (sx === null || sy === null) return undefined;
-    x = sx;
-    y = sy;
-  }
-  return [x, y];
-}
-
-/** The transform functions read and not drawn. */
-const TRANSFORMS = new Set([
-  'translatez',
-  'rotate',
-  'rotatex',
-  'rotatey',
-  'rotatez',
-  'rotate3d',
-  'scale',
-  'scalex',
-  'scaley',
-  'scalez',
-  'scale3d',
-  'skew',
-  'skewx',
-  'skewy',
-  'perspective',
-]);
-
-/** Two lengths added, a percentage and a length kept apart; null where
- *  one is a `min()` or a `max()`, which a sum cannot be kept of. */
-function addLen(a: Len, b: Len): Len | null {
-  if (a === AUTO || b === AUTO) return null;
-  if (typeof a === 'number' && typeof b === 'number') return a + b;
-  if (a === 0) return b;
-  if (b === 0) return a;
-  const pa: Pct = typeof a === 'number' ? { pct: 0, px: a } : a;
-  const pb: Pct = typeof b === 'number' ? { pct: 0, px: b } : b;
-  if (pa.of || pb.of) return null;
-  return { pct: pa.pct + pb.pct, px: (pa.px ?? 0) + (pb.px ?? 0) };
-}
-
 /** An intrinsic size keyword, with the prefixes browsers still read, or
  *  `fit-content()` of a length or a percentage (CSS Sizing 3, 3.1) — a
  *  width's, where a height's is its content height as the keyword is;
@@ -4769,6 +5141,33 @@ function splitTopLevelSlash(value: string): string[] {
 
 // --- logical properties ----------------------------------------------------
 
+/** `pointer-events`' values besides `none` (CSS UI 4, SVG 2 15.6). */
+const POINTER_EVENTS = new Set([
+  'auto',
+  'bounding-box',
+  'visiblepainted',
+  'visiblefill',
+  'visiblestroke',
+  'visible',
+  'painted',
+  'fill',
+  'stroke',
+  'all',
+]);
+/**
+ * A `fill` or a `stroke` (SVG 2, 13.2): `none`, a colour, or a `url()`
+ * naming a gradient in the drawing, with what follows it, its fallback,
+ * left off. Null for anything else, `context-fill` and `context-stroke`
+ * among it, which only a marker or a `<use>` has a context for.
+ */
+function svgPaint(value: string): string | null {
+  const v = value.trim();
+  if (v.toLowerCase() === 'none') return 'none';
+  const url = /^url\(\s*(['"]?)(#[^'")\s]+)\1\s*\)/i.exec(v);
+  if (url) return `url(${url[2]})`;
+  return parseColor(v);
+}
+
 const OBJECT_FITS = new Set(['fill', 'contain', 'cover', 'none', 'scale-down']);
 
 /**
@@ -4860,6 +5259,29 @@ function radiusOf(text: string, ctx: UnitContext): Len | null {
   return len.pct < 0 && !len.px && !len.of ? null : len;
 }
 
+/**
+ * `border-radius`'s value: one to four radii, and after a `/` one to four
+ * more for the vertical radii where they differ, elliptical corners — the
+ * radii across, and the ones down, null where they are the same values.
+ * Null for anything else.
+ */
+function parseRadii(
+  value: string,
+  ctx: UnitContext,
+): [[Len, Len, Len, Len], [Len, Len, Len, Len] | null] | null {
+  const halves = value.split('/');
+  if (halves.length > 2) return null;
+  const [horizontal, vertical] = halves.map((half) =>
+    splitValue(half).map((p) => radiusOf(p, ctx)),
+  );
+  for (const parts of vertical ? [horizontal, vertical] : [horizontal]) {
+    if (!parts.length || parts.length > 4 || parts.includes(null)) return null;
+  }
+  const across = fourSides(horizontal as Len[]);
+  const down = vertical ? fourSides(vertical as Len[]) : null;
+  return [across, down && !sameRadii(across, down) ? down : null];
+}
+
 /** Whether two corners' radii are the same values. */
 function sameRadii(a: readonly Len[], b: readonly Len[]): boolean {
   for (let i = 0; i < 4; i += 1) {
@@ -5102,10 +5524,15 @@ const INHERITED_NAMES = new Set<string>([
   'list-style-position',
   'list-style-image',
   'cursor',
+  'pointer-events',
+  'fill',
+  'stroke',
   'border-collapse',
   'border-spacing',
   'empty-cells',
   'quotes',
+  'orphans',
+  'widows',
 ]);
 
 export function isInherited(name: string): boolean {
@@ -5260,6 +5687,9 @@ const INHERIT_TARGETS: Record<string, readonly (keyof ComputedStyle)[]> = {
   'list-style-position': ['listStylePosition'],
   'list-style-image': ['listStyleImage'],
   cursor: ['cursor'],
+  'pointer-events': ['pointerEvents'],
+  fill: ['fill'],
+  stroke: ['stroke'],
   'border-collapse': ['borderCollapse'],
   'caption-side': ['captionSide'],
   'empty-cells': ['emptyCells'],
@@ -5328,9 +5758,16 @@ const INHERIT_TARGETS: Record<string, readonly (keyof ComputedStyle)[]> = {
   '-webkit-box-pack': ['webkitBoxPack'],
   '-webkit-box-align': ['webkitBoxAlign'],
   '-webkit-box-flex': ['webkitBoxFlex'],
-  columns: ['columns'],
-  'column-count': ['columns'],
-  'column-width': ['columns'],
+  columns: ['columns', 'columnCount', 'columnWidth'],
+  'column-count': ['columns', 'columnCount'],
+  'column-width': ['columns', 'columnWidth'],
+  orphans: ['orphans'],
+  widows: ['widows'],
+  'break-inside': ['breakInside'],
+  'column-fill': ['columnFill'],
+  'column-span': ['columnSpan'],
+  '-webkit-column-span': ['columnSpan'],
+  'page-break-inside': ['breakInside'],
   'text-overflow': ['textOverflow'],
   // a flex box's and its items', and a grid's
   'flex-direction': ['flexDirection'],
@@ -5345,12 +5782,12 @@ const INHERIT_TARGETS: Record<string, readonly (keyof ComputedStyle)[]> = {
   'flex-shrink': ['flexShrink'],
   'flex-basis': ['flexBasis'],
   order: ['order'],
-  gap: ['rowGap', 'columnGap'],
+  gap: ['rowGap', 'columnGap', 'columnGapNormal'],
   'row-gap': ['rowGap'],
-  'column-gap': ['columnGap'],
-  'grid-gap': ['rowGap', 'columnGap'],
+  'column-gap': ['columnGap', 'columnGapNormal'],
+  'grid-gap': ['rowGap', 'columnGap', 'columnGapNormal'],
   'grid-row-gap': ['rowGap'],
-  'grid-column-gap': ['columnGap'],
+  'grid-column-gap': ['columnGap', 'columnGapNormal'],
   'grid-template-columns': ['gridColumns'],
   'grid-template-rows': ['gridRows'],
   'grid-auto-rows': ['gridAutoRows'],
@@ -5445,11 +5882,18 @@ const INHERIT_TARGETS: Record<string, readonly (keyof ComputedStyle)[]> = {
   clear: ['clear'],
   overflow: ['overflowX', 'overflowY'],
   clip: ['clip'],
+  'clip-path': ['clipPath'],
+  '-webkit-clip-path': ['clipPath'],
   'overflow-x': ['overflowX'],
   'overflow-y': ['overflowY'],
   opacity: ['opacity'],
   translate: ['translate'],
-  transform: ['transformTranslate'],
+  rotate: ['rotate'],
+  scale: ['scale'],
+  transform: ['transform'],
+  '-webkit-transform': ['transform'],
+  'transform-origin': ['transformOrigin'],
+  '-webkit-transform-origin': ['transformOrigin'],
   'z-index': ['zIndex'],
   'vertical-align': ['verticalAlign'],
   'text-decoration': [
@@ -5512,7 +5956,7 @@ export function decorate(style: ComputedStyle): void {
       style.color,
     );
     style.underlineStyle = style.textDecorationStyle;
-    style.underlineThickness = style.textDecorationThickness;
+    style.underlineThickness = usedThickness(style);
     style.underlineOffset = style.textUnderlineOffset;
   }
   if (lines.includes('line-through')) {
@@ -5520,9 +5964,30 @@ export function decorate(style: ComputedStyle): void {
       style.textDecorationColor ?? 'currentColor',
       style.color,
     );
+    style.lineThroughStyle = style.textDecorationStyle;
+    style.lineThroughThickness = usedThickness(style);
   }
 }
 
+/**
+ * How thick the lines a box decorates its text with are. `auto` leaves it
+ * to the user agent, which is to take it from the font where the font says
+ * (CSS Text Decoration 4, 2.4.1); neither text engine here reports a face's
+ * underline, so it is a part of the font size, Blink's tenth — of the size
+ * of the box that set the decoration, which draws one line of one thickness
+ * through everything inside it (2.9). A pixel for every size drew the dots
+ * under the `<abbr>` of a 140px title as a hairline. `from-font` is `auto`
+ * for the same want of a metric, a length is itself on whole pixels, and
+ * no line is thinner than one.
+ */
+function usedThickness(style: ComputedStyle): number {
+  const length = style.textDecorationThickness;
+  return Math.max(
+    1,
+    length === null ? style.fontSize / 10 : Math.round(length),
+  );
+}
+
 /**
  * The absolutely positioned styles that were inline-level before they were
  * made blocks: where such a box would have been in flow is on its line,
@@ -5638,3 +6103,55 @@ export function blockify(style: ComputedStyle, inFlexContainer: boolean): void {
       return;
   }
 }
+
+/**
+ * The `display` a `<button>` is laid out with, which is not always the one
+ * it was given (HTML's rendering section, button layout, 15.5.3): a flex
+ * box or a grid is that, and of the rest, "a value such that the outer
+ * display type is 'inline'" behaves as `inline-block` and anything else as
+ * `flow-root`. Blink computes them so — `inline-block` for `inline` and
+ * `inline-table`, `block` for `table` and `list-item` — and makes the one
+ * block flow of each; the formatting context is the layout's to give every
+ * button that is a block (`establishesBFC`).
+ *
+ * Left an inline box, a button around a block was broken in two around it,
+ * as any inline box is: as wide as the line, its `height` applied to
+ * nothing, and its border and padding drawn above and below the line it
+ * opened. A table's part is left what it is, where the two disagree: a
+ * block to the text, an inline-block in Blink. After `blockify`, since a
+ * float, an absolute box and a flex item are blocks first.
+ */
+export function settleButton(style: ComputedStyle): void {
+  switch (style.display) {
+    case 'inline':
+    case 'inline-table':
+      style.display = 'inline-block';
+      return;
+    case 'list-item':
+    case 'table':
+      style.display = 'block';
+      return;
+    default:
+      return;
+  }
+}
+
+/** The generic font families, which a list ending in one falls back
+ *  through already, in the text engine (CSS Fonts 4, 4.2). */
+const GENERIC_FAMILY = new Set([
+  'serif',
+  'sans-serif',
+  'monospace',
+  'cursive',
+  'fantasy',
+  'system-ui',
+  'ui-serif',
+  'ui-sans-serif',
+  'ui-monospace',
+  'ui-rounded',
+  'math',
+  'emoji',
+  'fangsong',
+  '-apple-system',
+  'blinkmacsystemfont',
+]);