@react-x11/components 0.11.0 → 0.12.0

package/src/html/index.ts

@@ -505,6 +505,9 @@ function renderControl(
     top: Math.round(at.y),
     width: Math.round(at.width),
     height: Math.round(at.height),
+    // core's `opacity` is CSS's: the widget faded as a group, and at 0 not
+    // drawn and still hit
+    ...(rect.opacity !== undefined && { opacity: rect.opacity }),
   };
   const field = rect.bare ? bareField(rect.bare) : fieldChrome(look);
   const report = (value: string | boolean): void => {
@@ -528,6 +531,9 @@ function renderControl(
       widget = h(Checkbox, {
         checked: attr(el, 'checked') !== undefined,
         disabled,
+        // the element's whole box takes the press, as it does in a browser:
+        // a page that sizes one over its label, invisible, means the label
+        style: { width: '100%', height: '100%' },
         onChange: (ev) => {
           const next = ev.value;
           if (next) el.attribs.checked = '';
@@ -570,7 +576,21 @@ function renderControl(
         options: options.map((o) => ({ value: o.value, label: o.label })),
         value: selectedOption(el) ?? undefined,
         disabled,
-        style: { width: '100%', height: '100%' },
+        style: rect.bare
+          ? [BARE_TRIGGER, { width: '100%', height: '100%' }]
+          : { width: '100%', height: '100%' },
+        // the slots choose the drawn trigger on every backend, and put the
+        // caption and the arrow in the page's ink
+        ...(rect.bare && {
+          labelStyle: {
+            color: rect.bare.color,
+            fontFamily: rect.bare.fontFamily,
+            fontSize: rect.bare.fontSize,
+          },
+          chevronStyle: rect.bare.chevron
+            ? { color: rect.bare.color }
+            : { display: 'none' },
+        }),
         onChange: (ev) => {
           const next = String(ev.value ?? '');
           setSelectedOption(el, next);
@@ -655,6 +675,24 @@ function bareField(bare: BareField): Style {
   };
 }
 
+/**
+ * The trigger of a `<select>` whose box the page styled: no frame, no fill
+ * and none of its own insets, and no wash under the pointer, since the box
+ * it would tint is the document's. Core's focus ring still marks it for the
+ * keyboard.
+ */
+const BARE_TRIGGER: Style = {
+  paddingTop: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
+  paddingRight: 0,
+  borderWidth: 0,
+  borderRadius: 0,
+  backgroundColor: 'transparent',
+  ':hover': { backgroundColor: 'transparent' },
+  ':active': { backgroundColor: 'transparent' },
+};
+
 function clearRadioGroup(el: Element): void {
   const name = attr(el, 'name');
   if (!name) return;

package/src/html/layout/block.ts

@@ -60,6 +60,7 @@ import type {
 import { FloatContext } from './floats.js';
 import {
   faceExtentOf,
+  joinsBefore,
   layoutInline,
   lineHeightMultiplier,
   spaceBreaksOnly,
@@ -71,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;
@@ -238,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,
@@ -768,8 +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`)
-  let marked = MARKER_ROOM.get(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) {
@@ -863,6 +892,7 @@ function layoutChildren(
     }
 
     const counted = clamp?.fit?.lines ?? 0;
+    const floatMark = floats.count;
     if (
       !floats.isEmpty &&
       (child.kind === 'replaced' || establishesBFC(child))
@@ -871,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
@@ -1030,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);
@@ -1744,6 +1794,8 @@ function layoutBox(
     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
@@ -1830,6 +1882,28 @@ function markerRoom(
     : 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];
@@ -2827,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;
@@ -4103,9 +4186,15 @@ 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
@@ -4116,7 +4205,10 @@ export function applyRelativeOffsets(box: Box): void {
     }
   }
   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') {
@@ -4137,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);
@@ -4148,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;
@@ -4166,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

package/src/html/layout/boxes.ts

@@ -36,6 +36,7 @@ import type { ContentItem } from '../css/content.js';
 import {
   CONTAIN_STYLE,
   FIRST_LINE_INHERITED,
+  NO_MASK,
   copyStyle,
   firstLineParent,
   inherit,
@@ -187,6 +188,15 @@ export interface LineText {
    *  spacer: a unit of the layout that is no text of the document's
    *  (`documentOffsetOf`, `layoutOffsetOf`). */
   gaps?: number[];
+  /**
+   * The spaces `pre-wrap` keeps that this fragment's line ends on, which an
+   * engine strips from a line's end as though CSS removed them there: each
+   * one's offset in the layout's text and where it is, from the layout's
+   * origin, beside the line's end in logical order (`hangPreserved`). They
+   * are their inline box's, whose background and border cover them, and
+   * the ones before a forced break that fit take room on the line.
+   */
+  hung?: { at: number; x: number; width: number }[];
   /** Any offset in the layout's own text as a document index — how a run
    *  under the pointer finds the element whose text it is. Per pass: the
    *  layout may be one an earlier pass made (`TextLayoutCache`), and the
@@ -233,6 +243,10 @@ export interface TextLayoutLike {
     height: number;
     baseline: number;
     width: number;
+    /** Its width with the white space it ends on kept, in the item it
+     *  ends: how far it moves the pen where text goes on after it on the
+     *  same line. ntk's, from 8.17.0; an engine without it leaves it out. */
+    advance?: number;
     ascent: number;
     descent: number;
     start: number;
@@ -581,6 +595,12 @@ export const BOX_RAISES = new WeakMap<Box, number>();
  *  background, drawn from its baseline, is put there by line. */
 export const LINE_BOX_RAISES = new WeakMap<LineBox, Map<Box, number>>();
 
+/** The face of an inline box with padding above or below its text and
+ *  nothing to paint behind it, which has no `decoration`: its fragments
+ *  still reach past its lines by the padding, and count in the scrollable
+ *  overflow of the block they are in (`computePaintBounds`). */
+export const PADDED_FACES = new WeakMap<Box, InlineDecoration>();
+
 /** The table cells wholly in columns `visibility: collapse` took out of
  *  their table (CSS 2.1 17.5.5), which the paint pass leaves out: a cell is
  *  no descendant of its column and inherits nothing from it, so its own
@@ -615,11 +635,17 @@ export const GRID_TRACKS = new WeakMap<Box, GridTracks>();
  *  `order` moves any: an absolutely positioned child's is 0. */
 export const PAINT_ORDER = new WeakMap<Box, Box[]>();
 
-/** The blocks that broke a relatively positioned inline box in pieces,
- *  under its first piece: its offset moves them too (CSS 2.1 9.2.1.1),
- *  though they stand outside it (`breakAround`). */
+/** The blocks that broke an inline box in pieces, under its first piece
+ *  (`breakAround`): a relative offset of the box moves them too (CSS 2.1
+ *  9.2.1.1), though they stand outside it, and its rect takes them in, as
+ *  a browser's does (`elementRect`). */
 export const CUT_BLOCKS = new WeakMap<Box, Box[]>();
 
+/** The element a pseudo-element's box is generated from, which has no
+ *  element of its own (`Box.pseudo`): whose the images its styles name are,
+ *  when the host is asked for them. */
+export const GENERATED_FROM = new WeakMap<Box, Element>();
+
 /** The blocks that broke an inline box under full opacity in pieces, and
  *  the opacity they take from it — from each such inline box around them,
  *  multiplied. They stand outside it (CSS 2.1 9.2.1.1) and are still its
@@ -647,9 +673,10 @@ export interface BoxTree {
   controls: Box[];
   /** Every box carrying an `href`, for click and hover. */
   links: Box[];
-  /** Every element's box with a `background-image` or a border image,
-   *  for the host to be asked for: a document has a handful, and finding
-   *  them was a walk over every box after every build. */
+  /** Every box with a `background-image`, a border image or a mask image,
+   *  an element's or a pseudo-element's, for the host to be asked for: a
+   *  document has a handful, and finding them was a walk over every box
+   *  after every build. */
   backgrounds: Box[];
   /** Every image generated content names, the element whose
    *  pseudo-element names it, for the host to be asked for, and whether its
@@ -1025,13 +1052,7 @@ class Builder {
         this._firstLine = true;
       }
     }
-    if (
-      style.backgroundImage ||
-      style.backgroundImages ||
-      typeof style.borderImage.source === 'string'
-    ) {
-      this._backgrounds.push(box);
-    }
+    if (namesImages(style)) this._backgrounds.push(box);
     if (style.position === 'absolute' || style.position === 'fixed')
       box.outOfFlow = true;
     else if (style.float !== 'none') box.isFloat = true;
@@ -1158,13 +1179,7 @@ class Builder {
     const box = new Box('replaced', el, style);
     box.replaced = replaced;
     into.append(box);
-    if (
-      style.backgroundImage ||
-      style.backgroundImages ||
-      typeof style.borderImage.source === 'string'
-    ) {
-      this._backgrounds.push(box);
-    }
+    if (namesImages(style)) this._backgrounds.push(box);
     if (style.position === 'absolute' || style.position === 'fixed')
       box.outOfFlow = true;
     else if (style.float !== 'none') box.isFloat = true;
@@ -1295,6 +1310,10 @@ class Builder {
     const box = new Box(boxKindFor(style.display), null, style);
     box.pseudo = which;
     into.append(box);
+    // its images are its element's to ask for: a `::after` with no content
+    // but a background, which designs hang a picture on, drew nothing
+    GENERATED_FROM.set(box, el);
+    if (namesImages(style)) this._backgrounds.push(box);
     // a list item it generates has a marker as an element's has, of the
     // `list-item` counter it has just counted (CSS 2.1 12.5): outside it,
     // or at the start of its content
@@ -1714,6 +1733,10 @@ class Builder {
     const letterStyle = cascade.firstLetterStyle(search.rules, style);
     const box = new Box(boxKindFor(letterStyle.display), null, letterStyle);
     box.pseudo = 'first-letter';
+    if (owner) {
+      GENERATED_FROM.set(box, owner);
+      if (namesImages(letterStyle)) this._backgrounds.push(box);
+    }
     if (letterStyle.float !== 'none') {
       box.isFloat = true;
       if (into.kind === 'inline') this._nestedOutOfLine = true;
@@ -2608,7 +2631,7 @@ function breakAround(inline: Box): Box[] | null {
   for (let i = 0; i < pieces.length; i += 1) {
     pieces[i].cut = (i > 0 ? 1 : 0) | (i < pieces.length - 1 ? 2 : 0);
   }
-  if (isRelative(inline.style)) CUT_BLOCKS.set(pieces[0], blocks);
+  CUT_BLOCKS.set(pieces[0], blocks);
   const fade = inline.style.opacity;
   if (fade < 1) {
     for (const block of blocks) {
@@ -2618,6 +2641,17 @@ function breakAround(inline: Box): Box[] | null {
   return out;
 }
 
+/** Whether a style names an image for its box to be drawn with: a
+ *  background's, a border's, or a mask's. */
+function namesImages(style: ComputedStyle): boolean {
+  return (
+    !!style.backgroundImage ||
+    !!style.backgroundImages ||
+    typeof style.borderImage.source === 'string' ||
+    style.mask !== NO_MASK
+  );
+}
+
 /**
  * The style of an anonymous box inside a parent: what the parent passes on
  * by inheritance, and every other property at its initial value, as CSS 2.1

package/src/html/layout/cache.ts

@@ -190,6 +190,7 @@ export const RUN_FIELDS = [
   'features',
   'nowrap',
   'shapeApart',
+  'kernAcross',
 ] as const satisfies readonly (keyof TextRun)[];
 
 /** A field of `TextRun` missing from `RUN_FIELDS` names itself here. */
@@ -223,7 +224,8 @@ function sameRun(a: TextRun, b: TextRun): boolean {
     a.href === b.href &&
     a.features === b.features &&
     a.nowrap === b.nowrap &&
-    a.shapeApart === b.shapeApart
+    a.shapeApart === b.shapeApart &&
+    a.kernAcross === b.kernAcross
   );
 }
 
@@ -250,7 +252,8 @@ function sameStyle(
     a.href === b.href &&
     a.features === b.features &&
     a.nowrap === b.nowrap &&
-    a.shapeApart === b.shapeApart
+    a.shapeApart === b.shapeApart &&
+    a.kernAcross === b.kernAcross
   );
 }
 
@@ -265,6 +268,7 @@ export const OPTION_FIELDS = [
   'overflow',
   'overflowWrap',
   'wrap',
+  'fit',
 ] as const satisfies readonly (keyof Options)[];
 
 /** An option missing from `OPTION_FIELDS` names itself here. */
@@ -284,6 +288,7 @@ function sameOptions(a: Options, b: Options): boolean {
     a.maxLines === b.maxLines &&
     a.overflow === b.overflow &&
     a.overflowWrap === b.overflowWrap &&
-    a.wrap === b.wrap
+    a.wrap === b.wrap &&
+    a.fit === b.fit
   );
 }

package/src/html/layout/floats.ts

@@ -153,6 +153,30 @@ export class FloatContext {
     return lowest;
   }
 
+  /** Move the floats placed since `mark` down by `dy`, with the block they
+   *  were placed in: a list item's first block goes lower to make room
+   *  for its marker once it is laid out (`layoutChildren`). */
+  moveSince(mark: number, dy: number): void {
+    if (!dy || mark >= this._boxes.length) return;
+    for (let i = mark; i < this._boxes.length; i += 1) {
+      const float = this._boxes[i];
+      this._boxes[i] = {
+        ...float,
+        top: float.top + dy,
+        bottom: float.bottom + dy,
+      };
+    }
+    this._lowestLeft = -Infinity;
+    this._lowestRight = -Infinity;
+    this._lastTop = -Infinity;
+    for (const float of this._boxes) {
+      if (float.top > this._lastTop) this._lastTop = float.top;
+      if (float.side === 'left')
+        this._lowestLeft = Math.max(this._lowestLeft, float.bottom);
+      else this._lowestRight = Math.max(this._lowestRight, float.bottom);
+    }
+  }
+
   /** How far down the floats reach — what a container that establishes a
    *  BFC has to grow to, so it does not end above its own floats. */
   get bottom(): number {