Expand description
Box background-fill rendering — port of ink’s render-background.ts.
Paints a box node’s backgroundColor as a rectangle FILL over the CONTENT
area (the region inside any border cells), row by row. The M1/M2 port only
colorized Text spans, so an oversized box (padding, or a sized box larger
than its text) left its non-text cells unfilled, diverging from ink which
paints the whole content rectangle.
§Source (render-background.ts:5-50)
if (!node.style.backgroundColor) return;
const width = node.yogaNode!.getComputedWidth();
const height = node.yogaNode!.getComputedHeight();
const leftBorderWidth = node.style.borderStyle && node.style.borderLeft !== false ? 1 : 0;
const rightBorderWidth = node.style.borderStyle && node.style.borderRight !== false ? 1 : 0;
const topBorderHeight = node.style.borderStyle && node.style.borderTop !== false ? 1 : 0;
const bottomBorderHeight = node.style.borderStyle && node.style.borderBottom !== false ? 1 : 0;
const contentWidth = width - leftBorderWidth - rightBorderWidth;
const contentHeight = height - topBorderHeight - bottomBorderHeight;
if (!(contentWidth > 0 && contentHeight > 0)) return;
const backgroundLine = colorize(' '.repeat(contentWidth), node.style.backgroundColor, 'background');
for (let row = 0; row < contentHeight; row++) {
output.write(x + leftBorderWidth, y + topBorderHeight + row, backgroundLine, {transformers: []});
}§Border insets — shared formula
The per-edge inset (borderStyle present && border{Edge} !== false ? 1 : 0)
is byte-identical to Style::border_edges / render_border’s edge-show
logic (border.rs:187-190). Computing it inline here keeps the 1:1 mapping to
the ink source visible; both reduce to the same predicate.
§Ordering (render-node-to-output.ts:163-164)
ink calls renderBackground THEN renderBorder; the walk mirrors that. The
fill covers the content area inside borders and the border draws the edges —
disjoint regions — but background-before-border is the defensive order: a
last-writer-wins grid lets the border correct any off-by-one inset. Children
(Text) recurse AFTER both, so for a content-sized box the text fully overwrites
the fill and the frame is unchanged; the fill is visible only in padding /
oversized cells.
Functions§
- render_
background - Draw a box node’s
backgroundColorrectangle FILL intogrid.