@react-x11/components 0.11.0 → 0.13.0

package/src/html/layout/block.ts

@@ -38,6 +38,7 @@ import {
   BOX_RAISES,
   Box,
   CLAMPED,
+  CLEARED_FROM,
   CUT_BLOCKS,
   GRID_TRACKS,
   FIRST_LINE,
@@ -60,6 +61,7 @@ import type {
 import { FloatContext } from './floats.js';
 import {
   faceExtentOf,
+  joinsBefore,
   layoutInline,
   lineHeightMultiplier,
   spaceBreaksOnly,
@@ -71,7 +73,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 +248,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 +794,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 +893,7 @@ function layoutChildren(
     }
 
     const counted = clamp?.fit?.lines ?? 0;
+    const floatMark = floats.count;
     if (
       !floats.isEmpty &&
       (child.kind === 'replaced' || establishesBFC(child))
@@ -871,6 +902,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
@@ -886,6 +928,8 @@ function layoutChildren(
     }
     first = false;
     const moved = childY !== at;
+    if (moved) CLEARED_FROM.set(child, at);
+    else CLEARED_FROM.delete(child);
     if (!moved && collapsesThrough(child)) {
       // nothing in it parts its margins: they and the ones either side of
       // it are one (CSS 2.1 8.3.1), still hanging for what comes next —
@@ -1030,11 +1074,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 +1797,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 +1885,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 +2904,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 +4189,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 +4208,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 +4232,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 +4243,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 +4276,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