@react-x11/components 0.10.0 → 0.12.0

package/src/html/css/style.ts

@@ -40,6 +40,7 @@ import {
 } from './content.js';
 import type { ContentItem, CounterChange } from './content.js';
 import type { CustomProps } from './vars.js';
+import { LIGHT_DARK, lightDark, usedColorScheme } from './color.js';
 
 export type Display =
   | 'none'
@@ -202,6 +203,14 @@ export type ContentSize =
 export interface ComputedStyle {
   // --- inherited ------------------------------------------------------------
   color: string;
+  /**
+   * The colour scheme the element is drawn in (CSS Color Adjust 1, 2.2):
+   * its `color-scheme` resolved against the scheme the palette is, which
+   * stands for the reader's preference, as it does for `@media
+   * (prefers-color-scheme)`. What a `light-dark()` picks by. `normal` is
+   * the palette's own, since the palette is this renderer's default look.
+   */
+  colorScheme: 'light' | 'dark';
   fontFamily: string;
   fontSize: number;
   fontWeight: number;
@@ -320,6 +329,11 @@ export interface ComputedStyle {
   float: 'none' | 'left' | 'right';
   clear: 'none' | 'left' | 'right' | 'both';
   boxSizing: 'content-box' | 'border-box';
+  /** `box-decoration-break` (CSS Fragmentation 3, 5.4): how an inline box
+   *  that goes on to another line places its background images and
+   *  gradients — `slice`, from its fragments laid end to end as one box,
+   *  or `clone`, from each fragment's own. */
+  boxDecorationBreak: 'slice' | 'clone';
   /** Whether a block is a line-clamp container, and how many lines of its
    *  formatting context it shows (CSS Overflow 4, 5.3.1): its `max-lines`,
    *  or Infinity for `line-clamp: auto`, which shows as many as its height
@@ -497,14 +511,18 @@ export interface ComputedStyle {
   /** `background-clip` and `background-origin` (CSS Backgrounds 3, 3.7 and
    *  3.8): the box a layer is painted in and the box it is placed in, the
    *  colour painted in the bottom layer's; each a list as the four above. */
-  backgroundClip: VisualBox;
+  backgroundClip: BackgroundClip;
   backgroundOrigin: VisualBox;
-  backgroundClips: VisualBox[] | null;
+  backgroundClips: BackgroundClip[] | null;
   backgroundOrigins: VisualBox[] | null;
   /** `border-image` and its longhands (CSS Backgrounds 3, 6): one object,
    *  replaced whole when any of them changes, and `NO_BORDER_IMAGE` where
    *  nothing sets them. */
   borderImage: BorderImage;
+  /** `mask-image` and the longhands that place its layers (CSS Masking 1,
+   *  7): one object, replaced whole when any of them changes, and
+   *  `NO_MASK` where nothing sets them. */
+  mask: MaskLayers;
   /** `-webkit-text-fill-color`: what the glyphs are filled with where it
    *  is not the text's `color` — Tailwind's `text-transparent` over a
    *  `bg-clip-text` gradient; null for `color`, as `currentColor` is. */
@@ -608,6 +626,7 @@ export interface ComputedStyle {
  *  same list. */
 export const INHERITED = [
   'color',
+  'colorScheme',
   'textFillColor',
   'fontFamily',
   'fontSize',
@@ -689,6 +708,7 @@ export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
   // a copy of the literal, not the literal: see `copyStyle`
   return copyStyle({
     color: look.color,
+    colorScheme: look.colorScheme,
     fontFamily: look.fontFamily,
     fontSize: look.fontSize,
     fontWeight: 400,
@@ -747,6 +767,7 @@ export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
     float: 'none',
     clear: 'none',
     boxSizing: 'content-box',
+    boxDecorationBreak: 'slice',
     lineClamp: null,
     maxLines: null,
     clampContinue: 'auto',
@@ -846,6 +867,7 @@ export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
     backgroundClips: null,
     backgroundOrigins: null,
     borderImage: NO_BORDER_IMAGE,
+    mask: NO_MASK,
     textFillColor: null,
 
     textDecorationLine: 'none',
@@ -941,6 +963,7 @@ export function inherit(
   // quarters of the cost of every element's style, a store through a
   // computed name costing thirty times one through a written one
   out.color = parent.color;
+  out.colorScheme = parent.colorScheme;
   out.textFillColor = parent.textFillColor;
   out.fontFamily = parent.fontFamily;
   out.fontSize = parent.fontSize;
@@ -1162,6 +1185,15 @@ export function applyDeclaration(
   if (/!\s*important$/i.test(value)) {
     value = value.replace(/!\s*important$/i, '').trim();
   }
+  // the branch of each `light-dark()` this element's scheme picks, before
+  // anything reads the value: it stands wherever a colour can, in a
+  // shorthand, a shadow, a gradient or a mix, and most often arrives
+  // through a `var()` from a theme on `:root`
+  if (LIGHT_DARK.test(value)) {
+    const picked = lightDark(value, style.colorScheme);
+    if (picked === null) return;
+    value = picked;
+  }
 
   const color = COLOR_PROPS[name];
   if (color) {
@@ -1178,6 +1210,12 @@ export function applyDeclaration(
   }
 
   switch (name) {
+    case 'color-scheme': {
+      const scheme = usedColorScheme(value, ctx.initial?.colorScheme);
+      if (scheme) style.colorScheme = scheme;
+      return;
+    }
+
     // --- box ----------------------------------------------------------------
     case 'display': {
       const v = value.toLowerCase();
@@ -1366,6 +1404,12 @@ export function applyDeclaration(
       if (v === 'border-box' || v === 'content-box') style.boxSizing = v;
       return;
     }
+    case 'box-decoration-break':
+    case '-webkit-box-decoration-break': {
+      const v = value.trim().toLowerCase();
+      if (v === 'slice' || v === 'clone') style.boxDecorationBreak = v;
+      return;
+    }
     case 'aspect-ratio': {
       const parsed = parseAspectRatio(value);
       if (parsed !== undefined) style.aspectRatio = parsed;
@@ -1799,14 +1843,29 @@ export function applyDeclaration(
     }
     case 'background-clip':
     case '-webkit-background-clip': {
-      // `text` the first layer's alone, which paints through the text
+      // `text` the first layer's alone, which paints through the text —
+      // and with `border-area` through its border as well, in either order
+      // (CSS Backgrounds 4, 2.1)
       const clips = layerValues(value, (part) => {
         const v = part.toLowerCase();
-        return v === 'text' || isVisualBox(v) ? v : null;
+        if (v === 'text' || isBackgroundClip(v)) return v;
+        const [a, b, more] = splitValue(v);
+        return !more &&
+          ((a === 'border-area' && b === 'text') ||
+            (a === 'text' && b === 'border-area'))
+          ? 'border-area text'
+          : null;
       });
       if (!clips) return;
-      style.backgroundClipText = clips[0] === 'text';
-      const boxes = clips.map((c) => (c === 'text' ? 'border-box' : c));
+      style.backgroundClipText =
+        clips[0] === 'text' || clips[0] === 'border-area text';
+      const boxes = clips.map((c): BackgroundClip =>
+        c === 'text'
+          ? 'border-box'
+          : c === 'border-area text'
+            ? 'border-area'
+            : (c as BackgroundClip),
+      );
       style.backgroundClip = boxes[0];
       style.backgroundClips = boxes.length > 1 ? boxes : null;
       return;
@@ -1891,6 +1950,67 @@ export function applyDeclaration(
       return;
     }
 
+    // --- masking --------------------------------------------------------------
+    // Each `-webkit-` name is the same property's (Compatibility, 5): every
+    // engine takes both, and a page writes both — Wikipedia's icons do.
+    case 'mask':
+    case '-webkit-mask': {
+      const mask = readMask(value, ctx);
+      if (mask) style.mask = mask;
+      return;
+    }
+    case 'mask-image':
+    case '-webkit-mask-image': {
+      // `none` a layer as much as an image is; a bad url drops it all
+      const images: BackgroundImage[] = [];
+      for (const part of splitCommas(value)) {
+        const image = maskImageOf(part, ctx);
+        if (image === undefined) return;
+        images.push(image);
+      }
+      if (images.length) style.mask = { ...style.mask, images };
+      return;
+    }
+    case 'mask-repeat':
+    case '-webkit-mask-repeat': {
+      const repeats = layerValues(value, (part) => {
+        const words = splitValue(part.toLowerCase());
+        return words.length <= 2 ? readRepeat(words) : null;
+      });
+      if (repeats) style.mask = { ...style.mask, repeats };
+      return;
+    }
+    case 'mask-size':
+    case '-webkit-mask-size': {
+      const sizes = layerValues(value, (part) =>
+        backgroundSizeOf(splitValue(part), ctx),
+      );
+      if (sizes) style.mask = { ...style.mask, sizes };
+      return;
+    }
+    case 'mask-position':
+    case '-webkit-mask-position': {
+      const positions = layerValues(value, (part) =>
+        positionPair(splitValue(part), ctx),
+      );
+      if (positions) style.mask = { ...style.mask, positions };
+      return;
+    }
+    case 'mask-origin':
+    case '-webkit-mask-origin': {
+      const origins = layerValues(value, (part) => maskBox(part));
+      if (origins) style.mask = { ...style.mask, origins };
+      return;
+    }
+    case 'mask-clip':
+    case '-webkit-mask-clip': {
+      const clips = layerValues(value, (part) =>
+        part.toLowerCase() === 'no-clip' ? 'border-box' : maskBox(part),
+      );
+      if (clips) style.mask = { ...style.mask, clips };
+      return;
+    }
+
     // --- generated content --------------------------------------------------
     case 'content': {
       const parsed = parseContent(value);
@@ -1998,7 +2118,13 @@ export function applyDeclaration(
         style.lineHeight = len;
         style.lineHeightIsLength = true;
       } else if (len && typeof len === 'object') {
-        const px = resolve(len, style.fontSize);
+        // a percentage of the element's own font size, the one it is
+        // computed with (CSS 2.1 10.8.1), which `em` already is: not the
+        // size in `style` as this declaration comes up, which a `font`
+        // earlier in the same rule has just set to its own — `p { font:
+        // 12px …; line-height: 100% }` under a `.lead { font-size: 16px }`
+        // set sixteen-pixel text on twelve-pixel lines
+        const px = resolve(len, ctx.em);
         if (px < 0) return;
         style.lineHeight = px;
         style.lineHeightIsLength = true;
@@ -2447,7 +2573,12 @@ export function applyDeclaration(
       return;
     }
     case 'align-content': {
-      const v = alignKeyword(value);
+      // `normal` is `stretch` in a flex and a grid container, the only
+      // boxes it moves anything in (CSS Box Alignment 3, 5.1)
+      const v =
+        value.trim().toLowerCase() === 'normal'
+          ? 'stretch'
+          : alignKeyword(value);
       if (v) style.alignContent = v as ComputedStyle['alignContent'];
       return;
     }
@@ -2682,6 +2813,30 @@ export function applyDeclaration(
       }
       return;
     }
+    case 'place-content': {
+      // `<'align-content'> <'justify-content'>?` (CSS Box Alignment 3,
+      // 5.3), either half one keyword or two — `first baseline`, `safe
+      // center` — and the second the first again where it is left out,
+      // but for a baseline, which is no `justify-content`: `start`
+      const words = value.trim().toLowerCase().split(/\s+/);
+      const span = (at: number) =>
+        /^(?:safe|unsafe|first|last)$/.test(words[at] ?? '') ? 2 : 1;
+      const cut = span(0);
+      const align = words.slice(0, cut).join(' ');
+      const rest = words.slice(cut);
+      if (rest.length && rest.length !== span(cut)) return;
+      const justify = rest.length
+        ? rest.join(' ')
+        : /baseline$/.test(align)
+          ? 'start'
+          : align;
+      // a shorthand is one declaration: either half unread drops both
+      if (align !== 'normal' && !alignKeyword(align)) return;
+      if (!justifyKeyword(justify)) return;
+      applyDeclaration(style, parent, 'align-content', align, ctx);
+      applyDeclaration(style, parent, 'justify-content', justify, ctx);
+      return;
+    }
     case 'place-items':
     case 'place-self': {
       const parts = splitValue(value);
@@ -2877,12 +3032,6 @@ export function settleOverflow(style: ComputedStyle): void {
   else style.overflowX = x === 'visible' ? 'auto' : 'hidden';
 }
 
-/**
- * Whether a box is a scroll container: its `overflow` is neither `visible`
- * nor `clip`. `clip` cuts what overflows as `hidden` does, but makes no
- * formatting context and keeps a flex or grid item's automatic minimum
- * (CSS Overflow 3, 3.1) — so only this asks it apart from `hidden`.
- */
 /** A `<visual-box>` (CSS Box 4): the edge of a box a property names. */
 export type VisualBox = 'border-box' | 'padding-box' | 'content-box';
 
@@ -2890,6 +3039,20 @@ function isVisualBox(v: string): v is VisualBox {
   return v === 'border-box' || v === 'padding-box' || v === 'content-box';
 }
 
+/** Where a background layer is painted: inside one of the box's edges, or
+ *  `border-area`, in what its border paints (CSS Backgrounds 4, 2.1). */
+export type BackgroundClip = VisualBox | 'border-area';
+
+function isBackgroundClip(v: string): v is BackgroundClip {
+  return v === 'border-area' || isVisualBox(v);
+}
+
+/**
+ * Whether a box is a scroll container: its `overflow` is neither `visible`
+ * nor `clip`. `clip` cuts what overflows as `hidden` does, but makes no
+ * formatting context and keeps a flex or grid item's automatic minimum
+ * (CSS Overflow 3, 3.1) — so only this asks it apart from `hidden`.
+ */
 export function scrolls(style: ComputedStyle): boolean {
   const x = style.overflowX;
   const y = style.overflowY;
@@ -3121,6 +3284,157 @@ export const NO_BORDER_IMAGE: BorderImage = {
   repeat: ['stretch', 'stretch'],
 };
 
+/**
+ * An element's mask layers (CSS Masking 1, 7), top first, a list a
+ * property as a background's are: each layer takes the images' place in
+ * the others, and they repeat where they are fewer. A layer's image is a
+ * url, a gradient, or null for `none` — which is the one layer of an
+ * element that is not masked.
+ */
+export interface MaskLayers {
+  images: readonly BackgroundImage[];
+  repeats: readonly BackgroundRepeat[];
+  sizes: readonly ComputedStyle['backgroundSize'][];
+  positions: readonly (readonly [Len, Len])[];
+  /** The box a layer is placed in, and the one it is painted in: the
+   *  border box unless a layer says (7.5, 7.6). */
+  origins: readonly VisualBox[];
+  clips: readonly VisualBox[];
+}
+
+/** Whether a style masks its element: a layer of its mask has an image. */
+export function masked(style: ComputedStyle): boolean {
+  const mask = style.mask;
+  if (mask === NO_MASK) return false;
+  for (const image of mask.images) if (image !== null) return true;
+  return false;
+}
+
+/**
+ * One layer's `mask-image`: a url, a gradient — or none, for an image
+ * function this does not draw, or a `url(#id)`, which names an SVG
+ * `<mask>` element in the document rather than an image to fetch (7.2):
+ * drawn with no mask rather than as the transparent layer a mask that
+ * cannot be had is, since this draws no `<mask>`. Undefined where it is no
+ * image at all.
+ */
+function maskImageOf(
+  text: string,
+  ctx: UnitContext,
+): BackgroundImage | undefined {
+  const image = backgroundImageOf(text, ctx);
+  return typeof image === 'string' && image[0] === '#' ? null : image;
+}
+
+/** A `<geometry-box>` as an HTML element has it (CSS Masking 1, 7.5): the
+ *  SVG boxes are its content box and its border box. */
+function maskBox(text: string): VisualBox | null {
+  const v = text.trim().toLowerCase();
+  if (isVisualBox(v)) return v;
+  if (v === 'fill-box') return 'content-box';
+  if (v === 'stroke-box' || v === 'view-box') return 'border-box';
+  return null;
+}
+
+/**
+ * The `mask` shorthand (CSS Masking 1, 7.10): a layer a comma group, each
+ * an image, a position with a size after a `/`, a repeat, one box for the
+ * origin and the clip or two, `no-clip`, a compositing operator and a
+ * mode, each at most once, in any order. The operator and the mode are
+ * read and not honoured: layers are added, and an image masks by its
+ * alpha, which is what `match-source` makes of one. Null where a layer is
+ * not one, which drops the declaration.
+ */
+function readMask(value: string, ctx: UnitContext): MaskLayers | null {
+  const out = {
+    images: [] as BackgroundImage[],
+    repeats: [] as BackgroundRepeat[],
+    sizes: [] as ComputedStyle['backgroundSize'][],
+    positions: [] as [Len, Len][],
+    origins: [] as VisualBox[],
+    clips: [] as VisualBox[],
+  };
+  for (const text of splitCommas(value)) {
+    const parts = splitValue(text).flatMap(splitSlash);
+    let image: BackgroundImage = null;
+    let repeat = NO_MASK.repeats[0];
+    let size: ComputedStyle['backgroundSize'] = 'auto';
+    let position: [Len, Len] = [0, 0];
+    const boxes: VisualBox[] = [];
+    let seen = 0;
+    const once = (bit: number): boolean => {
+      if (seen & bit) return false;
+      seen |= bit;
+      return true;
+    };
+    for (let i = 0; i < parts.length;) {
+      const part = parts[i];
+      const v = part.toLowerCase();
+      if (v === 'none' || v.startsWith('url(') || IMAGE_FUNCTION.test(v)) {
+        if (!once(1)) return null;
+        const read = maskImageOf(part, ctx);
+        if (read === undefined) return null;
+        image = read;
+        i += 1;
+      } else if (v === 'repeat-x' || v === 'repeat-y' || REPEATS.has(v)) {
+        if (!once(2)) return null;
+        const pair = REPEATS.has(v) && REPEATS.has(parts[i + 1]?.toLowerCase());
+        const read = readRepeat(pair ? [v, parts[i + 1].toLowerCase()] : [v]);
+        if (!read) return null;
+        repeat = read;
+        i += pair ? 2 : 1;
+      } else if (maskBox(v) || v === 'no-clip') {
+        if (boxes.length === 2 || (v === 'no-clip' && !once(4))) return null;
+        boxes.push(maskBox(v) ?? 'border-box');
+        i += 1;
+      } else if (/^(?:add|subtract|intersect|exclude)$/.test(v)) {
+        if (!once(8)) return null;
+        i += 1;
+      } else if (/^(?:alpha|luminance|match-source)$/.test(v)) {
+        if (!once(16)) return null;
+        i += 1;
+      } else if (isPositionPart(v, ctx)) {
+        if (!once(32)) return null;
+        let end = i;
+        while (
+          end < parts.length &&
+          isPositionPart(parts[end].toLowerCase(), ctx)
+        ) {
+          end += 1;
+        }
+        const read = positionPair(parts.slice(i, end), ctx);
+        if (!read) return null;
+        position = read;
+        i = end;
+        if (parts[i] !== '/') continue;
+        const first = parts[i + 1]?.toLowerCase();
+        if (first === 'cover' || first === 'contain') {
+          size = first;
+          i += 2;
+        } else if (first !== undefined && isSizePart(first, ctx)) {
+          const two =
+            i + 2 < parts.length && isSizePart(parts[i + 2].toLowerCase(), ctx);
+          size =
+            backgroundSizeOf(parts.slice(i + 1, i + (two ? 3 : 2)), ctx) ??
+            'auto';
+          i += two ? 3 : 2;
+        } else {
+          return null;
+        }
+      } else {
+        return null;
+      }
+    }
+    out.images.push(image);
+    out.repeats.push(repeat);
+    out.sizes.push(size);
+    out.positions.push(position);
+    out.origins.push(boxes[0] ?? 'border-box');
+    out.clips.push(boxes[1] ?? boxes[0] ?? 'border-box');
+  }
+  return out.images.length ? out : null;
+}
+
 /** One to four values, one a side as `margin` takes them; null where one
  *  is not a value. */
 function sidesOf<T>(
@@ -3315,6 +3629,15 @@ function repeatPair(x: RepeatMode, y: RepeatMode): BackgroundRepeat {
 
 const REPEAT = repeatPair('repeat', 'repeat');
 
+export const NO_MASK: MaskLayers = {
+  images: [null],
+  repeats: [REPEAT],
+  sizes: ['auto'],
+  positions: [[0, 0]],
+  origins: ['border-box'],
+  clips: ['border-box'],
+};
+
 function applyBorderShorthand(
   style: ComputedStyle,
   name: string,
@@ -3485,7 +3808,7 @@ interface BackgroundLayer {
   size: ComputedStyle['backgroundSize'];
   attachment: ComputedStyle['backgroundAttachment'];
   origin: VisualBox;
-  clip: VisualBox;
+  clip: BackgroundClip;
   position: [Len, Len] | null;
 }
 
@@ -3545,9 +3868,14 @@ function readBackgroundLayer(
       layer.attachment = v;
       i += 1;
     } else if (isVisualBox(v)) {
-      // one box is both the origin and the clip, and a second the clip
-      if ((boxes += 1) > 2) return null;
+      // one box is both the origin and the clip, and a second the clip —
+      // which `border-area` is instead of, and the one box the origin
+      if ((boxes += 1) > (seen & 32 ? 1 : 2)) return null;
       if (boxes === 1) layer.origin = v;
+      if (!(seen & 32)) layer.clip = v;
+      i += 1;
+    } else if (v === 'border-area') {
+      if (boxes > 1 || !once(32)) return null;
       layer.clip = v;
       i += 1;
     } else if (isPositionPart(v, ctx)) {
@@ -3998,12 +4326,10 @@ function applyFontShorthand(
   style.lineHeight = 'normal';
   style.lineHeightIsLength = false;
   applyDeclaration(style, parent, 'font-size', sizeText, ctx);
-  if (lineText) {
-    applyDeclaration(style, parent, 'line-height', lineText, {
-      ...ctx,
-      em: style.fontSize,
-    });
-  }
+  // against the element's own size, which `ctx.em` is once the cascade has
+  // settled it: a later rule's `font-size` outranks this one's, and
+  // `font: 12px/150%` under a `font-size: 16px` is on 24px lines
+  if (lineText) applyDeclaration(style, parent, 'line-height', lineText, ctx);
   applyDeclaration(style, parent, 'font-family', family, ctx);
 }
 
@@ -4723,6 +5049,7 @@ function camel(name: string): string {
 
 const INHERITED_NAMES = new Set<string>([
   'color',
+  'color-scheme',
   '-webkit-text-fill-color',
   'font',
   'font-family',
@@ -4773,6 +5100,11 @@ export function initialOne(
   initial: ComputedStyle,
   name: string,
 ): void {
+  const list = MASK_LISTS[name];
+  if (list) {
+    style.mask = { ...style.mask, [list]: initial.mask[list] };
+    return;
+  }
   const keys = INHERIT_TARGETS[name];
   if (!keys) return;
   for (const key of keys) {
@@ -4785,6 +5117,11 @@ function inheritOne(
   parent: ComputedStyle,
   name: string,
 ): void {
+  const list = MASK_LISTS[name];
+  if (list) {
+    style.mask = { ...style.mask, [list]: parent.mask[list] };
+    return;
+  }
   const keys = INHERIT_TARGETS[name];
   if (!keys) return;
   // A border colour left to `currentColor` inherits as the keyword and
@@ -4800,8 +5137,30 @@ const sides = (
   make: (side: (typeof SIDES)[number]) => keyof ComputedStyle,
 ): (keyof ComputedStyle)[] => SIDES.map(make);
 
+/**
+ * The list of the mask's layers each longhand is, which `initial`,
+ * `inherit` and a `var()` that fails reset alone: one field holds them all,
+ * and reset whole, a `mask-size: calc(var(--x) - 4px)` put back the
+ * `mask-repeat: no-repeat` before it, and Wikipedia's chevron repeated.
+ */
+const MASK_LISTS: Record<string, keyof MaskLayers> = {
+  'mask-image': 'images',
+  '-webkit-mask-image': 'images',
+  'mask-repeat': 'repeats',
+  '-webkit-mask-repeat': 'repeats',
+  'mask-size': 'sizes',
+  '-webkit-mask-size': 'sizes',
+  'mask-position': 'positions',
+  '-webkit-mask-position': 'positions',
+  'mask-origin': 'origins',
+  '-webkit-mask-origin': 'origins',
+  'mask-clip': 'clips',
+  '-webkit-mask-clip': 'clips',
+};
+
 const INHERIT_TARGETS: Record<string, readonly (keyof ComputedStyle)[]> = {
   color: ['color'],
+  'color-scheme': ['colorScheme'],
   '-webkit-text-fill-color': ['textFillColor'],
   'background-clip': [
     'backgroundClipText',
@@ -4815,6 +5174,8 @@ const INHERIT_TARGETS: Record<string, readonly (keyof ComputedStyle)[]> = {
   ],
   'background-origin': ['backgroundOrigin', 'backgroundOrigins'],
   'border-image': ['borderImage'],
+  mask: ['mask'],
+  '-webkit-mask': ['mask'],
   'border-image-source': ['borderImage'],
   'border-image-slice': ['borderImage'],
   'border-image-width': ['borderImage'],
@@ -4895,6 +5256,8 @@ const INHERIT_TARGETS: Record<string, readonly (keyof ComputedStyle)[]> = {
   'min-height': ['minHeight', 'minHeightKeyword'],
   'max-height': ['maxHeight', 'maxHeightKeyword'],
   'box-sizing': ['boxSizing'],
+  'box-decoration-break': ['boxDecorationBreak'],
+  '-webkit-box-decoration-break': ['boxDecorationBreak'],
   margin: sides((s) => `margin${s}`),
   'margin-top': ['marginTop'],
   'margin-right': ['marginRight'],

package/src/html/css/ua.ts

@@ -44,8 +44,11 @@ export function uaStylesheet(look: RootLook): Stylesheet {
 }
 
 /**
- * Margins are in `em` throughout, so a document that sets `font-size` on
- * `body` scales its whitespace with its text the way a browser's does.
+ * Margins above and below are in `em`, so a document that sets `font-size`
+ * on `body` scales its whitespace with its text the way a browser's does.
+ * The indents of lists, definitions and figures are the HTML standard's
+ * 40px (15.3.3, 15.3.8), whatever the size: a list in a 10px sidebar is
+ * indented as far as one in the body.
  */
 function uaText(look: RootLook): string {
   const mono = look.monoFamily;
@@ -81,7 +84,7 @@ h4 { font-size: 1em;    font-weight: bold; margin: 1.33em 0; }
 h5 { font-size: 0.83em; font-weight: bold; margin: 1.67em 0; }
 h6 { font-size: 0.67em; font-weight: bold; margin: 2.33em 0; }
 
-ul, ol { margin: 1em 0; padding-left: 2.5em; }
+ul, ol { margin: 1em 0; padding-left: 40px; }
 ul { list-style-type: disc; }
 ol { list-style-type: decimal; }
 ol, ul, menu, dir { counter-reset: list-item; }
@@ -92,7 +95,7 @@ ul ul ul, ol ol ul, ul ol ul, ol ul ul { list-style-type: square; }
 ul ul, ul ol, ol ul, ol ol { margin: 0; }
 
 dl { margin: 1em 0; }
-dd { margin-left: 2.5em; }
+dd { margin-left: 40px; }
 dt { font-weight: bold; }
 
 blockquote {
@@ -150,7 +153,7 @@ img { display: inline-block; }
 iframe { border: 2px inset; }
 /* a poster is drawn within the video's box at its own ratio (HTML 15.4.1) */
 video { object-fit: contain; }
-figure { margin: 1em 2.5em; }
+figure { margin: 1em 40px; }
 
 table { display: table; border-collapse: separate; border-spacing: 2px; box-sizing: border-box; }
 caption { display: table-caption; text-align: center; }
@@ -185,6 +188,20 @@ input, button, select, textarea, meter, progress {
 }
 /* Chrome's own UA margins for the checkables, near enough: they are the
    controls that sit hard against their label text otherwise. */
+/* HTML's rendering section (15.3.10): a control's text keeps none of the
+   spacing, the line height, the case or the indent of the text around it.
+   A button in a paragraph of 'line-height: 1.5' is its own font's line
+   tall, as it is in a browser. */
+input, button, textarea {
+  letter-spacing: initial;
+  word-spacing: initial;
+  line-height: initial;
+}
+input, select, button, textarea {
+  text-transform: initial;
+  text-indent: initial;
+  text-shadow: initial;
+}
 input[type=checkbox] { margin: 3px 4px 3px 4px; }
 input[type=radio] { margin: 3px 4px 3px 5px; }
 input[type=hidden] { display: none; }