@react-x11/components 0.12.0 → 0.14.0

package/dist/html/layout/multicol.js

@@ -0,0 +1,897 @@
+/**
+ * Multi-column layout (CSS Multi-column 1), over the layout the block pass
+ * makes of a container's content as one column: a strip a column wide and
+ * as tall as it all comes to. What is here decides where the strip breaks,
+ * and moves each piece of it to its column.
+ *
+ * Moved rather than laid out again, because a break changes nothing about a
+ * box but where it is: every column is the same width, so a paragraph's
+ * lines are the ones the strip gave it, and a box that a break misses is the
+ * same box in another place. A box a break falls inside keeps one rect,
+ * which takes in all its pieces as a browser's bounding rect of it does, and
+ * its pieces beside it (`COLUMN_PIECES`); the lines of a paragraph go each to
+ * its column (`COLUMN_LINES`).
+ *
+ * Where the breaks go is CSS Fragmentation 3's: between the lines of a block
+ * and between sibling boxes, never inside a line, a replaced element, a
+ * table, a flex box or a grid, a box that clips or scrolls, or one that
+ * says `break-inside: avoid` (4.1); `orphans` and `widows` lines of a block
+ * kept together at either side of one (4.3), and a margin next to one
+ * dropped where the break was not forced (5.2). A box with a height and
+ * nothing in it has no line or box for a break to fall inside, and is cut
+ * wherever a column ends; so is the room clearance leaves above a box or a
+ * line, which is no margin. How tall the columns are is left to the user
+ * agent where they balance (Multi-column 1, 7), and this does as Blink
+ * does: the content's height over the number of columns, no less than the
+ * tallest thing that cannot break, and then, while that many columns do not
+ * hold it, taller by the least amount that lets one more thing into a
+ * column — the smallest "space shortage" any break left
+ * (`NGColumnLayoutAlgorithm`, `StretchColumnBlockSize`).
+ *
+ * What this cannot do for having laid the content out once: a float that
+ * cannot be cut stays with the lines that were set beside it, where a
+ * browser takes it to the next column and sets those lines again, wider;
+ * and a table, a flex box and a grid go to a column whole, where a browser
+ * breaks them between their rows.
+ */
+import { CONTAIN_SIZE, scrolls } from '../css/style.js';
+import { gapOf } from '../css/values.js';
+import { contained, establishesBFC, moveTo, transformed } from './block.js';
+import { CLEARED_FROM, COLUMN_LINES, COLUMN_PIECES, COLUMN_ROWS, columned, } from './boxes.js';
+/** Slack for sums of fractions of a pixel that should have come out even. */
+const EPS = 1 / 128;
+/** How far past the rows of its column a text's layout is left to draw at
+ *  an end no other column's rows are beyond: a glyph taller than its line. */
+const REACH = 2048;
+/**
+ * The columns a multicol container's content box of a width is set in (CSS
+ * Multi-column 1, 3.4): as many as `column-count` says, or as many
+ * `column-width` wide as fit, or the fewer of the two, and each as wide as
+ * leaves a gap between them. Null for a box that is none, and for one laid
+ * out at no width limit, whose content is one column as wide as it likes.
+ */
+export function columnsOf(box, available) {
+    const style = box.style;
+    if (!style.columns || box.kind !== 'block')
+        return null;
+    if (!Number.isFinite(available))
+        return null;
+    // `normal` is an em between columns (4.1)
+    const gap = style.columnGapNormal
+        ? style.fontSize
+        : gapOf(style.columnGap, available);
+    let count;
+    if (style.columnWidth === null)
+        count = style.columnCount ?? 1;
+    else {
+        const fit = Math.max(1, Math.floor((available + gap) / (style.columnWidth + gap)));
+        count = style.columnCount === null ? fit : Math.min(style.columnCount, fit);
+    }
+    return {
+        count,
+        gap,
+        width: Math.max(0, (available - (count - 1) * gap) / count),
+    };
+}
+const NO_GROUP = {
+    top: 0,
+    bottom: 0,
+    block: null,
+    sliced: false,
+    empty: true,
+    end: 0,
+    column: 0,
+    last: 0,
+};
+/** Whether no break may fall inside a box, whatever it holds: it is
+ *  monolithic, or says so. It goes to a column with all that is in it. */
+function whole(box) {
+    if (box.kind !== 'block')
+        return true;
+    if (box.style.breakInside === 'avoid')
+        return true;
+    return establishesBFC(box) || transformed(box.style);
+}
+/**
+ * Whether a box that holds nothing to break between may be cut anywhere: a
+ * block with a height and nothing in it, floated or not, which a browser
+ * carries on from one column to the next (CSS Fragmentation 3, 4.1 makes
+ * only what cannot be cut monolithic: replaced content, and a box that
+ * scrolls or clips).
+ */
+function sliceable(box) {
+    if (box.kind !== 'block' || box.marker)
+        return false;
+    const style = box.style;
+    if (style.breakInside === 'avoid' || scrolls(style))
+        return false;
+    if (transformed(style) || style.columns)
+        return false;
+    // size containment makes a box monolithic (CSS Containment 2, 3.1)
+    if (contained(box, CONTAIN_SIZE))
+        return false;
+    if (box.lines?.length)
+        return false;
+    for (const child of box.children) {
+        if (flows(child))
+            return false;
+    }
+    return true;
+}
+/** Whether a block's child is a box in its flow. */
+function flows(child) {
+    switch (child.kind) {
+        case 'text':
+        case 'break':
+        case 'inline':
+        case 'marker':
+            return false;
+        default:
+            return !child.outOfFlow && !child.isFloat;
+    }
+}
+/** The floats and the out-of-flow boxes in a block's inline content, at
+ *  any depth of inline box. */
+function eachAside(box, visit) {
+    for (const child of box.children) {
+        if (child.isFloat || child.outOfFlow)
+            visit(child);
+        else if (child.kind === 'inline')
+            eachAside(child, visit);
+    }
+}
+/** How far down a box that goes whole reaches: its own bottom, and the
+ *  floats that hang out of it where it does not hold them. */
+function reachOf(box) {
+    let bottom = box.y + box.height;
+    if (box.kind !== 'block' || establishesBFC(box))
+        return bottom;
+    const walk = (node) => {
+        for (const child of node.children) {
+            if (child.outOfFlow)
+                continue;
+            if (child.isFloat) {
+                bottom = Math.max(bottom, child.y + child.height + Math.max(0, child.marginBottom));
+            }
+            else if (child.kind === 'inline' || child.kind === 'block')
+                walk(child);
+        }
+    };
+    walk(box);
+    return bottom;
+}
+/**
+ * A float that goes whole, as a unit with the lines and the boxes beside
+ * it, which it is set in a column with. One that can be cut anywhere is
+ * none: it stands beside the flow, which breaks as it would without it,
+ * and is cut where the columns end (`cutFloat`).
+ */
+function floatUnit(float, from, into) {
+    if (columned.any)
+        COLUMN_PIECES.delete(float);
+    into.loose.add(from);
+    if (sliceable(float))
+        return;
+    const unit = {
+        top: float.y - Math.max(0, float.marginTop),
+        bottom: float.y + float.height + Math.max(0, float.marginBottom),
+        block: null,
+        sliced: false,
+        size: 0,
+        end: 0,
+        group: NO_GROUP,
+    };
+    into.units.push(made(unit));
+    into.boxes.set(float, unit);
+}
+/**
+ * Room in the flow that nothing stands in and no margin makes: what
+ * clearance moved a box or a line down by. A break drops a margin beside
+ * it (CSS Fragmentation 3, 5.2) and not this, which the columns take as
+ * they would a box with nothing in it, cut wherever one ends.
+ */
+function space(top, bottom, 
+/** The block whose lines it is between. */
+block, into) {
+    const unit = {
+        top,
+        bottom,
+        block,
+        sliced: true,
+        size: 0,
+        end: 0,
+        group: NO_GROUP,
+    };
+    into.units.push(made(unit));
+    return unit;
+}
+/**
+ * The units of a box's content, in the strip, and which box or line each
+ * is: a line for each line, a box for each box that goes whole, and the
+ * content of any other block in its turn — whose own top edge goes with its
+ * first and whose bottom with its last, since no break comes between a box's
+ * edge and what it holds. Answers the first and the last in the flow.
+ */
+function gather(box, into) {
+    let first = null;
+    let last = null;
+    const lines = box.lines;
+    if (lines?.length) {
+        let under = box.contentY;
+        for (const line of lines) {
+            // room a line was set below — a `<br clear>`, a line that did not
+            // fit beside a float — is no margin for a break to drop
+            if (line.y - under > EPS) {
+                const room = space(under, line.y, box, into);
+                first ??= room;
+            }
+            under = line.y + line.height;
+            const unit = {
+                top: line.y,
+                bottom: line.y + line.height,
+                block: box,
+                sliced: false,
+                size: 0,
+                end: 0,
+                group: NO_GROUP,
+            };
+            into.units.push(made(unit));
+            into.lines.set(line, unit);
+            first ??= unit;
+            last = unit;
+        }
+        eachAside(box, (aside) => {
+            if (aside.isFloat)
+                floatUnit(aside, box, into);
+        });
+        return first && last ? [first, last] : null;
+    }
+    for (const child of box.children) {
+        if (child.isFloat && !child.outOfFlow) {
+            floatUnit(child, box, into);
+            continue;
+        }
+        if (!flows(child))
+            continue;
+        if (columned.any)
+            COLUMN_PIECES.delete(child);
+        // the room clearance set it down by, which is none of its margin
+        const clear = CLEARED_FROM.get(child);
+        if (clear !== undefined && child.y - clear > EPS) {
+            const room = space(clear, child.y, null, into);
+            first ??= room;
+        }
+        if (whole(child)) {
+            const unit = {
+                top: child.y,
+                bottom: reachOf(child),
+                block: null,
+                sliced: sliceable(child),
+                size: 0,
+                end: 0,
+                group: NO_GROUP,
+            };
+            into.units.push(made(unit));
+            into.boxes.set(child, unit);
+            first ??= unit;
+            last = unit;
+            continue;
+        }
+        const span = gather(child, into);
+        if (into.loose.has(child))
+            into.loose.add(box);
+        if (!span) {
+            // nothing in its flow to break between: it goes whole, or is cut
+            const unit = {
+                top: child.y,
+                bottom: child.y + child.height,
+                block: null,
+                sliced: sliceable(child),
+                size: 0,
+                end: 0,
+                group: NO_GROUP,
+            };
+            into.units.push(made(unit));
+            into.boxes.set(child, unit);
+            first ??= unit;
+            last = unit;
+            continue;
+        }
+        span[0].top = Math.min(span[0].top, child.y);
+        span[1].bottom = Math.max(span[1].bottom, child.y + child.height);
+        into.spans.set(child, span);
+        first ??= span[0];
+        last = span[1];
+    }
+    return first && last ? [first, last] : null;
+}
+/** The units in groups, down the strip: each group what a break may come
+ *  before. Units that overlap are one group, which no break divides. */
+/** Note a unit's own extent, as it is made. */
+function made(unit) {
+    unit.size = unit.bottom - unit.top;
+    unit.end = unit.bottom;
+    return unit;
+}
+function groupsOf(units) {
+    // in the order of their tops, which is the document's but for a float
+    const sorted = units.slice().sort((a, b) => a.top - b.top);
+    const groups = [];
+    let group = null;
+    for (const unit of sorted) {
+        if (group && unit.top < group.bottom - EPS) {
+            group.bottom = Math.max(group.bottom, unit.bottom);
+            group.block = null;
+            group.sliced = false;
+            group.empty &&= unit.size <= EPS;
+            group.end = Math.max(group.end, unit.end);
+        }
+        else {
+            group = {
+                top: unit.top,
+                bottom: unit.bottom,
+                block: unit.block,
+                sliced: unit.sliced,
+                empty: unit.size <= EPS,
+                end: unit.end,
+                column: 0,
+                last: 0,
+            };
+            groups.push(group);
+        }
+        unit.group = group;
+    }
+    return groups;
+}
+/** The most columns content is set in: past it, the rest stays in the
+ *  last. A column a fraction of a pixel tall would make one for every such
+ *  fraction of a box that can be cut anywhere. */
+const MOST_COLUMNS = 2000;
+/**
+ * The groups set in columns of a height: each column filled until the next
+ * group does not fit, and broken there — or before there, where that would
+ * leave fewer lines of a block than `orphans` at the foot of the column, or
+ * fewer than `widows` at the head of the next: `orphans` first, and then as
+ * many of `widows` as that leaves, which is how Blink weighs the two (a
+ * block of four lines with `widows: 3` breaks two and two; CSS says only
+ * that both are to be honoured, 4.3). What stands
+ * first in a column stays there however tall, and the first `orphans` lines
+ * of a block with it. A box that can be cut anywhere is cut at the foot of
+ * the column, and goes on at the head of the next.
+ */
+function fill(groups, top, height, 
+/** Whether the columns can be no taller: the container's own height, or
+ *  its `max-height`, is what they are. */
+fixed) {
+    const starts = [0];
+    const tops = [top];
+    const cut = [false];
+    let shortage = Infinity;
+    let over = false;
+    let head = 0;
+    let columnTop = top;
+    /** Whether the group at the column's head is one the column before
+     *  cut: it goes on from the column's top. */
+    let goesOn = false;
+    let i = 0;
+    const missed = (index) => {
+        const by = groups[index].bottom - columnTop - height;
+        if (by > EPS && by < shortage)
+            shortage = by;
+    };
+    /** Whether nothing with a height has been set in the column before a
+     *  group: the top edges of the boxes it starts, at most — or, `blank`,
+     *  not even those. */
+    const bare = (index, blank) => {
+        for (let k = head; k < index; k += 1) {
+            const before = groups[k];
+            if (blank ? before.bottom - before.top > EPS : !before.empty) {
+                return false;
+            }
+        }
+        return !goesOn;
+    };
+    const next = (at, from, inside) => {
+        starts.push(at);
+        tops.push(from);
+        cut.push(inside);
+        head = at;
+        columnTop = from;
+        goesOn = inside;
+        i = at;
+    };
+    while (i < groups.length) {
+        const group = groups[i];
+        if (group.bottom - columnTop <= height + EPS ||
+            // nothing at all, which takes no room wherever it is
+            group.bottom - group.top <= EPS ||
+            starts.length >= MOST_COLUMNS) {
+            i += 1;
+            goesOn = false;
+            continue;
+        }
+        missed(i);
+        if (group.sliced && height >= 1) {
+            // what fits of it stays, and the rest goes on; none of it fits where
+            // it starts at the column's foot, and then all of it goes on
+            const from = goesOn ? columnTop : group.top;
+            const foot = columnTop + height;
+            if (foot - from > EPS)
+                next(i, foot, true);
+            else
+                next(i, group.top, false);
+            continue;
+        }
+        if (i === head ||
+            bare(i, true) ||
+            (group.end - columnTop <= height + EPS && bare(i, false))) {
+            // first in its column, or after nothing that takes any room, where
+            // it stays however tall; or all of it fits but the bottom edge of a
+            // box it ends, and nothing with a height has been set in the column
+            // to break before it: the edge hangs out (where Blink breaks before
+            // the edge, as a last resort)
+            over = true;
+            i += 1;
+            goesOn = false;
+            continue;
+        }
+        let at = i;
+        const block = group.block;
+        if (block) {
+            // the lines of its block this one is among, and which of them it is
+            const run = linesAbout(groups, i);
+            const k = run.indexOf(i);
+            const count = run.length;
+            const orphans = Math.min(block.style.orphans, count);
+            const widows = Math.min(block.style.widows, count);
+            const a = run[0];
+            if (a >= head && k > 0 && k < orphans) {
+                if (a === head && !fixed) {
+                    // at the head of the column already: they stay, and hang out,
+                    // for a taller column to take them in
+                    missed(run[orphans - 1]);
+                    over = true;
+                    i = run[orphans - 1] + 1;
+                    goesOn = false;
+                    continue;
+                }
+                // too few would stay: the block goes to the next column whole —
+                // or, at the head of a column that can be no taller, breaks where
+                // it must, with fewer
+                missed(run[orphans - 1]);
+                if (a !== head)
+                    at = a;
+            }
+            else if (k > 0 && count - k < widows) {
+                // Too few would go: more go with them, as many as leave `orphans`
+                // behind, which may be fewer than `widows` asks for. Of the lines
+                // set from this column on, where the block goes on from a column
+                // before — and there, where not even all of them are enough, it
+                // breaks where it would (as Blink breaks each: seven lines, three
+                // to a column, under `widows: 5` are two, three and two).
+                const lo = a >= head ? 0 : run.findIndex((line) => line >= head);
+                const keep = count - lo - Math.min(block.style.widows, count - lo);
+                if (lo === 0 || keep > 0) {
+                    const stay = Math.max(orphans, keep);
+                    if (stay < k - lo)
+                        at = run[lo + stay];
+                }
+            }
+        }
+        next(at, groups[at].top, false);
+    }
+    return { starts, tops, cut, shortage, over };
+}
+/** The lines of a block that a line is among, in order: the groups about
+ *  it that are lines of its block, past the room between them. */
+function linesAbout(groups, i) {
+    const block = groups[i].block;
+    const run = [i];
+    for (let k = i - 1; k >= 0 && groups[k].block === block; k -= 1) {
+        if (!groups[k].sliced)
+            run.unshift(k);
+    }
+    for (let k = i + 1; k < groups.length && groups[k].block === block; k += 1) {
+        if (!groups[k].sliced)
+            run.push(k);
+    }
+    return run;
+}
+/**
+ * The tallest thing in the strip no break may fall inside, which a column
+ * is no shorter than: a box that goes whole, a line, and the lines of a
+ * block that `orphans` keeps together at its start and `widows` at its end
+ * (as Blink's initial balancing pass takes them,
+ * `PropagateTallestUnbreakableBlockSize`).
+ */
+function tallestOf(groups) {
+    let tallest = 0;
+    for (let i = 0; i < groups.length; i += 1) {
+        const group = groups[i];
+        const block = group.block;
+        if (group.sliced)
+            continue;
+        if (!block) {
+            tallest = Math.max(tallest, group.bottom - group.top);
+            continue;
+        }
+        const run = linesAbout(groups, i);
+        const count = run.length;
+        const orphans = Math.min(block.style.orphans, count);
+        const widows = Math.min(block.style.widows, count);
+        tallest = Math.max(tallest, groups[run[orphans - 1]].bottom - group.top, groups[run[count - 1]].bottom - groups[run[count - widows]].top);
+        i = run[count - 1];
+    }
+    return tallest;
+}
+/**
+ * Set a multicol container's content, laid out as one strip at its content
+ * box's top, in its columns, and answer their height — the container's
+ * content height, where it has none of its own.
+ *
+ * `strip` is the strip's height, its first and last margins in it, and
+ * `limit` the tallest a column may be: the container's own height, or its
+ * `max-height`. Past it the content goes on in columns beyond the
+ * container's edge (8.2). Under `column-fill: auto` the columns are that
+ * tall, each filled before the next is started, and where nothing limits
+ * them the first holds everything (7.1).
+ */
+export function layoutColumns(box, columns, strip, limit, 
+/** Where the strip starts: the content box's top, or under a box that
+ *  spans the columns (`spansColumns`). */
+top = box.contentY) {
+    const gathered = {
+        units: [],
+        lines: new Map(),
+        boxes: new Map(),
+        spans: new Map(),
+        loose: new Set(),
+    };
+    gather(box, gathered);
+    const groups = groupsOf(gathered.units);
+    // as far down as the content goes, past a box with a height it overflows:
+    // what stands out of a box takes room in a column as what is in it does
+    for (const group of groups)
+        strip = Math.max(strip, group.bottom - top);
+    let height;
+    let filled;
+    if (box.style.columnFill === 'auto') {
+        height = Number.isFinite(limit) ? limit : strip;
+        filled = fill(groups, top, height, height >= limit);
+        // a container with a `max-height` and less than a column of content
+        // is as tall as its content
+        if (filled.starts.length === 1)
+            height = Math.min(height, strip);
+    }
+    else {
+        // balanced: the strip shared out, and no shorter than the tallest
+        // thing that cannot break; then as much taller as lets the next thing
+        // in, until the columns there are hold it all
+        height = Math.min(limit, Math.max(strip / columns.count, tallestOf(groups)));
+        filled = fill(groups, top, height, height >= limit);
+        for (let pass = 0; pass < 4096; pass += 1) {
+            if (filled.starts.length <= columns.count && !filled.over)
+                break;
+            if (height >= limit || !Number.isFinite(filled.shortage))
+                break;
+            height = Math.min(limit, height + filled.shortage);
+            filled = fill(groups, top, height, height >= limit);
+        }
+    }
+    // all in one column where it started, and nothing to move — but a float
+    // that is cut where the column ends, which may reach past it
+    if (!gathered.loose.size && (!groups.length || filled.starts.length === 1)) {
+        return height;
+    }
+    // the column each group starts in, and the one it ends in
+    const { starts, tops, cut } = filled;
+    let c = 0;
+    for (let i = 0; i < groups.length; i += 1) {
+        while (c + 1 < starts.length &&
+            starts[c + 1] <= i &&
+            !(starts[c + 1] === i && cut[c + 1])) {
+            c += 1;
+        }
+        groups[i].column = c;
+        while (c + 1 < starts.length && starts[c + 1] === i && cut[c + 1])
+            c += 1;
+        groups[i].last = c;
+    }
+    const step = columns.width + columns.gap;
+    // the first column at the start of the line: the right, right to left
+    const rtl = box.style.direction === 'rtl';
+    const across = (c) => (rtl ? -c * step : c * step);
+    const origin = rtl ? box.contentWidth - columns.width : 0;
+    place(box, null, {
+        gathered,
+        tops,
+        height,
+        dx: (c) => origin + across(c),
+        dy: (c) => top - tops[c],
+    });
+    return height;
+}
+function shift(box, column, to) {
+    moveTo(box, box.x + to.dx(column), box.y + to.dy(column));
+}
+function shiftLine(line, dx, dy) {
+    line.x += dx;
+    line.y += dy;
+    for (const text of line.texts) {
+        text.drawX += dx;
+        text.drawY += dy;
+    }
+    for (const placed of line.atomics) {
+        placed.x += dx;
+        placed.y += dy;
+        moveTo(placed.box, placed.box.x + dx, placed.box.y + dy);
+    }
+    for (const edge of line.edges ?? [])
+        edge.x += dx;
+}
+/** The column a point down the strip is in, between boxes: at a break it
+ *  is in the column the break ends, which is where Blink leaves what is out
+ *  of the flow and stood before the box the next column starts with. */
+function columnAt(y, tops) {
+    let c = 0;
+    while (c + 1 < tops.length && tops[c + 1] < y - EPS)
+        c += 1;
+    return c;
+}
+/**
+ * Move what a box holds to its columns: the container's content, with no
+ * `span`, or that of a box a break falls inside, which is then its pieces.
+ */
+function place(box, span, to) {
+    const { gathered } = to;
+    const first = span ? span[0].group.column : 0;
+    const last = span ? span[1].group.last : to.tops.length - 1;
+    if (span && first === last && !gathered.loose.has(box)) {
+        shift(box, first, to);
+        return;
+    }
+    const was = { x: box.x, y: box.y, width: box.width, height: box.height };
+    const lines = box.lines;
+    // what is out of the flow goes from where it would have stood, which is
+    // kept from this box's corner: in the column of the line it would have
+    // been on, or of the boxes it would have been between
+    const asides = [];
+    const aside = (child) => {
+        const at = child.staticPosition;
+        if (!child.outOfFlow || !at || at.from !== box)
+            return;
+        const y = was.y + at.y;
+        let c = columnAt(y, to.tops);
+        if (lines?.length) {
+            let on = lines[0];
+            for (const line of lines) {
+                if (line.y > y + EPS)
+                    break;
+                on = line;
+            }
+            c = gathered.lines.get(on).group.column;
+        }
+        asides.push([child, Math.min(last, Math.max(first, c))]);
+    };
+    if (lines?.length)
+        eachAside(box, aside);
+    else
+        for (const child of box.children)
+            aside(child);
+    if (lines?.length) {
+        for (const line of lines) {
+            const c = gathered.lines.get(line).group.column;
+            shiftLine(line, to.dx(c), to.dy(c));
+        }
+        if (first !== last) {
+            COLUMN_LINES.add(lines);
+            rowsOf(lines, gathered);
+            columned.any = true;
+        }
+        eachAside(box, (aside) => {
+            const unit = gathered.boxes.get(aside);
+            if (unit)
+                place(aside, [unit, unit], to);
+            else if (aside.isFloat && !aside.outOfFlow)
+                cutFloat(aside, to);
+        });
+    }
+    else {
+        for (const child of box.children) {
+            // a box that goes whole, or is cut where it holds nothing
+            const unit = gathered.boxes.get(child);
+            const inner = unit ? [unit, unit] : undefined;
+            const range = inner ?? gathered.spans.get(child);
+            if (range)
+                place(child, range, to);
+            else if (child.isFloat && !child.outOfFlow)
+                cutFloat(child, to);
+        }
+    }
+    if (span && first === last) {
+        // in one column, with a float in it that went its own way: the box
+        // itself, which what it holds was moved without
+        box.x += to.dx(first);
+        box.y += to.dy(first);
+        if (box.marker) {
+            box.marker.x += to.dx(first);
+            box.marker.y += to.dy(first);
+        }
+    }
+    else if (span) {
+        const pieces = [];
+        let x1 = Infinity;
+        let y1 = Infinity;
+        let x2 = -Infinity;
+        let y2 = -Infinity;
+        for (let c = first; c <= last; c += 1) {
+            const from = c === first ? was.y : to.tops[c];
+            const until = c === last ? was.y + was.height : to.tops[c] + to.height;
+            const piece = {
+                x: was.x + to.dx(c),
+                y: from + to.dy(c),
+                width: was.width,
+                height: Math.max(0, until - from),
+                wholeY: was.y + to.dy(c),
+                wholeHeight: was.height,
+            };
+            pieces.push(piece);
+            x1 = Math.min(x1, piece.x);
+            y1 = Math.min(y1, piece.y);
+            x2 = Math.max(x2, piece.x + piece.width);
+            y2 = Math.max(y2, piece.y + piece.height);
+        }
+        COLUMN_PIECES.set(box, pieces);
+        columned.any = true;
+        if (box.marker) {
+            box.marker.x += to.dx(first);
+            box.marker.y += to.dy(first);
+        }
+        box.x = x1;
+        box.y = y1;
+        box.width = x2 - x1;
+        box.height = y2 - y1;
+    }
+    for (const [child, c] of asides) {
+        const at = child.staticPosition;
+        const width = at.right - at.x;
+        at.x = was.x + at.x + to.dx(c) - box.x;
+        at.right = at.x + width;
+        at.y = was.y + at.y + to.dy(c) - box.y;
+    }
+}
+/**
+ * A float that can be cut anywhere, set in the columns it reaches: from
+ * where it starts to the foot of that column, and then down each column
+ * after it from the top, as much of it as is left. By how much of it each
+ * column has taken, and not by where the strip has it: the flow beside it
+ * drops a margin at a break, and the float has none there to drop.
+ */
+function cutFloat(float, to) {
+    const { tops, height } = to;
+    let c = 0;
+    while (c + 1 < tops.length && tops[c + 1] <= float.y + EPS)
+        c += 1;
+    // past the foot of its column, in the margin a break dropped: at the
+    // head of the next
+    let at = float.y - tops[c];
+    if (at >= height - EPS && c + 1 < tops.length) {
+        c += 1;
+        at = 0;
+    }
+    const was = {
+        x: float.x,
+        y: float.y,
+        width: float.width,
+        height: float.height,
+    };
+    if (at + was.height <= height + EPS || !(height >= 1)) {
+        moveTo(float, was.x + to.dx(c), tops[0] + at);
+        return;
+    }
+    const pieces = [];
+    let taken = 0;
+    let x1 = Infinity;
+    let x2 = -Infinity;
+    let y2 = -Infinity;
+    const head = tops[0];
+    for (let k = c; taken < was.height - EPS; k += 1) {
+        const from = k === c ? at : 0;
+        const part = Math.min(was.height - taken, height - from);
+        const x = was.x + to.dx(k);
+        pieces.push({
+            x,
+            y: head + from,
+            width: was.width,
+            height: part,
+            wholeY: head + from - taken,
+            wholeHeight: was.height,
+        });
+        x1 = Math.min(x1, x);
+        x2 = Math.max(x2, x + was.width);
+        y2 = Math.max(y2, head + from + part);
+        taken += part;
+        if (pieces.length >= MOST_COLUMNS)
+            break;
+    }
+    COLUMN_PIECES.set(float, pieces);
+    columned.any = true;
+    float.x = x1;
+    float.y = Math.min(head + at, head);
+    float.width = x2 - x1;
+    float.height = y2 - float.y;
+}
+/**
+ * The rows each text's layout has in each column, for the layouts whose
+ * lines columns took apart (`COLUMN_ROWS`).
+ */
+function rowsOf(lines, gathered) {
+    const byLayout = new Map();
+    for (const line of lines) {
+        const c = gathered.lines.get(line).group.column;
+        for (const text of line.texts) {
+            let columns = byLayout.get(text.layout);
+            if (!columns)
+                byLayout.set(text.layout, (columns = new Map()));
+            const texts = columns.get(c);
+            if (texts)
+                texts.push(text);
+            else
+                columns.set(c, [text]);
+        }
+    }
+    for (const [layout, columns] of byLayout) {
+        if (columns.size < 2)
+            continue;
+        const end = layout.lines.length - 1;
+        for (const texts of columns.values()) {
+            let top = Infinity;
+            let bottom = -Infinity;
+            let open = 0;
+            for (const text of texts) {
+                const natural = layout.lines[text.layoutLine];
+                if (!natural)
+                    continue;
+                top = Math.min(top, natural.y);
+                bottom = Math.max(bottom, natural.y + natural.height);
+                if (text.layoutLine === 0)
+                    open |= 1;
+                if (text.layoutLine === end)
+                    open |= 2;
+            }
+            if (top === Infinity)
+                continue;
+            const rows = {
+                top: open & 1 ? top - REACH : top,
+                bottom: open & 2 ? bottom + REACH : bottom,
+            };
+            for (const text of texts)
+                COLUMN_ROWS.set(text, rows);
+        }
+    }
+}
+/**
+ * Whether a box is set across all the columns of the multicol container it
+ * is a child of (`column-span: all`, CSS Multi-column 1, 6): a block-level
+ * box in its flow. One further in, in a box of the container's, is set in its column
+ * as it would be without: the box around it is not broken about it here.
+ */
+export function spansColumns(box) {
+    return (box.style.columnSpan &&
+        flows(box) &&
+        // block-level: on an inline-block it does nothing
+        !box.style.display.startsWith('inline'));
+}
+/** Forget the pieces an earlier layout broke a box's content in, where
+ *  this one sets it in one column. */
+export function forgetColumns(box) {
+    if (!columned.any)
+        return;
+    for (const child of box.children) {
+        if (!flows(child) || child.kind !== 'block')
+            continue;
+        if (COLUMN_PIECES.delete(child) || !whole(child))
+            forgetColumns(child);
+    }
+}
+//# sourceMappingURL=multicol.js.map