@react-x11/components 0.10.0 → 0.12.0

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,
@@ -58,6 +60,7 @@ import type {
 import { FloatContext } from './floats.js';
 import {
   faceExtentOf,
+  joinsBefore,
   layoutInline,
   lineHeightMultiplier,
   spaceBreaksOnly,
@@ -69,7 +72,15 @@ import type { TextRun } from '../../richtext/index.js';
 import { layoutFlex } from './flex.js';
 import { finishCaptions, layoutTable } from './table.js';
 import { collapseEdges } from './collapse.js';
-import { computePaintBounds, hoistNegative, stackLayers } from '../paint.js';
+import {
+  clipsFor,
+  computePaintBounds,
+  FIXED_BOXES,
+  fixedToViewport,
+  hoistNegative,
+  OUT_OF_FLOW_REACH,
+  stackLayers,
+} from '../paint.js';
 
 export interface LayoutContext {
   fonts: FontsLike | null;
@@ -180,7 +191,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 +201,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 +209,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 +232,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.
@@ -231,19 +247,35 @@ export function layoutDocument(
   // against where it *was* — which is the whole of what makes it relative —
   // and the ink bounds are computed after that, so culling sees where boxes
   // ended up rather than where they were laid out.
-  if (tree.relative) applyRelativeOffsets(root);
+  if (tree.relative) applyRelativeOffsets(root, viewportWidth, viewportHeight);
   const reach = computePaintBounds(root, tree.movedInline);
   if (tree.negative) hoistNegative(root);
   stackLayers(root);
 
   // The document is as tall as what overflows the root, not the root: an
   // `html, body { height: 100% }` a window tall holds a message longer than
-  // the window, and the element sizes to all of it.
+  // the window, and the element sizes to all of it. Not what a box that
+  // clips its overflow holds: that is its own to scroll, and the root's
+  // scrollable overflow takes in a positioned box only where no box on the
+  // way to it clips it (CSS Overflow 3, 2.2): an absolute box 900px down
+  // an `overflow: hidden` card made a page a browser shows 400px tall run
+  // on to 980, blank
   let bottom = Math.max(root.height, reach);
+  let fixed: Box[] | null = null;
   for (const { box } of ctx.positioned) {
-    if (box.style.position !== 'fixed')
-      bottom = Math.max(bottom, box.y + box.height);
+    if (box.style.position === 'fixed') {
+      if (fixedToViewport(box)) (fixed ??= []).push(box);
+      continue;
+    }
+    if (clipsFor(box, root).length) continue;
+    // and what it holds, where it does not clip it: a page set in an
+    // absolute wrapper 497px tall runs on below it, and the document with
+    // it — design 094 was a window tall and no taller, its text past the
+    // end of the scroll
+    bottom = Math.max(bottom, OUT_OF_FLOW_REACH.get(box) ?? box.y + box.height);
   }
+  if (fixed) FIXED_BOXES.set(tree, fixed);
+  else FIXED_BOXES.delete(tree);
   return {
     width: viewportWidth,
     height: bottom,
@@ -251,6 +283,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 +793,12 @@ 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`): an
+  // inside marker's is handed down to the line it is on, and an outside
+  // one's is room above the baseline of the first child that has a line,
+  // which goes lower where the marker reaches higher (`MARKER_ASCENT`)
+  let pushed = MARKER_ASCENT.get(box) ?? null;
+  let marked = pushed === null ? (MARKER_ROOM.get(box) ?? null) : null;
   const clamp = ctx.clamp ?? null;
 
   for (const child of box.children) {
@@ -743,6 +817,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,
@@ -814,6 +892,7 @@ function layoutChildren(
     }
 
     const counted = clamp?.fit?.lines ?? 0;
+    const floatMark = floats.count;
     if (
       !floats.isEmpty &&
       (child.kind === 'replaced' || establishesBFC(child))
@@ -822,6 +901,17 @@ function layoutChildren(
     } else {
       layoutBlockLevel(child, ctx, floats, contentLeft, childY, contentWidth);
     }
+    if (pushed !== null) {
+      const line = firstLineIn(child);
+      if (line) {
+        const push = pushed - (line.y + line.baseline - child.y);
+        if (push > 0) {
+          translate(child, 0, push);
+          floats.moveSince(floatMark, push);
+        }
+        pushed = null;
+      }
+    }
     // a block with none of the flow's lines in it — an image, a box of a
     // formatting context of its own — puts the clamp point of an `auto`
     // clamp before it where it ends below the room
@@ -870,12 +960,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;
@@ -978,11 +1071,20 @@ function layoutBesideFloats(
         band = over;
         continue;
       }
+      // Where no float narrows the room on either side, the box is where
+      // it would be were there none, and one too wide for its containing
+      // block overflows it here: below the floats it would be the same box
+      // in the same room. Blink tests a fit only against a side a float is
+      // on (`can_expand_outside_opportunity`, BlockLayoutAlgorithm::
+      // LayoutNewFormattingContext). Design 209's 247px heading, which
+      // clips its overflow, in a 240px column beside a float that ends
+      // left of the column, went under the float, 555px down.
+      if (lo === -Infinity && hi === Infinity) fits = true;
       // What is too wide overflows at the end of the line, as far as a
       // negative margin there takes it, but no further into a float or
       // past the room; at the start it would run into the floats, and
       // waits below them (the suite's floats-wrap-bfc-with-margin tests)
-      if (inRoom) {
+      else if (inRoom) {
         fits = box.marginLeft + box.width + box.marginRight <= room + 0.5;
       } else if (rtl) {
         const limit = Math.max(contentLeft + Math.min(0, box.marginLeft), lo);
@@ -1063,6 +1165,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 +1363,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 +1379,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 +1790,28 @@ 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);
+    if (box.style.listStylePosition === 'inside') MARKER_ASCENT.delete(box);
+    else MARKER_ASCENT.set(box, markerAscent(box, box.marker, ctx.fonts));
+  }
   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 +1855,55 @@ 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;
+}
+
+/**
+ * How far an outside marker reaches above the baseline it sits on. The
+ * marker is a line of its own face, the item's or a `::marker` rule's, so a
+ * bullet or a number reaches its face's ascent on that line, and an image,
+ * set on the line bottom on the baseline, the higher of that and its own
+ * height. Where the item's first line is in a block inside it — a link set
+ * `display: block`, a paragraph — and the block's first baseline is nearer
+ * its top than that, the block goes lower by the difference, and its line
+ * stays the height it was: CSS 2.1 (12.5.1) leaves this to the user agent,
+ * and Blink aligns the marker's baseline with the block's and pushes the
+ * block down (`UnpositionedListMarker::AddToBox`). Its first line grew
+ * instead, and design 196's links, under 18px bullets, were 21px tall where
+ * Chrome has them 14px, 7px lower. On the item's own line the two come to
+ * the same: the line grows by what the push would have moved it.
+ */
+const MARKER_ASCENT = new WeakMap<Box, number>();
+
+function markerAscent(box: Box, marker: Marker, fonts: FontsLike): number {
+  const ascent = strutOf(fonts, marker.style ?? box.style).ascent;
+  return marker.image ? Math.max(marker.image.height, ascent) : ascent;
+}
+
 /** 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];
@@ -2732,10 +2901,19 @@ function wordBound(box: Box, fonts: FontsLike, measured: boolean): number {
     let last: object | null = null;
     for (const line of box.lines) {
       if (unbroken) widest = Math.max(widest, line.width);
+      // a word across inline boxes' edges is in two fragments of text, and
+      // as wide as its parts in both and the edges between: bound by the
+      // widest word of each, a float in a narrow room took a letter of a
+      // word of letters in bordered spans for its least width, and was cut
+      // to the room (`joinsBefore`)
+      let chain = 0;
       for (const text of line.texts) {
-        if (text.layout === last) continue;
+        const joins = joinsBefore(text);
+        if (joins === undefined && text.layout === last) continue;
         last = text.layout;
-        widest = Math.max(widest, widestWord(fonts, text.layout, measured));
+        const own = widestWord(fonts, text.layout, measured);
+        chain = joins === undefined ? own : chain + joins + own;
+        widest = Math.max(widest, chain);
       }
       for (const placed of line.atomics) {
         const b = placed.box;
@@ -4008,19 +4186,35 @@ export function establishesBFC(box: Box): boolean {
 
 /** What a box's `position: relative` offset moves it by, applied after
  *  layout so it does not affect anything else's position — which is the
- *  whole of what makes it *relative* — and its translation with it. */
-export function applyRelativeOffsets(box: Box): void {
-  for (const child of box.children) applyRelativeOffsets(child);
+ *  whole of what makes it *relative* — and its translation with it, and
+ *  where `position: sticky` puts one at rest (`stickyOffset`). */
+export function applyRelativeOffsets(
+  box: Box,
+  viewportWidth: number,
+  viewportHeight: number,
+): void {
+  for (const child of box.children)
+    applyRelativeOffsets(child, viewportWidth, viewportHeight);
   const style = box.style;
   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);
+  const [dx, dy] =
+    style.position === 'sticky'
+      ? stickyOffset(box, viewportWidth, viewportHeight)
+      : 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;
@@ -4035,10 +4229,10 @@ export function transformed(style: ComputedStyle): boolean {
 
 /** How far `translate` and a `transform` move a box: a percentage is of
  *  its own border box (CSS Transforms 1, 7). */
-function translationOf(box: Box): [number, number] {
+function translationOf(box: Box, style = box.style): [number, number] {
   let dx = 0;
   let dy = 0;
-  for (const moved of [box.style.translate, box.style.transformTranslate]) {
+  for (const moved of [style.translate, style.transformTranslate]) {
     if (!moved) continue;
     dx += resolve(moved[0], box.width, 0);
     dy += resolve(moved[1], box.height, 0);
@@ -4046,6 +4240,21 @@ function translationOf(box: Box): [number, number] {
   return [dx, dy];
 }
 
+/**
+ * Move a laid-out box, and everything in it, by how far its translation
+ * changed when its style went from `was` to the one it has — what
+ * `applyRelativeOffsets` moves it by now, less what it moved it by then.
+ * For a style changed in place, where nothing else moves (a `transform` is
+ * what makes that true). Not for an inline box, whose text is what moves.
+ */
+export function retranslate(box: Box, was: ComputedStyle): void {
+  const [x0, y0] = translationOf(box, was);
+  const [x1, y1] = translationOf(box);
+  if (x1 === x0 && y1 === y0) return;
+  translate(box, x1 - x0, y1 - y0);
+  movedOffLine(box);
+}
+
 /** How far `position: relative` moves a box. */
 function relativeOffset(box: Box): [number, number] {
   const style = box.style;
@@ -4064,6 +4273,111 @@ function relativeOffset(box: Box): [number, number] {
   return [dx, dy];
 }
 
+/**
+ * Where `position: sticky` puts a box at rest (CSS Positioned Layout 3,
+ * 3.4): moved only as far as keeps its border box inside the sticky view
+ * rectangle — its nearest scroll container's scrollport, scrolled to its
+ * start, less its insets — and no further than keeps its margin box in its
+ * containing block, `top` winning over `bottom` and the start side over the
+ * end. Nothing here scrolls a box the document holds, so for one of those
+ * this is where the box stays. The viewport does scroll, and the document
+ * with it, and a sticky box does not follow: against the viewport only its
+ * `top` and its start side are kept, which at rest put a box as a browser
+ * does, while a `bottom: 0` would pin a footer to the middle of the page
+ * once it was scrolled. Taken as `relative`, a box stood its `top` below
+ * where a browser starts it: Wikipedia's contents, 24px low.
+ */
+function stickyOffset(
+  box: Box,
+  viewportWidth: number,
+  viewportHeight: number,
+): [number, number] {
+  const style = box.style;
+  // the scroll container a sticky box keeps to: the nearest box that
+  // scrolls, or the viewport, whose are the root's and the body's overflow
+  let port = box.parent;
+  while (port && !scrolls(port.style)) port = port.parent;
+  const tag = port?.el?.name;
+  const inside = !!port && tag !== 'html' && tag !== 'body';
+  let cb = box.parent;
+  while (cb && cb.kind === 'inline') cb = cb.parent;
+  if (!cb) return [0, 0];
+  // the scrollport, at its start: a scroll container's padding box, or
+  // the viewport, which the document's top is at
+  const px = port && inside ? port.x + port.borderLeft : 0;
+  const py = port && inside ? port.y + port.borderTop : 0;
+  const pw =
+    port && inside
+      ? port.width - port.borderLeft - port.borderRight
+      : viewportWidth;
+  const ph =
+    port && inside
+      ? port.height - port.borderTop - port.borderBottom
+      : viewportHeight;
+  const dx = stuck(
+    box.x,
+    box.width,
+    box.marginLeft,
+    box.marginRight,
+    cb.contentX,
+    cb.contentWidth,
+    px,
+    pw,
+    resolveOrNull(style.left, pw),
+    inside ? resolveOrNull(style.right, pw) : null,
+    // `left` wins where both hold, or `right` in a right-to-left block
+    cb.style.direction !== 'rtl',
+  );
+  const dy = stuck(
+    box.y,
+    box.height,
+    box.marginTop,
+    box.marginBottom,
+    cb.contentY,
+    cb.contentHeight,
+    py,
+    ph,
+    resolveOrNull(style.top, ph),
+    inside ? resolveOrNull(style.bottom, ph) : null,
+    true,
+  );
+  return [dx, dy];
+}
+
+/**
+ * How far a sticky box moves along one axis: toward the end until its
+ * start edge is `start` inside the scrollport's, or toward the start until
+ * its end edge is `end` inside the scrollport's, each no further than its
+ * margin box stays in its containing block — and where both would move
+ * it, `startWins` says which does.
+ */
+function stuck(
+  at: number,
+  size: number,
+  marginStart: number,
+  marginEnd: number,
+  cbAt: number,
+  cbSize: number,
+  portAt: number,
+  portSize: number,
+  start: number | null,
+  end: number | null,
+  startWins: boolean,
+): number {
+  let byStart = 0;
+  if (start !== null && Number.isFinite(start) && at < portAt + start) {
+    const room = cbAt + cbSize - (at + size + marginEnd);
+    byStart = Math.max(0, Math.min(portAt + start - at, room));
+  }
+  let byEnd = 0;
+  if (end !== null && Number.isFinite(end)) {
+    const over = at + size - (portAt + portSize - end);
+    const room = at - marginStart - cbAt;
+    if (over > 0) byEnd = -Math.max(0, Math.min(over, room));
+  }
+  return startWins ? byStart || byEnd : byEnd || byStart;
+}
+
 /**
  * Move an inline box's text where `position: relative` puts the box. Its
  * text is on its block's lines, laid out apart from the text around it
@@ -4089,10 +4403,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) {