Layout represents the output of a layout algorithm, containing all spatial and box model information needed to render a node. This includes the node's position, dimensions, spacing properties (border, padding, margin), and rendering order.
Box Model
CSS layout uses a nested box model where each node has multiple boxes:
Margin box: outermost, transparent spacing around the border
Border box: contains the border, padding, and content
Padding box: spacing between border and content
Content box: innermost, holds the actual content
The size field represents the border box dimensions. Use content_box_size to compute the content box dimensions. The content_size field may exceed size when content overflows, which is important for computing scroll dimensions.
Coordinate System
The location field specifies the top-left corner of the node's margin box relative to its parent's content box origin. This is the primary positioning coordinate. To compute other box positions, use content_box_x and content_box_y which add the appropriate spacing offsets.
scroll_width layout computes the horizontal scroll extent.
Returns the amount by which content overflows horizontally, accounting for scrollbar width. Result is always non-negative. Returns 0.0 when content fits within the border box.
Formula: max 0.0 (content_size.width + min scrollbar_size.width size.width - size.width + border.right).
scroll_height layout computes the vertical scroll extent.
Returns the amount by which content overflows vertically, accounting for scrollbar height. Result is always non-negative. Returns 0.0 when content fits within the border box.
Formula: max 0.0 (content_size.height + min scrollbar_size.height size.height - size.height + border.bottom).