@react-x11/components 0.10.0 → 0.11.0

package/src/html/css/cascade.ts

@@ -514,6 +514,46 @@ export interface PointerState {
 
 const NO_POINTER: PointerState = { hovered: new Set(), active: new Set() };
 
+/**
+ * The face a style's font-relative units are measured in: its family list,
+ * size, weight and slant, the four that pick one. A family's faces can be
+ * different fonts altogether — a page's `@font-face` rules may set its
+ * bold in another file — so an `ex` in bold text is the bold face's.
+ */
+export interface MetricFace {
+  family: string;
+  size: number;
+  weight: number;
+  style: ComputedStyle['fontStyle'];
+}
+
+/** What a face measures, where the fonts can say. */
+export type FaceMetric = (face: MetricFace) => number | null;
+
+/** What a style's face is read from: a computed style, or the part of one
+ *  a declaration's font-relative units are measured against. */
+type FaceSource = Pick<
+  ComputedStyle,
+  'fontFamily' | 'fontSize' | 'fontWeight' | 'fontStyle'
+>;
+
+/** …and its line height, for `lh`. */
+type LineSource = FaceSource &
+  Pick<ComputedStyle, 'lineHeight' | 'lineHeightIsLength'>;
+
+function faceOf(style: FaceSource): MetricFace {
+  return {
+    family: style.fontFamily,
+    size: style.fontSize,
+    weight: style.fontWeight,
+    style: style.fontStyle,
+  };
+}
+
+function faceKey(style: FaceSource): string {
+  return `${style.fontFamily}\u0001${style.fontSize}\u0001${style.fontWeight}\u0001${style.fontStyle}`;
+}
+
 /**
  * A cascade over a fixed set of stylesheets. Rebuilt when the sheets change;
  * re-run when the DOM, the viewport band or the pointer state does.
@@ -564,17 +604,15 @@ export class Cascade {
   /** The counter styles the sheets define, over the predefined ones. */
   readonly counterStyles: CounterStyles;
 
-  /** A font's x-height at a size, for `ex`, where the fonts can say. */
-  private _xHeightOf: ((family: string, size: number) => number | null) | null;
+  /** A face's x-height, for `ex`, where the fonts can say. */
+  private _xHeightOf: FaceMetric | null;
   private _xHeights = new Map<string, number>();
-  /** The advance of a font's "0" at a size, for `ch`, likewise. */
-  private _zeroWidthOf:
-    ((family: string, size: number) => number | null) | null;
+  /** The advance of a face's "0", for `ch`, likewise. */
+  private _zeroWidthOf: FaceMetric | null;
   private _zeroWidths = new Map<string, number>();
-  /** A font's own line height at a size, for `lh` where `line-height` is
-   *  `normal`, likewise. */
-  private _normalLineOf:
-    ((family: string, size: number) => number | null) | null;
+  /** A face's own line height, for `lh` where `line-height` is `normal`,
+   *  likewise. */
+  private _normalLineOf: FaceMetric | null;
   private _normalLines = new Map<string, number>();
   /** Whether any declaration sets a custom property or reads one: without
    *  one, no element's style asks about them. */
@@ -599,9 +637,9 @@ export class Cascade {
     viewportWidth: number,
     viewportHeight: number,
     scale = 1,
-    xHeight: ((family: string, size: number) => number | null) | null = null,
-    zeroWidth: ((family: string, size: number) => number | null) | null = null,
-    normalLine: ((family: string, size: number) => number | null) | null = null,
+    xHeight: FaceMetric | null = null,
+    zeroWidth: FaceMetric | null = null,
+    normalLine: FaceMetric | null = null,
     families: FontFamilies | null = null,
   ) {
     this._xHeightOf = xHeight;
@@ -1082,13 +1120,13 @@ export class Cascade {
     return style;
   }
 
-  /** The x-height of a style's font: the font's own, asked once per face
-   *  and size, or half an em. */
-  private _exOf(style: ComputedStyle): number {
-    const key = `${style.fontFamily}\u0001${style.fontSize}`;
+  /** The x-height of a style's font: the font's own, asked once per face,
+   *  or half an em. */
+  private _exOf(style: FaceSource): number {
+    const key = faceKey(style);
     let ex = this._xHeights.get(key);
     if (ex === undefined) {
-      ex = this._xHeightOf?.(style.fontFamily, style.fontSize) ?? NaN;
+      ex = this._xHeightOf?.(faceOf(style)) ?? NaN;
       if (!(ex > 0)) ex = style.fontSize * 0.5;
       this._xHeights.set(key, ex);
     }
@@ -1096,12 +1134,12 @@ export class Cascade {
   }
 
   /** The advance of a style's font's "0": the font's own, asked once per
-   *  face and size, or half an em. */
-  private _chOf(style: ComputedStyle): number {
-    const key = `${style.fontFamily}\u0001${style.fontSize}`;
+   *  face, or half an em. */
+  private _chOf(style: FaceSource): number {
+    const key = faceKey(style);
     let ch = this._zeroWidths.get(key);
     if (ch === undefined) {
-      ch = this._zeroWidthOf?.(style.fontFamily, style.fontSize) ?? NaN;
+      ch = this._zeroWidthOf?.(faceOf(style)) ?? NaN;
       if (!(ch > 0)) ch = style.fontSize * 0.5;
       this._zeroWidths.set(key, ch);
     }
@@ -1109,16 +1147,16 @@ export class Cascade {
   }
 
   /** A style's computed line height as a length, for `lh`: `normal` as
-   *  its font's own, asked once per face and size, or 1.2em. */
-  private _lineHeightOf(style: ComputedStyle): number {
+   *  its font's own, asked once per face, or 1.2em. */
+  private _lineHeightOf(style: LineSource): number {
     const set = style.lineHeight;
     if (set !== 'normal') {
       return style.lineHeightIsLength ? set : set * style.fontSize;
     }
-    const key = `${style.fontFamily}\u0001${style.fontSize}`;
+    const key = faceKey(style);
     let line = this._normalLines.get(key);
     if (line === undefined) {
-      line = this._normalLineOf?.(style.fontFamily, style.fontSize) ?? NaN;
+      line = this._normalLineOf?.(faceOf(style)) ?? NaN;
       if (!(line > 0)) line = style.fontSize * 1.2;
       this._normalLines.set(key, line);
     }
@@ -1154,12 +1192,20 @@ export class Cascade {
       lh: () => this._lineHeightOf(parentStyle),
       rlh: () => this._lineHeightOf(this.initial),
     };
-    // the family goes with the size, so an `ex` after it is its font's
+    // The family, the weight and the slant go with the size: together they
+    // pick the face an `ex`, a `ch` or an `lh` in any declaration is
+    // measured in, however the declarations are ordered. A `width: 10ex`
+    // in a sheet under an inline `font-weight: 900` was measured in the
+    // family's regular face.
     let sized = false;
     let keyword = false;
     for (const c of candidates) {
       for (const d of pick(c)) {
-        if (d.prop === 'font-family') {
+        if (
+          d.prop === 'font-family' ||
+          d.prop === 'font-weight' ||
+          d.prop === 'font-style'
+        ) {
           this._apply(style, parentStyle, d, ctxParent);
         } else if (d.prop === 'font-size' || d.prop === 'font') {
           // NaN until a size is set, so one the declaration did not take
@@ -1188,21 +1234,43 @@ export class Cascade {
     ) {
       style.fontSize *= mono ? FIXED_SIZE : 1 / FIXED_SIZE;
     }
+    // The face as the first pass settled it. The second applies every
+    // declaration again in cascade order, the font's among them, so the
+    // style passes through the fonts of every rule on the way: read from
+    // it, the `10ex` in `div { font-family: foo; width: 10ex }` was `foo`'s
+    // under an inline `font-family: Ahem` that came after it.
+    const face: FaceSource = {
+      fontFamily: style.fontFamily,
+      fontSize: style.fontSize,
+      fontWeight: style.fontWeight,
+      fontStyle: style.fontStyle,
+    };
+    let line: LineSource | null = null;
     const ctx: UnitContext = {
       ...ctxParent,
       em: style.fontSize,
-      ex: () => this._exOf(style),
-      ch: () => this._chOf(style),
-      lh: () => this._lineHeightOf(style),
+      ex: () => this._exOf(face),
+      ch: () => this._chOf(face),
+      lh: () => this._lineHeightOf(line ?? style),
     };
     // the line height, which an `lh` in any other declaration reads, ahead
-    // of them: set again with the rest, in its place among them
+    // of them — a `font` sets one too — and read as it is then, for the
+    // same reason as the face: set again with the rest, in its place among
+    // them. A `font` sets the size as well, which the first pass settled.
     if (this._lh) {
       for (const c of candidates) {
         for (const d of pick(c)) {
-          if (d.prop === 'line-height') this._apply(style, parentStyle, d, ctx);
+          if (d.prop === 'line-height' || d.prop === 'font') {
+            this._apply(style, parentStyle, d, ctx);
+          }
         }
       }
+      style.fontSize = face.fontSize;
+      line = {
+        ...face,
+        lineHeight: style.lineHeight,
+        lineHeightIsLength: style.lineHeightIsLength,
+      };
     }
     const settled = style.fontSize;
     for (const c of candidates) {
@@ -1283,22 +1351,32 @@ export class Cascade {
    * that implied `<html>` instead, so an `html { font-size }` still reaches
    * the body. Taken as the initial style, the rule matched nothing and the
    * whole page came out at the theme's size.
+   *
+   * `html` is the implied `<html>`'s own style where the root box stands in
+   * for the body inside it, and null otherwise: what an `html { … }` or a
+   * `:root { … }` rule gives it that is not inherited has no box to be
+   * drawn on, and its background is the canvas's (`paintDocument`).
    */
-  rootStyle(hasBody: boolean, hasHtml = true): ComputedStyle {
+  rootStyle(
+    hasBody: boolean,
+    hasHtml = true,
+  ): { style: ComputedStyle; html: ComputedStyle | null } {
     const style = copyStyle(this.initial);
     style.display = 'block';
-    if (hasBody && hasHtml) return style;
+    if (hasBody && hasHtml) return { style, html: null };
     const synthetic = new DomElement('body', {}, []);
     let parent = style;
+    let html: ComputedStyle | null = null;
     if (!hasHtml) {
-      const html = new DomElement('html', {}, hasBody ? [] : [synthetic]);
-      synthetic.parent = html;
-      parent = this.styleFor(html, style, false);
-      if (hasBody) return asRoot(parent);
+      const element = new DomElement('html', {}, hasBody ? [] : [synthetic]);
+      synthetic.parent = element;
+      parent = this.styleFor(element, style, false);
+      if (hasBody) return { style: asRoot(parent), html: null };
+      html = parent;
     }
     // Only the box the body would have drawn is taken, not its layout role:
     // the root is still the initial containing block.
-    return asRoot(this.styleFor(synthetic, parent, false));
+    return { style: asRoot(this.styleFor(synthetic, parent, false)), html };
   }
 
   /** The rules of `index` that match `el`, pushed onto `out` as candidates,

package/src/html/css/style.ts

@@ -497,9 +497,9 @@ 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
@@ -1799,14 +1799,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;
@@ -2877,12 +2892,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 +2899,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;
@@ -3485,7 +3508,7 @@ interface BackgroundLayer {
   size: ComputedStyle['backgroundSize'];
   attachment: ComputedStyle['backgroundAttachment'];
   origin: VisualBox;
-  clip: VisualBox;
+  clip: BackgroundClip;
   position: [Len, Len] | null;
 }
 
@@ -3545,9 +3568,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)) {

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; }

package/src/html/layout/block.ts

@@ -42,6 +42,7 @@ import {
   GRID_TRACKS,
   FIRST_LINE,
   INLINE_OFFSETS,
+  MOVED_OFF_LINES,
   LINE_BOX_RAISES,
   SHIFTED_LINES,
   TEXT_SHIFTS,
@@ -51,6 +52,7 @@ import type {
   BoxTree,
   FirstLineStyler,
   Intrinsic,
+  InlineDecoration,
   LineBox,
   MarginStrut,
   Marker,
@@ -180,7 +182,9 @@ export function layoutDocument(
   // there — or `<p>hi</p>` would stand 8px lower than the same paragraph in
   // `<body>`.
   resolveEdges(root, viewportWidth);
+  const body = fragmentBodyHeight(tree, viewportHeight);
   const leading = root.marginTop;
+  const trailing = root.marginBottom;
   root.padRight += root.marginRight;
   root.padBottom += root.marginBottom;
   root.padLeft += root.marginLeft;
@@ -188,6 +192,7 @@ export function layoutDocument(
   root.marginRight = 0;
   root.marginBottom = 0;
   root.marginLeft = 0;
+  if (body) handPercentBase(root, body.inner);
 
   const contentWidth = Math.max(0, viewportWidth - root.horizontalExtra);
   const floats = new FloatContext(root.contentX, root.contentX + contentWidth);
@@ -195,7 +200,7 @@ export function layoutDocument(
   // height on the root element resolves against (CSS 2.1 10.1, 10.5); a
   // fragment has no root element, and the box standing in for its body has
   // the body's `auto` height to give
-  let readsViewportHeight = false;
+  let readsViewportHeight = body?.viewport === true;
   for (const child of root.children) {
     if (child.el?.name !== 'html') continue;
     child.percentHeightBase = viewportHeight;
@@ -218,7 +223,9 @@ export function layoutDocument(
   );
   const floatBottom =
     floats.bottom === -Infinity ? 0 : floats.bottom - root.contentY;
-  root.height = Math.max(flow.height, floatBottom) + root.verticalExtra;
+  root.height = body
+    ? leading + body.outer + trailing
+    : Math.max(flow.height, floatBottom) + root.verticalExtra;
 
   // Positioned boxes last, and in the order they were found, so a later one
   // can be positioned against an earlier one's resolved rectangle.
@@ -251,6 +258,42 @@ export function layoutDocument(
   };
 }
 
+/**
+ * How tall the body a fragment's root box stands in for says it is, where
+ * that is definite (CSS 2.1 10.5): a length, `100vh` among them, or a
+ * percentage of the `<html>` implied around it where that has a height of
+ * its own — a length, or a percentage of the viewport, as `html, body {
+ * height: 100% }` fills a window. Its border box, and its content box,
+ * which what it holds takes its percentages of; `viewport` where the
+ * answer read the viewport's height. Null where the document has an
+ * `<html>` or a `<body>`, and where the body's height is `auto`, and the
+ * box is as tall as what is in it. Measured before its margins are folded
+ * into its padding.
+ */
+function fragmentBodyHeight(
+  tree: BoxTree,
+  viewportHeight: number,
+): { outer: number; inner: number; viewport: boolean } | null {
+  const html = tree.impliedHtml;
+  if (!html) return null;
+  const root = tree.root;
+  const style = root.style;
+  const base = resolveOrNull(html.height, viewportHeight);
+  const set = resolveOrNull(style.height, base ?? NaN);
+  if (set === null) return null;
+  root.percentHeightBase = base ?? NaN;
+  const extra = root.verticalExtra;
+  const outer = clampHeight(
+    root,
+    style.boxSizing === 'border-box' ? Math.max(set, extra) : set + extra,
+  );
+  return {
+    outer,
+    inner: Math.max(0, outer - extra),
+    viewport: isPct(style.height) && isPct(html.height),
+  };
+}
+
 /** No margin at all, shared: most joins leave a strut as it was. */
 const NO_MARGIN: MarginStrut = Object.freeze({ pos: 0, neg: 0 });
 
@@ -725,6 +768,8 @@ function layoutChildren(
   // this box's first formatted line is its first child's in flow (CSS 2.1
   // 5.12.1), which its `::first-line` is handed to
   let firstLine = ctx.firstLine ? firstLineOf(box) : null;
+  // and the room a list item's marker takes on it (`MARKER_ROOM`)
+  let marked = MARKER_ROOM.get(box) ?? null;
   const clamp = ctx.clamp ?? null;
 
   for (const child of box.children) {
@@ -743,6 +788,10 @@ function layoutChildren(
       if (!FIRST_LINE.has(child)) HANDED.set(child, firstLine);
       firstLine = null;
     }
+    if (marked && !child.outOfFlow && !child.isFloat) {
+      MARKER_ROOM.set(child, marked);
+      marked = null;
+    }
     if (child.outOfFlow) {
       placeStatic(
         child,
@@ -870,12 +919,15 @@ function layoutChildren(
   // escapes, and the caller merges it into the box's own bottom margin so
   // the next sibling still sees it. Dropping it here was the bug that made
   // `<div><p>…</p></div><p>…</p>` set the two paragraphs solid.
+  // A percentage of a height that depends on content computes to `auto`
+  // (CSS 2.1 10.5), and lets it through as `auto` does: a `height: 100%`
+  // wrapper in an `auto` body kept its last child's margin inside it
   if (
     !first &&
     !cleared &&
     !box.borderBottom &&
     !box.padBottom &&
-    box.style.height === AUTO &&
+    specifiedHeight(box) === null &&
     !establishesBFC(box)
   ) {
     const height = y - contentTop;
@@ -1063,6 +1115,7 @@ function layoutInlineContent(
     floats,
     originX: contentLeft,
     clipText: ctx.clipText,
+    firstStrut: MARKER_ROOM.get(box),
     floatBoxes: floated
       ? {
           size: (child: Box) => sizeFloat(child, ctx, contentWidth),
@@ -1260,7 +1313,8 @@ function makesNothing(box: Box): boolean {
 }
 
 /** Whether a `::first-line` style sets its line's text otherwise than its
- *  block's: in another face, size or line height, or spaced apart. */
+ *  block's: in another face, size or line height, spaced apart, or in
+ *  capitals. */
 function setsFonts(line: ComputedStyle, block: ComputedStyle): boolean {
   return (
     line.fontFamily !== block.fontFamily ||
@@ -1275,7 +1329,8 @@ function setsFonts(line: ComputedStyle, block: ComputedStyle): boolean {
     line.fontVariantLigatures !== block.fontVariantLigatures ||
     line.fontVariantPosition !== block.fontVariantPosition ||
     line.fontKerning !== block.fontKerning ||
-    line.fontFeatureSettings !== block.fontFeatureSettings
+    line.fontFeatureSettings !== block.fontFeatureSettings ||
+    line.textTransform !== block.textTransform
   );
 }
 
@@ -1685,13 +1740,26 @@ function layoutBox(
     : outerFloats;
   // the line a pass before gave a marker, which this one may not
   if (box.marker) box.lines = null;
+  if (box.marker && ctx.fonts) {
+    const room = markerRoom(box, box.marker, ctx.fonts);
+    if (room) MARKER_ROOM.set(box, room);
+    else MARKER_ROOM.delete(box);
+  }
   const flow = layoutChildren(box, ctx, floats, box.contentY, contentWidth);
   // A list item with a marker and no line holds one, the marker's, a line
   // of its own face tall: an empty `<li>` is a line tall in a browser, and
   // an inline-block around one sits on its marker's baseline.
   let height = flow.height;
   if (box.marker && ctx.fonts && !firstLineIn(box)) {
-    const strut = strutOf(ctx.fonts, box.style);
+    const own = strutOf(ctx.fonts, box.style);
+    // as tall as the marker on it, as a first line with text is
+    const room = MARKER_ROOM.get(box);
+    const strut = room
+      ? {
+          ascent: Math.max(own.ascent, room.ascent),
+          descent: Math.max(own.descent, room.descent),
+        }
+      : own;
     const line = strut.ascent + strut.descent;
     box.lines = [
       {
@@ -1735,6 +1803,33 @@ function layoutBox(
   if (box.marker) layoutMarker(box, box.marker, ctx);
 }
 
+/**
+ * The room a list item's marker takes about its first line's baseline,
+ * handed to the box that line is in: an image's height above it, its
+ * bottom on the baseline as an inline image's is, and a marker in a face
+ * of its own — a `::marker` rule's — its face at its line height. CSS 2.1
+ * (12.5.1) leaves where an outside marker goes to the user agent; Blink
+ * and Gecko both set it on the item's first line and make the line as tall
+ * as it, and design 032's bullets, images taller than its 10px text, set
+ * every item's first line lower than ours did.
+ */
+const MARKER_ROOM = new WeakMap<Box, InlineDecoration>();
+
+function markerRoom(
+  box: Box,
+  marker: Marker,
+  fonts: FontsLike,
+): InlineDecoration | null {
+  if (marker.image) {
+    return marker.image.height > 0
+      ? { ascent: marker.image.height, descent: 0 }
+      : null;
+  }
+  return marker.style && marker.style !== box.style
+    ? strutOf(fonts, marker.style)
+    : null;
+}
+
 /** The first line box anywhere under a box, in layout order. */
 function firstLineIn(box: Box): LineBox | null {
   if (box.lines?.length) return box.lines[0];
@@ -4015,12 +4110,19 @@ export function applyRelativeOffsets(box: Box): void {
   if (transformed(style) && box.kind !== 'inline') {
     // a transform moves the box it is on, and an inline box is none
     const [dx, dy] = translationOf(box);
-    if (dx || dy) translate(box, dx, dy);
+    if (dx || dy) {
+      translate(box, dx, dy);
+      movedOffLine(box);
+    }
   }
   if (style.position !== 'relative' && style.position !== 'sticky') return;
   const [dx, dy] = relativeOffset(box);
+  if (!(dx || dy)) return;
   translate(box, dx, dy);
-  if (box.kind !== 'inline' || !(dx || dy)) return;
+  if (box.kind !== 'inline') {
+    movedOffLine(box);
+    return;
+  }
   offsetInline(box, dx, dy);
   // the blocks it was broken around move with it (9.2.1.1)
   const blocks = box.cut ? CUT_BLOCKS.get(box) : undefined;
@@ -4089,10 +4191,34 @@ function offsetInline(box: Box, dx: number, dy: number): void {
         y: (was?.y ?? 0) + dy,
       });
       SHIFTED_LINES.add(line);
+      markMovedOff(lines, line);
     }
   }
 }
 
+/** Mark the line an inline-block or an image a box moved off was placed
+ *  on, where it was on one: the line stays, and the box is drawn where it
+ *  went (`MOVED_OFF_LINES`). */
+function movedOffLine(box: Box): void {
+  let block = box.parent;
+  while (block && block.kind === 'inline') block = block.parent;
+  const lines = block?.lines;
+  if (!lines) return;
+  for (const line of lines) {
+    for (const placed of line.atomics) {
+      if (placed.box !== box) continue;
+      markMovedOff(lines, line);
+      return;
+    }
+  }
+}
+
+function markMovedOff(lines: LineBox[], line: LineBox): void {
+  const moved = MOVED_OFF_LINES.get(lines);
+  if (moved) moved.add(line);
+  else MOVED_OFF_LINES.set(lines, new Set([line]));
+}
+
 /** Whether `inner` is `outer` or inside it. */
 function holds(outer: Box, inner: Box): boolean {
   for (let at: Box | null = inner; at; at = at.parent) {