world| hello'|cha -T text/html
# is rendered as:
# hello
# world
var thead: seq[BlockBox] = @[]
var tbody: seq[BlockBox] = @[]
var tfoot: seq[BlockBox] = @[]
for child in table.nested:
assert child.computed{"display"} in ProperTableChild
case child.computed{"display"}
of DisplayTableRow: tbody.add(child)
of DisplayTableHeaderGroup: thead.add(child.nested)
of DisplayTableRowGroup: tbody.add(child.nested)
of DisplayTableFooterGroup: tfoot.add(child.nested)
else: assert false
tctx.preLayoutTableRows(thead, table)
tctx.preLayoutTableRows(tbody, table)
tctx.preLayoutTableRows(tfoot, table)
func calcSpecifiedRatio(tctx: TableContext; W: LayoutUnit): LayoutUnit =
var totalSpecified: LayoutUnit = 0
var hasUnspecified = false
for col in tctx.cols:
if col.wspecified:
totalSpecified += col.width
else:
hasUnspecified = true
totalSpecified += col.minwidth
# Only grow specified columns if no unspecified column exists to take the
# rest of the space.
if totalSpecified == 0 or W > totalSpecified and hasUnspecified:
return 1
return W / totalSpecified
proc calcUnspecifiedColIndices(tctx: var TableContext; W: var LayoutUnit;
weight: var float64): seq[int] =
let specifiedRatio = tctx.calcSpecifiedRatio(W)
# Spacing for each column:
var avail = newSeqUninitialized[int](tctx.cols.len)
var j = 0
for i, col in tctx.cols.mpairs:
if not col.wspecified:
avail[j] = i
let w = if col.width < W:
toFloat64(col.width)
else:
toFloat64(W) * (ln(toFloat64(col.width) / toFloat64(W)) + 1)
col.weight = w
weight += w
inc j
else:
if specifiedRatio != 1:
col.width *= specifiedRatio
col.reflow = true
W -= col.width
avail.del(j)
return avail
func needsRedistribution(tctx: TableContext; computed: CSSComputedValues):
bool =
case tctx.space.w.t
of scMinContent, scMaxContent:
return false
of scStretch:
return tctx.space.w.u != tctx.maxwidth
of scFitContent:
let u = tctx.space.w.u
return u > tctx.maxwidth and not computed{"width"}.auto or u < tctx.maxwidth
proc redistributeWidth(tctx: var TableContext) =
# Remove inline spacing from distributable width.
var W = tctx.space.w.u - tctx.cols.len * tctx.inlineSpacing * 2
var weight = 0f64
var avail = tctx.calcUnspecifiedColIndices(W, weight)
var redo = true
while redo and avail.len > 0 and weight != 0:
if weight == 0: break # zero weight; nothing to distribute
if W < 0:
W = 0
redo = false
# divide delta width by sum of ln(width) for all elem in avail
let unit = toFloat64(W) / weight
weight = 0
for i in countdown(avail.high, 0):
let j = avail[i]
let x = (unit * tctx.cols[j].weight).toLayoutUnit()
let mw = tctx.cols[j].minwidth
tctx.cols[j].width = x
if mw > x:
W -= mw
tctx.cols[j].width = mw
avail.del(i)
redo = true
else:
weight += tctx.cols[j].weight
tctx.cols[j].reflow = true
proc reflowTableCells(tctx: var TableContext) =
for i in countdown(tctx.rows.high, 0):
var row = addr tctx.rows[i]
var n = tctx.cols.len - 1
for j in countdown(row.cells.high, 0):
let m = n - row.cells[j].colspan
while n > m:
if tctx.cols[n].reflow:
row.cells[j].reflow = true
if n < row.reflow.len and row.reflow[n]:
tctx.cols[n].reflow = true
dec n
proc layoutTableRows(tctx: TableContext; table: BlockBox;
sizes: ResolvedSizes) =
var y: LayoutUnit = 0
for roww in tctx.rows:
if roww.box.computed{"visibility"} == VisibilityCollapse:
continue
y += tctx.blockSpacing
let row = roww.box
tctx.layoutTableRow(roww, table, row)
row.state.offset.y += y
row.state.offset.x += sizes.padding.left
row.state.size.w += sizes.padding[dtHorizontal].sum()
# row size does not change from here on.
row.state.overflow.finalize(row.state.size)
y += tctx.blockSpacing
y += row.state.size.h
table.state.size.w = max(row.state.size.w, table.state.size.w)
table.state.size.h = applySizeConstraint(y, sizes.space.h)
proc layoutCaption(tctx: TableContext; parent, box: BlockBox) =
let space = availableSpace(w = stretch(parent.state.size.w), h = maxContent())
var marginBottomOut: LayoutUnit
tctx.lctx.layoutRootBlock(box, space, offset(x = 0, y = 0), marginBottomOut)
box.state.offset.x += box.state.margin.left
box.state.offset.y += box.state.margin.top
let outerHeight = box.outerSize(dtVertical) + marginBottomOut
let outerWidth = box.outerSize(dtHorizontal)
let table = parent.nested[0]
case box.computed{"caption-side"}
of CaptionSideTop, CaptionSideBlockStart:
table.state.offset.y += outerHeight
of CaptionSideBottom, CaptionSideBlockEnd:
box.state.offset.y += table.state.size.h
parent.state.size.h += outerHeight
parent.state.size.w = max(parent.state.size.w, outerWidth)
# Table layout. We try to emulate w3m's behavior here:
# 1. Calculate minimum and preferred width of each column
# 2. If column width is not auto, set width to max(min_col_width, specified)
# 3. Calculate the maximum preferred row width. If this is
# a) less than the specified table width, or
# b) greater than the table's content width:
# Distribute the table's content width among cells with an unspecified
# width. If this would give any cell a width < min_width, set that
# cell's width to min_width, then re-do the distribution.
proc layoutTable(tctx: var TableContext; table: BlockBox;
sizes: ResolvedSizes) =
let lctx = tctx.lctx
if table.computed{"border-collapse"} != BorderCollapseCollapse:
tctx.inlineSpacing = table.computed{"border-spacing"}.a.px(lctx)
tctx.blockSpacing = table.computed{"border-spacing"}.b.px(lctx)
tctx.preLayoutTableRows(table) # first pass
if tctx.needsRedistribution(table.computed):
tctx.redistributeWidth()
for col in tctx.cols:
table.state.size.w += col.width
tctx.reflowTableCells()
tctx.layoutTableRows(table, sizes) # second pass
# As per standard, we must put the caption outside the actual table, inside a
# block-level wrapper box.
proc layoutTableWrapper(bctx: BlockContext; box: BlockBox;
sizes: ResolvedSizes) =
let table = box.nested[0]
table.state = BlockBoxLayoutState()
var tctx = TableContext(lctx: bctx.lctx, space: sizes.space)
tctx.layoutTable(table, sizes)
box.state.size = table.state.size
box.state.baseline = table.state.size.h
box.state.firstBaseline = table.state.size.h
if box.nested.len > 1:
# do it here, so that caption's box can stretch to our width
let caption = box.nested[1]
#TODO also count caption width in table width
tctx.layoutCaption(box, caption)
#TODO overflow
proc postAlignChild(box, child: BlockBox; width: LayoutUnit) =
case box.computed{"text-align"}
of TextAlignChaCenter:
child.state.offset.x += max(width div 2 - child.state.size.w div 2, 0)
of TextAlignChaRight:
child.state.offset.x += max(width - child.state.size.w -
child.state.margin.right, 0)
else: # TextAlignChaLeft or not block-aligned
discard
proc layout(bctx: var BlockContext; box: BlockBox; sizes: ResolvedSizes) =
case box.computed{"display"}
of DisplayBlock, DisplayFlowRoot, DisplayTableCaption:
bctx.layoutFlow(box, sizes)
of DisplayListItem:
bctx.layoutListItem(box, sizes)
of DisplayTableWrapper:
bctx.layoutTableWrapper(box, sizes)
of DisplayFlex:
bctx.layoutFlex(box, sizes)
else:
assert false
proc layoutFlexChild(lctx: LayoutContext; box: BlockBox; sizes: ResolvedSizes) =
var bctx = BlockContext(lctx: lctx)
# note: we do not append margins here, since those belong to the flex item,
# not its inner BFC.
box.state = BlockBoxLayoutState(
offset: offset(x = sizes.margin.left, y = 0),
margin: sizes.margin,
positioned: sizes.positioned
)
bctx.layout(box, sizes)
assert bctx.unpositionedFloats.len == 0
# If the highest float edge is higher than the box itself, set that as
# the box height.
box.state.size.h = max(box.state.size.h, bctx.maxFloatHeight)
type
FlexWeightType = enum
fwtGrow, fwtShrink
FlexPendingItem = object
child: BlockBox
weights: array[FlexWeightType, float64]
sizes: ResolvedSizes
FlexContext = object
mains: seq[FlexMainContext]
offset: Offset
lctx: LayoutContext
totalMaxSize: Size
box: BlockBox
relativeChildren: seq[BlockBox]
FlexMainContext = object
totalSize: Size
maxSize: Size
maxMargin: RelativeRect
totalWeight: array[FlexWeightType, float64]
pending: seq[FlexPendingItem]
const FlexRow = {FlexDirectionRow, FlexDirectionRowReverse}
# This is practically the min-content size. For height, we just take the
# output height of the previous pass; for width, we take the shortest word's
# width (xminwidth).
func minFlexItemSize(state: BlockBoxLayoutState; dim: DimensionType):
LayoutUnit =
case dim
of dtHorizontal: return state.xminwidth
of dtVertical: return state.size.h
proc updateMaxSizes(mctx: var FlexMainContext; child: BlockBox) =
for dim in DimensionType:
mctx.maxSize[dim] = max(mctx.maxSize[dim], child.state.size[dim])
mctx.maxMargin[dim].start = max(mctx.maxMargin[dim].start,
child.state.margin[dim].start)
mctx.maxMargin[dim].send = max(mctx.maxMargin[dim].send,
child.state.margin[dim].send)
proc redistributeMainSize(mctx: var FlexMainContext; sizes: ResolvedSizes;
dim: DimensionType; lctx: LayoutContext) =
let odim = dim.opposite
if sizes.space[dim].isDefinite:
var diff = sizes.space[dim].u - mctx.totalSize[dim]
let wt = if diff > 0: fwtGrow else: fwtShrink
var totalWeight = mctx.totalWeight[wt]
while (wt == fwtGrow and diff > 0 or wt == fwtShrink and diff < 0) and
totalWeight > 0:
# redo maxSize calculation; we only need height here
mctx.maxSize[odim] = 0
let unit = diff.toFloat64() / totalWeight
# reset total weight & available diff for the next iteration (if there is
# one)
totalWeight = 0
diff = 0
for it in mctx.pending.mitems:
if it.weights[wt] == 0:
mctx.updateMaxSizes(it.child)
continue
var u = it.child.state.size[dim] +
(unit * it.weights[wt]).toLayoutUnit()
# check for min/max violation
var minu = it.sizes.minMaxSizes[dim].start
minu = max(it.child.state.minFlexItemSize(dim), minu)
if minu > u:
# min violation
if wt == fwtShrink: # freeze
diff += u - minu
it.weights[wt] = 0
u = minu
let maxu = it.sizes.minMaxSizes[dim].send
if maxu < u:
# max violation
if wt == fwtGrow: # freeze
diff += u - maxu
it.weights[wt] = 0
u = maxu
it.sizes.space[dim] = stretch(u - it.sizes.padding[dim].sum())
totalWeight += it.weights[wt]
#TODO we should call this only on freeze, and then put another loop to
# the end for non-frozen items
lctx.layoutFlexChild(it.child, it.sizes)
mctx.updateMaxSizes(it.child)
proc flushMain(fctx: var FlexContext; mctx: var FlexMainContext;
sizes: ResolvedSizes; dim: DimensionType) =
let odim = dim.opposite
let lctx = fctx.lctx
mctx.redistributeMainSize(sizes, dim, lctx)
let h = mctx.maxSize[odim] + mctx.maxMargin[odim].sum()
var offset = fctx.offset
for it in mctx.pending.mitems:
if it.child.state.size[odim] < h and not it.sizes.space[odim].isDefinite:
# if the max height is greater than our height, then take max height
# instead. (if the box's available height is definite, then this will
# change nothing, so we skip it as an optimization.)
it.sizes.space[odim] = stretch(h - it.sizes.margin[odim].sum())
lctx.layoutFlexChild(it.child, it.sizes)
it.child.state.offset[dim] += offset[dim]
# margins are added here, since they belong to the flex item.
it.child.state.offset[odim] += offset[odim] +
it.child.state.margin[odim].start
offset[dim] += it.child.state.size[dim]
offset[dim] += it.child.state.margin[dim].send
if it.child.computed{"position"} == PositionRelative:
fctx.relativeChildren.add(it.child)
else:
fctx.box.applyOverflowDimensions(it.child)
fctx.totalMaxSize[dim] = max(fctx.totalMaxSize[dim], offset[dim])
fctx.mains.add(mctx)
mctx = FlexMainContext()
fctx.offset[odim] += h
proc layoutFlex(bctx: var BlockContext; box: BlockBox; sizes: ResolvedSizes) =
assert box.inline == nil
let lctx = bctx.lctx
lctx.pushPositioned(box, sizes)
var fctx = FlexContext(
lctx: lctx,
box: box,
offset: offset(x = sizes.padding.left, y = sizes.padding.top)
)
var mctx = FlexMainContext()
let flexDir = box.computed{"flex-direction"}
let canWrap = box.computed{"flex-wrap"} != FlexWrapNowrap
let dim = if flexDir in FlexRow: dtHorizontal else: dtVertical
for child in box.nested:
var childSizes = lctx.resolveFlexItemSizes(sizes.space, dim, child.computed)
let flexBasis = child.computed{"flex-basis"}
lctx.layoutFlexChild(child, childSizes)
if not flexBasis.auto and childSizes.space[dim].isDefinite:
# we can't skip this pass; the first pass is needed to calculate the
# minimum height.
let minu = child.state.minFlexItemSize(dim)
childSizes.space[dim] = stretch(flexBasis.spx(lctx, sizes.space[dim],
child.computed, childSizes.padding[dim].sum()))
if minu > childSizes.space[dim].u:
# First pass gave us a box that is smaller than the minimum acceptable
# width whatever reason; this may have happened because the initial flex
# basis was e.g. 0. Try to resize it to something more usable.
childSizes.space[dim] = stretch(minu)
lctx.layoutFlexChild(child, childSizes)
if child.computed{"position"} == PositionAbsolute:
# Absolutely positioned flex children do not participate in flex layout.
# I suspect this is a bit too simplistic, but seems to work?
child.positionAbsolute()
continue
if canWrap and (sizes.space[dim].t == scMinContent or
sizes.space[dim].isDefinite and
mctx.totalSize[dim] + child.state.size[dim] > sizes.space[dim].u):
fctx.flushMain(mctx, sizes, dim)
mctx.totalSize[dim] += child.outerSize(dim)
mctx.updateMaxSizes(child)
let grow = child.computed{"flex-grow"}
let shrink = child.computed{"flex-shrink"}
mctx.totalWeight[fwtGrow] += grow
mctx.totalWeight[fwtShrink] += shrink
mctx.pending.add(FlexPendingItem(
child: child,
weights: [grow, shrink],
sizes: childSizes
))
if mctx.pending.len > 0:
fctx.flushMain(mctx, sizes, dim)
box.applySize(sizes, fctx.totalMaxSize[dim], sizes.space, dim)
box.applySize(sizes, fctx.offset[dim.opposite], sizes.space, dim.opposite)
for child in fctx.relativeChildren:
lctx.positionRelative(box, child)
box.applyOverflowDimensions(child)
box.state.overflow.finalize(box.state.size)
lctx.popPositioned(box)
# Build an outer block box inside an existing block formatting context.
proc layoutBlockChild(bctx: var BlockContext; box: BlockBox;
space: AvailableSpace; offset: Offset; appendMargins: bool) =
let sizes = bctx.lctx.resolveSizes(space, box.computed)
if appendMargins:
# for nested blocks that do not establish their own BFC, and thus take part
# in margin collapsing.
bctx.marginTodo.append(sizes.margin.top)
box.state = BlockBoxLayoutState(
offset: offset(x = offset.x + sizes.margin.left, y = offset.y),
margin: sizes.margin,
positioned: sizes.positioned
)
bctx.layout(box, sizes)
if appendMargins:
bctx.marginTodo.append(sizes.margin.bottom)
# Inner layout for boxes that establish a new block formatting context.
proc layoutRootBlock(lctx: LayoutContext; box: BlockBox;
space: AvailableSpace; offset: Offset; marginBottomOut: var LayoutUnit) =
var bctx = BlockContext(lctx: lctx)
bctx.layoutBlockChild(box, space, offset, appendMargins = false)
assert bctx.unpositionedFloats.len == 0
marginBottomOut = bctx.marginTodo.sum()
# If the highest float edge is higher than the box itself, set that as
# the box height.
box.state.size.h = max(box.state.size.h, bctx.maxFloatHeight -
marginBottomOut)
proc initBlockPositionStates(state: var BlockState; bctx: var BlockContext;
box: BlockBox) =
let prevBps = bctx.ancestorsHead
bctx.ancestorsHead = BlockPositionState(
box: box,
offset: state.offset,
resolved: bctx.parentBps == nil
)
if prevBps != nil:
prevBps.next = bctx.ancestorsHead
if bctx.parentBps != nil:
bctx.ancestorsHead.offset += bctx.parentBps.offset
# If parentBps is not nil, then our starting position is not in a new
# BFC -> we must add it to our BFC offset.
bctx.ancestorsHead.offset += box.state.offset
if bctx.marginTarget == nil:
bctx.marginTarget = bctx.ancestorsHead
state.initialMarginTarget = bctx.marginTarget
state.initialTargetOffset = bctx.marginTarget.offset
if bctx.parentBps == nil:
# We have just established a new BFC. Resolve the margins instantly.
bctx.marginTarget = nil
state.prevParentBps = bctx.parentBps
bctx.parentBps = bctx.ancestorsHead
state.initialParentOffset = bctx.parentBps.offset
func isParentResolved(state: BlockState; bctx: BlockContext): bool =
return bctx.marginTarget != state.initialMarginTarget or
state.prevParentBps != nil and state.prevParentBps.resolved
# Note: this does not include display types that cannot appear as block
# children.
func establishesBFC(computed: CSSComputedValues): bool =
return computed{"float"} != FloatNone or
computed{"position"} == PositionAbsolute or
computed{"display"} in {DisplayFlowRoot, DisplayTable, DisplayTableWrapper,
DisplayFlex} or
computed{"overflow"} notin {OverflowVisible, OverflowClip}
#TODO contain, grid, multicol, column-span
# Outer layout for block-level children that establish a BFC.
# Returns the vertical size used (incl. margins).
proc layoutBlockChildBFC(state: var BlockState; bctx: var BlockContext;
child: BlockBox): LayoutUnit =
var marginBottomOut: LayoutUnit
bctx.lctx.layoutRootBlock(child, state.space, state.offset,
marginBottomOut)
# Do not collapse margins of elements that do not participate in
# the flow.
if child.computed{"position"} != PositionAbsolute and
child.computed{"float"} == FloatNone:
bctx.marginTodo.append(child.state.margin.top)
bctx.flushMargins(child)
bctx.positionFloats()
bctx.marginTodo.append(child.state.margin.bottom)
if child.computed{"clear"} != ClearNone:
state.offset.clearFloats(bctx, child.computed{"clear"})
if bctx.exclusions.len > 0:
# Consulting the standard for an important edge case... (abridged)
#
# > The border box of an element that establishes a new BFC must not
# > overlap the margin box of any floats in the same BFC as the
# > element itself. If necessary, implementations should clear the
# > said element, but may place it adjacent to such floats if there
# > is sufficient space. CSS2 does not define when a UA may put said
# > element next to the float.
#
# ...as expected. Thanks for nothing.
#
# OK here's what we do:
# * run a normal pass
# * place the longest word (i.e. xminwidth) somewhere
# * run another pass with the placement we got
#
# I suspect this breaks horribly on some layouts, but I don't care
# enough to make this convoluted garbage even more complex.
#
# Note that we do this only for elements in the flow. FF yanks
# absolutely positioned elements on top of floats, and so do we.
let pbfcOffset = bctx.bfcOffset
let bfcOffset = offset(
x = pbfcOffset.x + child.state.offset.x,
y = max(pbfcOffset.y + child.state.offset.y, bctx.clearOffset)
)
let minSize = size(w = child.state.xminwidth, h = bctx.lctx.attrs.ppl)
var outw: LayoutUnit
let offset = bctx.findNextBlockOffset(bfcOffset, minSize,
state.space, outw)
let space = availableSpace(w = stretch(outw), h = state.space.h)
bctx.lctx.layoutRootBlock(child, space, offset - pbfcOffset,
marginBottomOut)
else:
child.state.offset.y += child.state.margin.top
if state.isParentResolved(bctx):
# If parent offset has been resolved, use marginTodo in this
# float's initial offset.
child.state.offset.y += bctx.marginTodo.sum()
# delta y is difference between old and new offsets (margin-top), sum
# of margin todo in bctx2 (margin-bottom) + height.
return child.state.offset.y - state.offset.y + child.state.size.h +
marginBottomOut
# Layout and place all children in the block box.
# Box placement must occur during this pass, since child box layout in the
# same block formatting context depends on knowing where the box offset is
# (because of floats).
proc layoutBlockChildren(state: var BlockState; bctx: var BlockContext;
parent: BlockBox) =
for child in parent.nested:
var dy: LayoutUnit = 0 # delta
if child.computed.establishesBFC():
dy = state.layoutBlockChildBFC(bctx, child)
else:
bctx.layoutBlockChild(child, state.space, state.offset,
appendMargins = true)
# delta y is difference between old and new offsets (margin-top),
# plus height.
dy = child.state.offset.y - state.offset.y + child.state.size.h
let childWidth = child.outerSize(dtHorizontal)
state.xminwidth = max(state.xminwidth, child.state.xminwidth)
let isfloat = child.computed{"float"} != FloatNone
if child.computed{"position"} != PositionAbsolute and not isfloat:
# Not absolute, and not a float.
state.maxChildWidth = max(state.maxChildWidth, childWidth)
state.offset.y += dy
elif isfloat:
if state.space.w.t == scFitContent:
# Float position depends on the available width, but in this case
# the parent width is not known.
#
# Set the "re-layout" flag, and skip this box.
# (If child boxes with fit-content have floats, those will be
# re-layouted too first, so we do not have to consider those here.)
state.needsReLayout = true
# Since we emulate max-content here, the float will not contribute to
# maxChildWidth in this iteration; instead, its outer width will be
# summed up in totalFloatWidth and added to maxChildWidth in
# initReLayout.
state.totalFloatWidth += childWidth
continue
state.maxChildWidth = max(state.maxChildWidth, childWidth)
# Two cases exist:
# a) The float cannot be positioned, because `box' has not resolved
# its y offset yet. (e.g. if float comes before the first child,
# we do not know yet if said child will move our y offset with a
# margin-top value larger than ours.)
# In this case we put it in unpositionedFloats, and defer positioning
# until our y offset is resolved.
# b) `box' has resolved its y offset, so the float can already
# be positioned.
# We check whether our y offset has been positioned as follows:
# * save marginTarget in BlockState at layoutBlock's start
# * if our saved marginTarget and bctx's marginTarget no longer point
# to the same object, that means our (or an ancestor's) offset has
# been resolved, i.e. we can position floats already.
if bctx.marginTarget != state.initialMarginTarget:
# y offset resolved
bctx.positionFloat(child, state.space, bctx.parentBps.offset)
else:
bctx.unpositionedFloats.add(UnpositionedFloat(
space: state.space,
parentBps: bctx.parentBps,
box: child,
parentBox: parent
))
# Unlucky path, where we have floating blocks and a fit-content width.
# Reset marginTodo & the starting offset, and stretch the box to the
# max child width.
proc initReLayout(state: var BlockState; bctx: var BlockContext;
box: BlockBox; sizes: ResolvedSizes) =
bctx.marginTodo = state.oldMarginTodo
# Note: we do not reset our own BlockPositionState's offset; we assume it
# has already been resolved in the previous pass.
# (If not, it won't be resolved in this pass either, so the following code
# does not really change anything.)
bctx.parentBps.next = nil
if state.initialMarginTarget != bctx.marginTarget:
# Reset the initial margin target to its previous state, and then set
# it as the marginTarget again.
# Two solutions exist:
# a) Store the initial margin target offset, then restore it here. Seems
# clean, but it would require a linked list traversal to update all
# child margin positions.
# b) Re-use the previous margin target offsets; they are guaranteed
# to remain the same, because out-of-flow elements (like floats) do not
# participate in margin resolution. We do this by setting the margin
# target to a dummy object, which is a small price to pay compared
# to solution a).
bctx.marginTarget = BlockPositionState(
# Use initialTargetOffset to emulate the BFC positioning of the
# previous pass.
offset: state.initialTargetOffset
)
# Also set ancestorsHead as the dummy object, so next elements are
# chained to that.
bctx.ancestorsHead = bctx.marginTarget
bctx.exclusions.setLen(state.oldExclusionsLen)
state.offset = offset(x = sizes.padding.left, y = sizes.padding.top)
box.applyWidth(sizes, state.maxChildWidth + state.totalFloatWidth)
# Positioning of the children will differ now; reset the overflow offsets.
for dim in DimensionType:
box.state.overflow[dim] = Span()
state.space.w = stretch(box.state.size.w)
# Re-position the children.
# The x offset with a fit-content width depends on the parent box's width,
# so we cannot do this in the first pass.
proc repositionChildren(state: BlockState; box: BlockBox; lctx: LayoutContext) =
for child in box.nested:
if child.computed{"position"} != PositionAbsolute:
box.postAlignChild(child, box.state.size.w)
case child.computed{"position"}
of PositionRelative:
lctx.positionRelative(box, child)
of PositionAbsolute:
child.positionAbsolute()
else: discard #TODO
# Set overflow here, after the child has been positioned.
box.applyOverflowDimensions(child)
proc layoutBlock(bctx: var BlockContext; box: BlockBox; sizes: ResolvedSizes) =
let lctx = bctx.lctx
lctx.pushPositioned(box, sizes)
var state = BlockState(
offset: offset(x = sizes.padding.left, y = sizes.padding.top),
space: sizes.space,
oldMarginTodo: bctx.marginTodo,
oldExclusionsLen: bctx.exclusions.len
)
state.initBlockPositionStates(bctx, box)
state.layoutBlockChildren(bctx, box)
if state.needsReLayout:
state.initReLayout(bctx, box, sizes)
state.layoutBlockChildren(bctx, box)
if box.nested.len > 0:
let lastNested = box.nested[^1]
box.state.baseline = lastNested.state.offset.y + lastNested.state.baseline
# Apply width, and height. For height, temporarily remove padding we have
# applied before so that percentage resolution works correctly.
# then move the inline offset of children that still need
box.applyWidth(sizes, state.maxChildWidth, state.space)
box.applyHeight(sizes, state.offset.y - sizes.padding.top)
# Reposition here, as `position: relative' percentages can now be resolved.
state.repositionChildren(box, lctx)
# Add padding; we cannot do this further up without influencing positioning.
box.applyPadding(sizes.padding)
# Pass down relevant data from state.
box.state.xminwidth = state.xminwidth
if state.isParentResolved(bctx):
# Our offset has already been resolved, ergo any margins in marginTodo will
# be passed onto the next box. Set marginTarget to nil, so that if we (or
# one of our ancestors) were still set as a marginTarget, we no longer are.
bctx.positionFloats()
bctx.marginTarget = nil
# All children are positioned now; finalize our overflow dimensions.
box.state.overflow.finalize(box.state.size)
# Reset parentBps to the previous node.
bctx.parentBps = state.prevParentBps
lctx.popPositioned(box)
# 1st pass: build tree
proc newMarkerBox(computed: CSSComputedValues; listItemCounter: int):
InlineFragment =
let computed = computed.inheritProperties()
computed{"display"} = DisplayInline
# Use pre, so the space at the end of the default markers isn't ignored.
computed{"white-space"} = WhitespacePre
let s = computed{"list-style-type"}.listMarker(listItemCounter)
return InlineFragment(
t: iftText,
computed: computed,
text: newStyledText(s)
)
type InnerBlockContext = object
styledNode: StyledNode
outer: BlockBox
lctx: LayoutContext
anonRow: BlockBox
anonTableWrapper: BlockBox
inlineAnonRow: BlockBox
inlineAnonTableWrapper: BlockBox
quoteLevel: int
listItemCounter: int
listItemReset: bool
parent: ptr InnerBlockContext
inlineStack: seq[StyledNode]
inlineStackFragments: seq[InlineFragment]
# if inline is not nil, then inline.children.len > 0
inline: RootInlineFragment
proc flushTable(ctx: var InnerBlockContext)
proc flushInlineGroup(ctx: var InnerBlockContext) =
if ctx.inline != nil:
ctx.flushTable()
let computed = ctx.outer.computed.inheritProperties()
computed{"display"} = DisplayBlock
let box = BlockBox(computed: computed, inline: ctx.inline)
ctx.outer.nested.add(box)
ctx.inline = nil
# Don't build empty anonymous inline blocks between block boxes
func canBuildAnonInline(ctx: InnerBlockContext; computed: CSSComputedValues;
str: string): bool =
return ctx.inline != nil and ctx.inline.fragment.children.len > 0 or
computed.whitespacepre or not str.onlyWhitespace()
proc buildBlock(ctx: var InnerBlockContext)
proc buildTable(ctx: var InnerBlockContext)
proc buildFlex(ctx: var InnerBlockContext)
proc buildInlineBoxes(ctx: var InnerBlockContext; styledNode: StyledNode;
computed: CSSComputedValues)
proc buildTableRowGroup(parent: var InnerBlockContext; styledNode: StyledNode;
computed: CSSComputedValues): BlockBox
proc buildTableRow(parent: var InnerBlockContext; styledNode: StyledNode;
computed: CSSComputedValues): BlockBox
proc buildTableCell(parent: var InnerBlockContext; styledNode: StyledNode;
computed: CSSComputedValues): BlockBox
proc buildTableCaption(parent: var InnerBlockContext; styledNode: StyledNode;
computed: CSSComputedValues): BlockBox
proc newInnerBlockContext(styledNode: StyledNode; box: BlockBox;
lctx: LayoutContext; parent: ptr InnerBlockContext): InnerBlockContext
proc pushInline(ctx: var InnerBlockContext; fragment: InlineFragment)
func toTableWrapper(display: CSSDisplay): CSSDisplay =
if display == DisplayTable:
return DisplayTableWrapper
assert display == DisplayInlineTable
return DisplayInlineTableWrapper
proc createAnonTable(ctx: var InnerBlockContext; computed: CSSComputedValues):
BlockBox =
let inline = ctx.inlineStack.len > 0
if not inline and ctx.anonTableWrapper == nil or
inline and ctx.inlineAnonTableWrapper == nil:
let inherited = computed.inheritProperties()
let (outerComputed, innerComputed) = inherited.splitTable()
outerComputed{"display"} = if inline:
DisplayInlineTableWrapper
else:
DisplayTableWrapper
let innerTable = BlockBox(computed: innerComputed)
let box = BlockBox(
computed: outerComputed,
nested: @[innerTable]
)
if inline:
ctx.inlineAnonTableWrapper = box
else:
ctx.anonTableWrapper = box
return box
if inline:
return ctx.inlineAnonTableWrapper
return ctx.anonTableWrapper
proc createAnonRow(ctx: var InnerBlockContext): BlockBox =
let inline = ctx.inlineStack.len > 0
if not inline and ctx.anonRow == nil or
inline and ctx.inlineAnonRow == nil:
let wrapperVals = ctx.outer.computed.inheritProperties()
wrapperVals{"display"} = DisplayTableRow
let box = BlockBox(computed: wrapperVals)
if inline:
ctx.inlineAnonRow = box
else:
ctx.anonRow = box
return box
if inline:
return ctx.inlineAnonRow
return ctx.anonRow
proc flushTableRow(ctx: var InnerBlockContext) =
if ctx.anonRow != nil:
if ctx.outer.computed{"display"} in ProperTableRowParent:
ctx.outer.nested.add(ctx.anonRow)
else:
let anonTableWrapper = ctx.createAnonTable(ctx.outer.computed)
anonTableWrapper.nested[0].nested.add(ctx.anonRow)
ctx.anonRow = nil
proc flushTable(ctx: var InnerBlockContext) =
ctx.flushTableRow()
if ctx.anonTableWrapper != nil:
ctx.outer.nested.add(ctx.anonTableWrapper)
ctx.anonTableWrapper = nil
proc flushInlineTableRow(ctx: var InnerBlockContext) =
if ctx.inlineAnonRow != nil:
# There is no way an inline anonymous row could be a child of an inline
# table, since inline tables still act like blocks inside.
let anonTableWrapper = ctx.createAnonTable(ctx.outer.computed)
anonTableWrapper.nested[0].nested.add(ctx.inlineAnonRow)
ctx.inlineAnonRow = nil
proc flushInlineTable(ctx: var InnerBlockContext) =
ctx.flushInlineTableRow()
if ctx.inlineAnonTableWrapper != nil:
ctx.pushInline(InlineFragment(
t: iftBox,
computed: ctx.inlineAnonTableWrapper.computed.inheritProperties(),
box: ctx.inlineAnonTableWrapper
))
ctx.inlineAnonTableWrapper = nil
proc iflush(ctx: var InnerBlockContext) =
ctx.inlineStackFragments.setLen(0)
proc flushInherit(ctx: var InnerBlockContext) =
if ctx.parent != nil:
if not ctx.listItemReset:
ctx.parent.listItemCounter = ctx.listItemCounter
ctx.parent.quoteLevel = ctx.quoteLevel
proc flush(ctx: var InnerBlockContext) =
ctx.flushInlineGroup()
ctx.flushTable()
ctx.flushInherit()
proc addInlineRoot(ctx: var InnerBlockContext; box: InlineFragment) =
if ctx.inline == nil:
let fragment = InlineFragment(
t: iftParent,
computed: ctx.lctx.myRootProperties,
children: @[box]
)
ctx.inline = RootInlineFragment(fragment: fragment)
else:
ctx.inline.fragment.children.add(box)
proc reconstructInlineParents(ctx: var InnerBlockContext) =
if ctx.inlineStackFragments.len == 0:
var parent = InlineFragment(
t: iftParent,
computed: ctx.inlineStack[0].computed,
node: ctx.inlineStack[0]
)
ctx.inlineStackFragments.add(parent)
ctx.addInlineRoot(parent)
for i in 1 ..< ctx.inlineStack.len:
let node = ctx.inlineStack[i]
let child = InlineFragment(
t: iftParent,
computed: node.computed,
node: node
)
parent.children.add(child)
ctx.inlineStackFragments.add(child)
parent = child
proc buildSomeBlock(ctx: var InnerBlockContext; styledNode: StyledNode;
computed: CSSComputedValues): BlockBox =
let box = BlockBox(computed: computed, node: styledNode)
var childCtx = newInnerBlockContext(styledNode, box, ctx.lctx, addr ctx)
case computed{"display"}
of DisplayBlock, DisplayFlowRoot, DisplayInlineBlock: childCtx.buildBlock()
of DisplayFlex, DisplayInlineFlex: childCtx.buildFlex()
of DisplayTable, DisplayInlineTable: childCtx.buildTable()
else: discard
return box
# Note: these also pop
proc pushBlock(ctx: var InnerBlockContext; styledNode: StyledNode;
computed: CSSComputedValues) =
ctx.iflush()
ctx.flush()
let box = ctx.buildSomeBlock(styledNode, computed)
ctx.outer.nested.add(box)
proc pushInline(ctx: var InnerBlockContext; fragment: InlineFragment) =
if ctx.inlineStack.len == 0:
ctx.addInlineRoot(fragment)
else:
ctx.reconstructInlineParents()
ctx.inlineStackFragments[^1].children.add(fragment)
proc pushInlineText(ctx: var InnerBlockContext; computed: CSSComputedValues;
parent, node: StyledNode) =
ctx.pushInline(InlineFragment(
t: iftText,
computed: computed,
node: parent,
text: node
))
proc pushInlineBlock(ctx: var InnerBlockContext; styledNode: StyledNode;
computed: CSSComputedValues) =
ctx.pushInline(InlineFragment(
t: iftBox,
computed: computed.inheritProperties(),
node: styledNode,
box: ctx.buildSomeBlock(styledNode, computed)
))
proc pushListItem(ctx: var InnerBlockContext; styledNode: StyledNode;
computed: CSSComputedValues) =
ctx.iflush()
ctx.flush()
inc ctx.listItemCounter
let marker = newMarkerBox(computed, ctx.listItemCounter)
let position = computed{"list-style-position"}
let content = BlockBox(computed: computed, node: styledNode)
var contentCtx = newInnerBlockContext(styledNode, content, ctx.lctx, addr ctx)
case position
of ListStylePositionOutside:
contentCtx.buildBlock()
content.computed = content.computed.copyProperties()
content.computed{"display"} = DisplayBlock
let markerComputed = marker.computed.copyProperties()
markerComputed{"display"} = DisplayBlock
let marker = BlockBox(
computed: marker.computed,
inline: RootInlineFragment(fragment: marker)
)
let wrapper = BlockBox(computed: computed, nested: @[marker, content])
ctx.outer.nested.add(wrapper)
of ListStylePositionInside:
contentCtx.pushInline(marker)
contentCtx.buildBlock()
ctx.outer.nested.add(content)
proc pushTableRow(ctx: var InnerBlockContext; styledNode: StyledNode;
computed: CSSComputedValues) =
let child = ctx.buildTableRow(styledNode, computed)
if ctx.inlineStack.len == 0:
ctx.iflush()
ctx.flushInlineGroup()
ctx.flushTableRow()
else:
ctx.flushInlineTableRow()
if ctx.inlineStack.len == 0 and
ctx.outer.computed{"display"} in ProperTableRowParent:
ctx.outer.nested.add(child)
else:
let anonTableWrapper = ctx.createAnonTable(ctx.outer.computed)
anonTableWrapper.nested[0].nested.add(child)
proc pushTableRowGroup(ctx: var InnerBlockContext; styledNode: StyledNode;
computed: CSSComputedValues) =
let child = ctx.buildTableRowGroup(styledNode, computed)
if ctx.inlineStack.len == 0:
ctx.iflush()
ctx.flushInlineGroup()
ctx.flushTableRow()
else:
ctx.flushInlineTableRow()
if ctx.inlineStack.len == 0 and
ctx.outer.computed{"display"} in {DisplayTable, DisplayInlineTable}:
ctx.outer.nested.add(child)
else:
ctx.flushTableRow()
let anonTableWrapper = ctx.createAnonTable(ctx.outer.computed)
anonTableWrapper.nested[0].nested.add(child)
proc pushTableCell(ctx: var InnerBlockContext; styledNode: StyledNode;
computed: CSSComputedValues) =
let child = ctx.buildTableCell(styledNode, computed)
if ctx.inlineStack.len == 0 and
ctx.outer.computed{"display"} == DisplayTableRow:
ctx.iflush()
ctx.flushInlineGroup()
ctx.outer.nested.add(child)
else:
let anonRow = ctx.createAnonRow()
anonRow.nested.add(child)
proc pushTableCaption(ctx: var InnerBlockContext; styledNode: StyledNode;
computed: CSSComputedValues) =
ctx.iflush()
ctx.flushInlineGroup()
ctx.flushTableRow()
let child = ctx.buildTableCaption(styledNode, computed)
if ctx.outer.computed{"display"} in {DisplayTable, DisplayInlineTable}:
ctx.outer.nested.add(child)
else:
let anonTableWrapper = ctx.createAnonTable(ctx.outer.computed)
# only add first caption
if anonTableWrapper.nested.len == 1:
anonTableWrapper.nested.add(child)
proc buildFromElem(ctx: var InnerBlockContext; styledNode: StyledNode;
computed: CSSComputedValues) =
case computed{"display"}
of DisplayBlock, DisplayFlowRoot, DisplayFlex, DisplayTable:
ctx.pushBlock(styledNode, computed)
of DisplayInlineBlock, DisplayInlineTable, DisplayInlineFlex:
ctx.pushInlineBlock(styledNode, computed)
of DisplayListItem:
ctx.pushListItem(styledNode, computed)
of DisplayInline:
ctx.buildInlineBoxes(styledNode, computed)
of DisplayTableRow:
ctx.pushTableRow(styledNode, computed)
of DisplayTableRowGroup, DisplayTableHeaderGroup, DisplayTableFooterGroup:
ctx.pushTableRowGroup(styledNode, computed)
of DisplayTableCell:
ctx.pushTableCell(styledNode, computed)
of DisplayTableCaption:
ctx.pushTableCaption(styledNode, computed)
of DisplayTableColumn: discard #TODO
of DisplayTableColumnGroup: discard #TODO
of DisplayNone: discard
of DisplayTableWrapper, DisplayInlineTableWrapper: assert false
proc buildReplacement(ctx: var InnerBlockContext; child, parent: StyledNode;
computed: CSSComputedValues) =
case child.content.t
of ContentOpenQuote:
let quotes = parent.computed{"quotes"}
var text: string = ""
if quotes.qs.len > 0:
text = quotes.qs[min(ctx.quoteLevel, quotes.qs.high)].s
elif quotes.auto:
text = quoteStart(ctx.quoteLevel)
else: return
let node = newStyledText(text)
ctx.pushInlineText(computed, parent, node)
inc ctx.quoteLevel
of ContentCloseQuote:
if ctx.quoteLevel > 0: dec ctx.quoteLevel
let quotes = parent.computed{"quotes"}
let s = if quotes.qs.len > 0:
quotes.qs[min(ctx.quoteLevel, quotes.qs.high)].e
elif quotes.auto:
quoteEnd(ctx.quoteLevel)
else:
return
let text = newStyledText(s)
ctx.pushInlineText(computed, parent, text)
of ContentNoOpenQuote:
inc ctx.quoteLevel
of ContentNoCloseQuote:
if ctx.quoteLevel > 0: dec ctx.quoteLevel
of ContentString:
let text = newStyledText(child.content.s)
ctx.pushInlineText(computed, parent, text)
of ContentImage:
if child.content.bmp != nil:
ctx.pushInline(InlineFragment(
t: iftBitmap,
computed: parent.computed,
node: parent,
bmp: child.content.bmp
))
else:
ctx.pushInlineText(computed, parent, ctx.lctx.imgText)
of ContentVideo:
ctx.pushInlineText(computed, parent, ctx.lctx.videoText)
of ContentAudio:
ctx.pushInlineText(computed, parent, ctx.lctx.audioText)
of ContentNewline:
ctx.pushInline(InlineFragment(
t: iftNewline,
computed: computed,
node: child
))
proc buildInlineBoxes(ctx: var InnerBlockContext; styledNode: StyledNode;
computed: CSSComputedValues) =
let parent = InlineFragment(
t: iftParent,
computed: computed,
splitType: {stSplitStart}
)
if ctx.inlineStack.len == 0:
ctx.addInlineRoot(parent)
else:
ctx.reconstructInlineParents()
ctx.inlineStackFragments[^1].children.add(parent)
ctx.inlineStack.add(styledNode)
ctx.inlineStackFragments.add(parent)
for child in styledNode.children:
case child.t
of stElement:
ctx.buildFromElem(child, child.computed)
of stText:
ctx.flushInlineTable()
ctx.pushInlineText(computed, styledNode, child)
of stReplacement:
ctx.flushInlineTable()
ctx.buildReplacement(child, styledNode, computed)
ctx.reconstructInlineParents()
ctx.flushInlineTable()
let fragment = ctx.inlineStackFragments.pop()
fragment.splitType.incl(stSplitEnd)
ctx.inlineStack.setLen(ctx.inlineStack.high)
proc newInnerBlockContext(styledNode: StyledNode; box: BlockBox;
lctx: LayoutContext; parent: ptr InnerBlockContext): InnerBlockContext =
assert box.computed{"display"} != DisplayInline
var ctx = InnerBlockContext(
styledNode: styledNode,
outer: box,
lctx: lctx,
parent: parent
)
if parent != nil:
ctx.listItemCounter = parent[].listItemCounter
ctx.quoteLevel = parent[].quoteLevel
for reset in styledNode.computed{"counter-reset"}:
if reset.name == "list-item":
ctx.listItemCounter = reset.num
ctx.listItemReset = true
return ctx
proc buildInnerBlock(ctx: var InnerBlockContext) =
let inlineComputed = ctx.outer.computed.inheritProperties()
for child in ctx.styledNode.children:
case child.t
of stElement:
ctx.buildFromElem(child, child.computed)
of stText:
if ctx.canBuildAnonInline(ctx.outer.computed, child.textData):
ctx.pushInlineText(inlineComputed, ctx.styledNode, child)
of stReplacement:
ctx.buildReplacement(child, ctx.styledNode, inlineComputed)
ctx.iflush()
proc buildBlock(ctx: var InnerBlockContext) =
ctx.buildInnerBlock()
# Flush anonymous tables here, to avoid setting inline layout with tables.
ctx.flushTable()
ctx.flushInherit() # (flush here, because why not)
# Avoid unnecessary anonymous block boxes. This also helps set our layout to
# inline even if no inner anonymous block was built.
if ctx.outer.nested.len == 0:
ctx.outer.inline = if ctx.inline != nil:
ctx.inline
else:
RootInlineFragment(fragment: InlineFragment(
t: iftParent,
computed: ctx.lctx.myRootProperties
))
ctx.inline = nil
ctx.flushInlineGroup()
proc buildInnerFlex(ctx: var InnerBlockContext) =
let inlineComputed = ctx.outer.computed.inheritProperties()
for child in ctx.styledNode.children:
case child.t
of stElement:
let display = child.computed{"display"}.blockify()
let computed = if display != child.computed{"display"}:
let computed = child.computed.copyProperties()
computed{"display"} = display
computed
else:
child.computed
ctx.buildFromElem(child, computed)
of stText:
if ctx.canBuildAnonInline(ctx.outer.computed, child.textData):
ctx.pushInlineText(inlineComputed, ctx.styledNode, child)
of stReplacement:
ctx.buildReplacement(child, ctx.styledNode, inlineComputed)
ctx.iflush()
proc buildFlex(ctx: var InnerBlockContext) =
ctx.buildInnerFlex()
# Flush anonymous tables here, to avoid setting inline layout with tables.
ctx.flushTable()
# (flush here, because why not)
ctx.flushInherit()
ctx.flushInlineGroup()
assert ctx.outer.inline == nil
const FlexReverse = {FlexDirectionRowReverse, FlexDirectionColumnReverse}
if ctx.outer.computed{"flex-direction"} in FlexReverse:
ctx.outer.nested.reverse()
proc buildTableCell(parent: var InnerBlockContext; styledNode: StyledNode;
computed: CSSComputedValues): BlockBox =
let box = BlockBox(node: styledNode, computed: computed)
var ctx = newInnerBlockContext(styledNode, box, parent.lctx, addr parent)
ctx.buildInnerBlock()
ctx.flush()
return box
proc buildTableRowChildWrappers(box: BlockBox) =
var wrapperVals: CSSComputedValues = nil
for child in box.nested:
if child.computed{"display"} != DisplayTableCell:
wrapperVals = box.computed.inheritProperties()
wrapperVals{"display"} = DisplayTableCell
break
if wrapperVals != nil:
# fixup row: put wrappers around runs of misparented children
var nested = newSeqOfCap[BlockBox](box.nested.len)
var wrapper: BlockBox = nil
for child in box.nested:
if child.computed{"display"} != DisplayTableCell:
if wrapper == nil:
wrapper = BlockBox(computed: wrapperVals)
nested.add(wrapper)
wrapper.nested.add(child)
else:
wrapper = nil
nested.add(child)
box.nested = nested
proc buildTableRow(parent: var InnerBlockContext; styledNode: StyledNode;
computed: CSSComputedValues): BlockBox =
let box = BlockBox(node: styledNode, computed: computed)
var ctx = newInnerBlockContext(styledNode, box, parent.lctx, addr parent)
ctx.buildInnerBlock()
ctx.flush()
box.buildTableRowChildWrappers()
return box
proc buildTableRowGroupChildWrappers(box: BlockBox) =
var wrapperVals: CSSComputedValues = nil
for child in box.nested:
if child.computed{"display"} != DisplayTableRow:
wrapperVals = box.computed.inheritProperties()
wrapperVals{"display"} = DisplayTableRow
break
if wrapperVals != nil:
# fixup row group: put wrappers around runs of misparented children
var wrapper: BlockBox = nil
var nested = newSeqOfCap[BlockBox](box.nested.len)
for child in box.nested:
if child.computed{"display"} != DisplayTableRow:
if wrapper == nil:
wrapper = BlockBox(computed: wrapperVals, nested: @[child])
wrapper.nested.add(child)
nested.add(wrapper)
else:
if wrapper != nil:
wrapper.buildTableRowChildWrappers()
wrapper = nil
nested.add(child)
if wrapper != nil:
wrapper.buildTableRowChildWrappers()
box.nested = nested
proc buildTableRowGroup(parent: var InnerBlockContext; styledNode: StyledNode;
computed: CSSComputedValues): BlockBox =
let box = BlockBox(node: styledNode, computed: computed)
var ctx = newInnerBlockContext(styledNode, box, parent.lctx, addr parent)
ctx.buildInnerBlock()
ctx.flush()
box.buildTableRowGroupChildWrappers()
return box
proc buildTableCaption(parent: var InnerBlockContext; styledNode: StyledNode;
computed: CSSComputedValues): BlockBox =
let box = BlockBox(node: styledNode, computed: computed)
var ctx = newInnerBlockContext(styledNode, box, parent.lctx, addr parent)
ctx.buildInnerBlock()
ctx.flush()
return box
proc buildTableChildWrappers(box: BlockBox; computed: CSSComputedValues) =
let innerTable = BlockBox(computed: computed, node: box.node)
let wrapperVals = box.computed.inheritProperties()
wrapperVals{"display"} = DisplayTableRow
var caption: BlockBox = nil
var wrapper: BlockBox = nil
for child in box.nested:
if child.computed{"display"} in ProperTableChild:
if wrapper != nil:
wrapper.buildTableRowChildWrappers()
wrapper = nil
innerTable.nested.add(child)
elif child.computed{"display"} == DisplayTableCaption:
if caption == nil:
caption = child
else:
if wrapper == nil:
wrapper = BlockBox(computed: wrapperVals)
wrapper.nested.add(child)
innerTable.nested.add(wrapper)
if wrapper != nil:
wrapper.buildTableRowChildWrappers()
box.nested = @[innerTable]
if caption != nil:
box.nested.add(caption)
proc buildTable(ctx: var InnerBlockContext) =
ctx.buildInnerBlock()
ctx.flush()
let (outerComputed, innerComputed) = ctx.outer.computed.splitTable()
ctx.outer.computed = outerComputed
outerComputed{"display"} = outerComputed{"display"}.toTableWrapper()
ctx.outer.buildTableChildWrappers(innerComputed)
proc layout*(root: StyledNode; attrsp: ptr WindowAttributes): BlockBox =
let space = availableSpace(
w = stretch(attrsp[].width_px),
h = stretch(attrsp[].height_px)
)
let lctx = LayoutContext(
attrsp: attrsp,
positioned: @[space],
myRootProperties: rootProperties(),
imgText: newStyledText("[img]"),
videoText: newStyledText("[video]"),
audioText: newStyledText("[audio]")
)
let box = BlockBox(computed: root.computed, node: root)
var ctx = newInnerBlockContext(root, box, lctx, nil)
ctx.buildBlock()
var marginBottomOut: LayoutUnit
lctx.layoutRootBlock(box, space, offset(x = 0, y = 0), marginBottomOut)
return box
| |