@react-x11/components 0.11.0 → 0.13.0

package/dist/html/layout/block.js

@@ -13,13 +13,13 @@
 import { AUTO, gapOf, isPct, isTransparent, resolve, resolveOrNull, } from '../css/values.js';
 import { CONTAIN_INLINE_SIZE, CONTAIN_LAYOUT, CONTAIN_PAINT, CONTAIN_SIZE, scrolls, } from '../css/style.js';
 import { lineOf, spanToName } from './grid-lines.js';
-import { BOX_RAISES, Box, CLAMPED, CUT_BLOCKS, GRID_TRACKS, FIRST_LINE, INLINE_OFFSETS, MOVED_OFF_LINES, LINE_BOX_RAISES, SHIFTED_LINES, TEXT_SHIFTS, isBlank, } from './boxes.js';
+import { BOX_RAISES, Box, CLAMPED, CLEARED_FROM, CUT_BLOCKS, GRID_TRACKS, FIRST_LINE, INLINE_OFFSETS, MOVED_OFF_LINES, LINE_BOX_RAISES, SHIFTED_LINES, TEXT_SHIFTS, isBlank, } from './boxes.js';
 import { FloatContext } from './floats.js';
-import { faceExtentOf, layoutInline, lineHeightMultiplier, spaceBreaksOnly, strutOf, widestWord, } from './inline.js';
+import { faceExtentOf, joinsBefore, layoutInline, lineHeightMultiplier, spaceBreaksOnly, strutOf, widestWord, } from './inline.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';
 /** Lay the whole document out at a width. */
 export function layoutDocument(tree, fonts, viewportWidth, viewportHeight) {
     const ctx = {
@@ -93,19 +93,39 @@ export function layoutDocument(tree, fonts, viewportWidth, viewportHeight) {
     // 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);
+        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 = 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,
@@ -570,8 +590,12 @@ function layoutChildren(box, ctx, floats, contentTop, contentWidth, leading = 0)
     // 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) {
         if (child.kind === 'text' && isBlank(child.text))
@@ -652,6 +676,7 @@ function layoutChildren(box, ctx, floats, contentTop, contentWidth, leading = 0)
                 childY = clearance;
         }
         const counted = clamp?.fit?.lines ?? 0;
+        const floatMark = floats.count;
         if (!floats.isEmpty &&
             (child.kind === 'replaced' || establishesBFC(child))) {
             layoutBesideFloats(child, ctx, floats, contentLeft, childY, contentWidth);
@@ -659,6 +684,17 @@ function layoutChildren(box, ctx, floats, contentTop, contentWidth, leading = 0)
         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
@@ -674,6 +710,10 @@ function layoutChildren(box, ctx, floats, contentTop, contentWidth, leading = 0)
         }
         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 —
@@ -792,11 +832,21 @@ function layoutBesideFloats(box, ctx, floats, contentLeft, y, contentWidth) {
                 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) {
@@ -1397,6 +1447,10 @@ function layoutBox(box, ctx, borderBoxWidth, x, y, outerFloats) {
             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
@@ -1475,6 +1529,26 @@ function markerRoom(box, marker, fonts) {
         ? 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();
+function markerAscent(box, marker, fonts) {
+    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) {
     if (box.lines?.length)
@@ -2358,11 +2432,20 @@ function wordBound(box, fonts, measured) {
         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)
+                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;
@@ -3448,10 +3531,11 @@ export function establishesBFC(box) {
 }
 /** 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) {
+ *  whole of what makes it *relative* — and its translation with it, and
+ *  where `position: sticky` puts one at rest (`stickyOffset`). */
+export function applyRelativeOffsets(box, viewportWidth, viewportHeight) {
     for (const child of box.children)
-        applyRelativeOffsets(child);
+        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
@@ -3463,7 +3547,9 @@ export function applyRelativeOffsets(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);
@@ -3485,10 +3571,10 @@ export function transformed(style) {
 }
 /** How far `translate` and a `transform` move a box: a percentage is of
  *  its own border box (CSS Transforms 1, 7). */
-function translationOf(box) {
+function translationOf(box, style = box.style) {
     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);
@@ -3496,6 +3582,21 @@ function translationOf(box) {
     }
     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, was) {
+    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) {
     const style = box.style;
@@ -3513,6 +3614,72 @@ function relativeOffset(box) {
     const dy = top ?? (bottom !== null ? -bottom : 0);
     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, viewportWidth, viewportHeight) {
+    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, size, marginStart, marginEnd, cbAt, cbSize, portAt, portSize, start, end, startWins) {
+    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