taffy/compute/
block.rs

1//! Computes the CSS block layout algorithm in the case that the block container being laid out contains only block-level boxes
2use crate::geometry::{Line, Point, Rect, Size};
3use crate::style::{AvailableSpace, Display, LengthPercentageAuto, Overflow, Position};
4use crate::style_helpers::TaffyMaxContent;
5use crate::tree::{CollapsibleMarginSet, Layout, LayoutInput, LayoutOutput, RunMode, SizingMode};
6use crate::tree::{NodeId, PartialLayoutTree, PartialLayoutTreeExt};
7use crate::util::debug::debug_log;
8use crate::util::sys::f32_max;
9use crate::util::sys::Vec;
10use crate::util::MaybeMath;
11use crate::util::{MaybeResolve, ResolveOrZero};
12
13#[cfg(feature = "content_size")]
14use super::common::content_size::compute_content_size_contribution;
15
16/// Per-child data that is accumulated and modified over the course of the layout algorithm
17struct BlockItem {
18    /// The identifier for the associated node
19    node_id: NodeId,
20
21    /// The "source order" of the item. This is the index of the item within the children iterator,
22    /// and controls the order in which the nodes are placed
23    order: u32,
24
25    /// The base size of this item
26    size: Size<Option<f32>>,
27    /// The minimum allowable size of this item
28    min_size: Size<Option<f32>>,
29    /// The maximum allowable size of this item
30    max_size: Size<Option<f32>>,
31
32    /// The overflow style of the item
33    overflow: Point<Overflow>,
34    /// The width of the item's scrollbars (if it has scrollbars)
35    scrollbar_width: f32,
36
37    /// The position style of the item
38    position: Position,
39    /// The final offset of this item
40    inset: Rect<LengthPercentageAuto>,
41    /// The margin of this item
42    margin: Rect<LengthPercentageAuto>,
43    /// The margin of this item
44    padding: Rect<f32>,
45    /// The margin of this item
46    border: Rect<f32>,
47    /// The sum of padding and border for this item
48    padding_border_sum: Size<f32>,
49
50    /// The computed border box size of this item
51    computed_size: Size<f32>,
52    /// The computed "static position" of this item. The static position is the position
53    /// taking into account padding, border, margins, and scrollbar_gutters but not inset
54    static_position: Point<f32>,
55    /// Whether margins can be collapsed through this item
56    can_be_collapsed_through: bool,
57}
58
59/// Computes the layout of [`PartialLayoutTree`] according to the block layout algorithm
60pub fn compute_block_layout(tree: &mut impl PartialLayoutTree, node_id: NodeId, inputs: LayoutInput) -> LayoutOutput {
61    let LayoutInput { known_dimensions, parent_size, available_space, run_mode, .. } = inputs;
62    let style = tree.get_style(node_id);
63
64    // Pull these out earlier to avoid borrowing issues
65    let aspect_ratio = style.aspect_ratio;
66    let margin = style.margin.resolve_or_zero(parent_size.width);
67    let min_size = style.min_size.maybe_resolve(parent_size).maybe_apply_aspect_ratio(aspect_ratio);
68    let max_size = style.max_size.maybe_resolve(parent_size).maybe_apply_aspect_ratio(aspect_ratio);
69    let padding = style.padding.resolve_or_zero(parent_size.width);
70    let border = style.border.resolve_or_zero(parent_size.width);
71    let padding_border_size = (padding + border).sum_axes();
72    let clamped_style_size = if inputs.sizing_mode == SizingMode::InherentSize {
73        style.size.maybe_resolve(parent_size).maybe_apply_aspect_ratio(aspect_ratio).maybe_clamp(min_size, max_size)
74    } else {
75        Size::NONE
76    };
77
78    // If both min and max in a given axis are set and max <= min then this determines the size in that axis
79    let min_max_definite_size = min_size.zip_map(max_size, |min, max| match (min, max) {
80        (Some(min), Some(max)) if max <= min => Some(min),
81        _ => None,
82    });
83
84    // Block nodes automatically stretch fit their width to fit available space if available space is definite
85    let available_space_based_size =
86        Size { width: available_space.width.into_option().maybe_sub(margin.horizontal_axis_sum()), height: None };
87
88    let styled_based_known_dimensions = known_dimensions
89        .or(min_max_definite_size)
90        .or(clamped_style_size)
91        .or(available_space_based_size)
92        .maybe_max(padding_border_size);
93
94    // Short-circuit layout if the container's size is fully determined by the container's size and the run mode
95    // is ComputeSize (and thus the container's size is all that we're interested in)
96    if run_mode == RunMode::ComputeSize {
97        if let Size { width: Some(width), height: Some(height) } = styled_based_known_dimensions {
98            return LayoutOutput::from_outer_size(Size { width, height });
99        }
100    }
101
102    debug_log!("BLOCK");
103    compute_inner(tree, node_id, LayoutInput { known_dimensions: styled_based_known_dimensions, ..inputs })
104}
105
106/// Computes the layout of [`PartialLayoutTree`] according to the block layout algorithm
107fn compute_inner(tree: &mut impl PartialLayoutTree, node_id: NodeId, inputs: LayoutInput) -> LayoutOutput {
108    let LayoutInput {
109        known_dimensions, parent_size, available_space, run_mode, vertical_margins_are_collapsible, ..
110    } = inputs;
111
112    let style = tree.get_style(node_id);
113    let raw_padding = style.padding;
114    let raw_border = style.border;
115    let raw_margin = style.margin;
116    let aspect_ratio = style.aspect_ratio;
117    let size = style.size.maybe_resolve(parent_size).maybe_apply_aspect_ratio(aspect_ratio);
118    let min_size = style.min_size.maybe_resolve(parent_size).maybe_apply_aspect_ratio(aspect_ratio);
119    let max_size = style.max_size.maybe_resolve(parent_size).maybe_apply_aspect_ratio(aspect_ratio);
120    let padding = style.padding.resolve_or_zero(parent_size.width);
121    let border = style.border.resolve_or_zero(parent_size.width);
122
123    // Scrollbar gutters are reserved when the `overflow` property is set to `Overflow::Scroll`.
124    // However, the axis are switched (transposed) because a node that scrolls vertically needs
125    // *horizontal* space to be reserved for a scrollbar
126    let scrollbar_gutter = {
127        let offsets = style.overflow.transpose().map(|overflow| match overflow {
128            Overflow::Scroll => style.scrollbar_width,
129            _ => 0.0,
130        });
131        // TODO: make side configurable based on the `direction` property
132        Rect { top: 0.0, left: 0.0, right: offsets.x, bottom: offsets.y }
133    };
134    let padding_border = padding + border;
135    let padding_border_size = padding_border.sum_axes();
136    let content_box_inset = padding_border + scrollbar_gutter;
137    let container_content_box_size = known_dimensions.maybe_sub(content_box_inset.sum_axes());
138
139    // Determine margin collapsing behaviour
140    let own_margins_collapse_with_children = Line {
141        start: vertical_margins_are_collapsible.start
142            && !style.overflow.x.is_scroll_container()
143            && !style.overflow.y.is_scroll_container()
144            && style.position == Position::Relative
145            && padding.top == 0.0
146            && border.top == 0.0,
147        end: vertical_margins_are_collapsible.end
148            && !style.overflow.x.is_scroll_container()
149            && !style.overflow.y.is_scroll_container()
150            && style.position == Position::Relative
151            && padding.bottom == 0.0
152            && border.bottom == 0.0
153            && size.height.is_none(),
154    };
155    let has_styles_preventing_being_collapsed_through = style.display != Display::Block
156        || style.overflow.x.is_scroll_container()
157        || style.overflow.y.is_scroll_container()
158        || style.position == Position::Absolute
159        || padding.top > 0.0
160        || padding.bottom > 0.0
161        || border.top > 0.0
162        || border.bottom > 0.0;
163
164    // 1. Generate items
165    let mut items = generate_item_list(tree, node_id, container_content_box_size);
166
167    // 2. Compute container width
168    let container_outer_width = known_dimensions.width.unwrap_or_else(|| {
169        let available_width = available_space.width.maybe_sub(content_box_inset.horizontal_axis_sum());
170        let intrinsic_width = determine_content_based_container_width(tree, &items, available_width)
171            + content_box_inset.horizontal_axis_sum();
172        intrinsic_width.maybe_clamp(min_size.width, max_size.width).maybe_max(Some(padding_border_size.width))
173    });
174
175    // Short-circuit if computing size and both dimensions known
176    if let (RunMode::ComputeSize, Some(container_outer_height)) = (run_mode, known_dimensions.height) {
177        return LayoutOutput::from_outer_size(Size { width: container_outer_width, height: container_outer_height });
178    }
179
180    // 3. Perform final item layout and return content height
181    let resolved_padding = raw_padding.resolve_or_zero(Some(container_outer_width));
182    let resolved_border = raw_border.resolve_or_zero(Some(container_outer_width));
183    let resolved_content_box_inset = resolved_padding + resolved_border + scrollbar_gutter;
184    let (inflow_content_size, intrinsic_outer_height, first_child_top_margin_set, last_child_bottom_margin_set) =
185        perform_final_layout_on_in_flow_children(
186            tree,
187            &mut items,
188            container_outer_width,
189            content_box_inset,
190            resolved_content_box_inset,
191            own_margins_collapse_with_children,
192        );
193    let container_outer_height = known_dimensions
194        .height
195        .unwrap_or(intrinsic_outer_height.maybe_clamp(min_size.height, max_size.height))
196        .maybe_max(Some(padding_border_size.height));
197    let final_outer_size = Size { width: container_outer_width, height: container_outer_height };
198
199    // Short-circuit if computing size
200    if run_mode == RunMode::ComputeSize {
201        return LayoutOutput::from_outer_size(final_outer_size);
202    }
203
204    // 4. Layout absolutely positioned children
205    let absolute_position_inset = resolved_border + scrollbar_gutter;
206    let absolute_position_area = final_outer_size - absolute_position_inset.sum_axes();
207    let absolute_position_offset = Point { x: absolute_position_inset.left, y: absolute_position_inset.top };
208    let absolute_content_size =
209        perform_absolute_layout_on_absolute_children(tree, &items, absolute_position_area, absolute_position_offset);
210
211    // 5. Perform hidden layout on hidden children
212    let len = tree.child_count(node_id);
213    for order in 0..len {
214        let child = tree.get_child_id(node_id, order);
215        if tree.get_style(child).display == Display::None {
216            tree.set_unrounded_layout(child, &Layout::with_order(order as u32));
217            tree.perform_child_layout(
218                child,
219                Size::NONE,
220                Size::NONE,
221                Size::MAX_CONTENT,
222                SizingMode::InherentSize,
223                Line::FALSE,
224            );
225        }
226    }
227
228    // 7. Determine whether this node can be collapsed through
229    let all_in_flow_children_can_be_collapsed_through =
230        items.iter().all(|item| item.position == Position::Absolute || item.can_be_collapsed_through);
231    let can_be_collapsed_through =
232        !has_styles_preventing_being_collapsed_through && all_in_flow_children_can_be_collapsed_through;
233
234    #[cfg_attr(not(feature = "content_size"), allow(unused_variables))]
235    let content_size = inflow_content_size.f32_max(absolute_content_size);
236
237    LayoutOutput {
238        size: final_outer_size,
239        #[cfg(feature = "content_size")]
240        content_size,
241        first_baselines: Point::NONE,
242        top_margin: if own_margins_collapse_with_children.start {
243            first_child_top_margin_set
244        } else {
245            let margin_top = raw_margin.top.resolve_or_zero(parent_size.width);
246            CollapsibleMarginSet::from_margin(margin_top)
247        },
248        bottom_margin: if own_margins_collapse_with_children.end {
249            last_child_bottom_margin_set
250        } else {
251            let margin_bottom = raw_margin.bottom.resolve_or_zero(parent_size.width);
252            CollapsibleMarginSet::from_margin(margin_bottom)
253        },
254        margins_can_collapse_through: can_be_collapsed_through,
255    }
256}
257
258/// Create a `Vec` of `BlockItem` structs where each item in the `Vec` represents a child of the current node
259#[inline]
260fn generate_item_list(
261    tree: &impl PartialLayoutTree,
262    node: NodeId,
263    node_inner_size: Size<Option<f32>>,
264) -> Vec<BlockItem> {
265    tree.child_ids(node)
266        .map(|child_node_id| (child_node_id, tree.get_style(child_node_id)))
267        .filter(|(_, style)| style.display != Display::None)
268        .enumerate()
269        .map(|(order, (child_node_id, child_style))| {
270            let aspect_ratio = child_style.aspect_ratio;
271            let padding = child_style.padding.resolve_or_zero(node_inner_size);
272            let border = child_style.border.resolve_or_zero(node_inner_size);
273            BlockItem {
274                node_id: child_node_id,
275                order: order as u32,
276
277                size: child_style.size.maybe_resolve(node_inner_size).maybe_apply_aspect_ratio(aspect_ratio),
278                min_size: child_style.min_size.maybe_resolve(node_inner_size).maybe_apply_aspect_ratio(aspect_ratio),
279                max_size: child_style.max_size.maybe_resolve(node_inner_size).maybe_apply_aspect_ratio(aspect_ratio),
280                overflow: child_style.overflow,
281                scrollbar_width: child_style.scrollbar_width,
282                position: child_style.position,
283                inset: child_style.inset,
284                margin: child_style.margin,
285                padding,
286                border,
287                padding_border_sum: (padding + border).sum_axes(),
288
289                // Fields to be computed later (for now we initialise with dummy values)
290                computed_size: Size::zero(),
291                static_position: Point::zero(),
292                can_be_collapsed_through: false,
293            }
294        })
295        .collect()
296}
297
298/// Compute the content-based width in the case that the width of the container is not known
299#[inline]
300fn determine_content_based_container_width(
301    tree: &mut impl PartialLayoutTree,
302    items: &[BlockItem],
303    available_width: AvailableSpace,
304) -> f32 {
305    let available_space = Size { width: available_width, height: AvailableSpace::MinContent };
306
307    let mut max_child_width = 0.0;
308    for item in items.iter().filter(|item| item.position != Position::Absolute) {
309        let known_dimensions = item.size.maybe_clamp(item.min_size, item.max_size);
310
311        let width = known_dimensions.width.unwrap_or_else(|| {
312            let item_x_margin_sum =
313                item.margin.resolve_or_zero(available_space.width.into_option()).horizontal_axis_sum();
314            let size_and_baselines = tree.perform_child_layout(
315                item.node_id,
316                known_dimensions,
317                Size::NONE,
318                available_space.map_width(|w| w.maybe_sub(item_x_margin_sum)),
319                SizingMode::InherentSize,
320                Line::TRUE,
321            );
322
323            size_and_baselines.size.width + item_x_margin_sum
324        });
325        let width = f32_max(width, item.padding_border_sum.width);
326
327        max_child_width = f32_max(max_child_width, width);
328    }
329
330    max_child_width
331}
332
333/// Compute each child's final size and position
334#[inline]
335fn perform_final_layout_on_in_flow_children(
336    tree: &mut impl PartialLayoutTree,
337    items: &mut [BlockItem],
338    container_outer_width: f32,
339    content_box_inset: Rect<f32>,
340    resolved_content_box_inset: Rect<f32>,
341    own_margins_collapse_with_children: Line<bool>,
342) -> (Size<f32>, f32, CollapsibleMarginSet, CollapsibleMarginSet) {
343    // Resolve container_inner_width for sizing child nodes using intial content_box_inset
344    let container_inner_width = container_outer_width - content_box_inset.horizontal_axis_sum();
345    let parent_size = Size { width: Some(container_outer_width), height: None };
346    let available_space =
347        Size { width: AvailableSpace::Definite(container_inner_width), height: AvailableSpace::MinContent };
348
349    #[cfg_attr(not(feature = "content_size"), allow(unused_mut))]
350    let mut inflow_content_size = Size::ZERO;
351    let mut committed_y_offset = resolved_content_box_inset.top;
352    let mut first_child_top_margin_set = CollapsibleMarginSet::ZERO;
353    let mut active_collapsible_margin_set = CollapsibleMarginSet::ZERO;
354    let mut is_collapsing_with_first_margin_set = true;
355    for item in items.iter_mut() {
356        if item.position == Position::Absolute {
357            item.static_position.y = committed_y_offset;
358        } else {
359            let item_margin = item.margin.map(|margin| margin.resolve_to_option(container_outer_width));
360            let item_non_auto_margin = item_margin.map(|m| m.unwrap_or(0.0));
361            let item_non_auto_x_margin_sum = item_non_auto_margin.horizontal_axis_sum();
362            let known_dimensions = item
363                .size
364                .map_width(|width| Some(width.unwrap_or(container_inner_width - item_non_auto_x_margin_sum)))
365                .maybe_clamp(item.min_size, item.max_size);
366
367            let item_layout = tree.perform_child_layout(
368                item.node_id,
369                known_dimensions,
370                parent_size,
371                available_space.map_width(|w| w.maybe_sub(item_non_auto_x_margin_sum)),
372                SizingMode::InherentSize,
373                Line::TRUE,
374            );
375            let final_size = item_layout.size;
376
377            let top_margin_set = item_layout.top_margin.collapse_with_margin(item_margin.top.unwrap_or(0.0));
378            let bottom_margin_set = item_layout.bottom_margin.collapse_with_margin(item_margin.bottom.unwrap_or(0.0));
379
380            // Expand auto margins to fill available space
381            // Note: Vertical auto-margins for relatively positioned block items simply resolve to 0.
382            // See: https://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
383            let free_x_space = f32_max(0.0, container_inner_width - final_size.width - item_non_auto_x_margin_sum);
384            let x_axis_auto_margin_size = {
385                let auto_margin_count = item_margin.left.is_none() as u8 + item_margin.right.is_none() as u8;
386                if auto_margin_count == 2 && item.size.width.is_none() {
387                    0.0
388                } else if auto_margin_count > 0 {
389                    free_x_space / auto_margin_count as f32
390                } else {
391                    0.0
392                }
393            };
394            let resolved_margin = Rect {
395                left: item_margin.left.unwrap_or(x_axis_auto_margin_size),
396                right: item_margin.right.unwrap_or(x_axis_auto_margin_size),
397                top: top_margin_set.resolve(),
398                bottom: bottom_margin_set.resolve(),
399            };
400
401            // Resolve item inset
402            let inset =
403                item.inset.zip_size(Size { width: container_inner_width, height: 0.0 }, |p, s| p.maybe_resolve(s));
404            let inset_offset = Point {
405                x: inset.left.or(inset.right.map(|x| -x)).unwrap_or(0.0),
406                y: inset.top.or(inset.bottom.map(|x| -x)).unwrap_or(0.0),
407            };
408
409            let y_margin_offset = if is_collapsing_with_first_margin_set && own_margins_collapse_with_children.start {
410                0.0
411            } else {
412                active_collapsible_margin_set.collapse_with_margin(resolved_margin.top).resolve()
413            };
414
415            item.computed_size = item_layout.size;
416            item.can_be_collapsed_through = item_layout.margins_can_collapse_through;
417            item.static_position = Point {
418                x: resolved_content_box_inset.left,
419                y: committed_y_offset + active_collapsible_margin_set.resolve(),
420            };
421            let location = Point {
422                x: resolved_content_box_inset.left + inset_offset.x + resolved_margin.left,
423                y: committed_y_offset + inset_offset.y + y_margin_offset,
424            };
425
426            let scrollbar_size = Size {
427                width: if item.overflow.y == Overflow::Scroll { item.scrollbar_width } else { 0.0 },
428                height: if item.overflow.x == Overflow::Scroll { item.scrollbar_width } else { 0.0 },
429            };
430
431            tree.set_unrounded_layout(
432                item.node_id,
433                &Layout {
434                    order: item.order,
435                    size: item_layout.size,
436                    #[cfg(feature = "content_size")]
437                    content_size: item_layout.content_size,
438                    scrollbar_size,
439                    location,
440                    padding: item.padding,
441                    border: item.border,
442                },
443            );
444
445            #[cfg(feature = "content_size")]
446            {
447                inflow_content_size = inflow_content_size.f32_max(compute_content_size_contribution(
448                    location,
449                    final_size,
450                    item_layout.content_size,
451                    item.overflow,
452                ));
453            }
454
455            // Update first_child_top_margin_set
456            if is_collapsing_with_first_margin_set {
457                if item.can_be_collapsed_through {
458                    first_child_top_margin_set = first_child_top_margin_set
459                        .collapse_with_set(top_margin_set)
460                        .collapse_with_set(bottom_margin_set);
461                } else {
462                    first_child_top_margin_set = first_child_top_margin_set.collapse_with_set(top_margin_set);
463                    is_collapsing_with_first_margin_set = false;
464                }
465            }
466
467            // Update active_collapsible_margin_set
468            if item.can_be_collapsed_through {
469                active_collapsible_margin_set = active_collapsible_margin_set
470                    .collapse_with_set(top_margin_set)
471                    .collapse_with_set(bottom_margin_set);
472            } else {
473                committed_y_offset += item_layout.size.height + y_margin_offset;
474                active_collapsible_margin_set = bottom_margin_set;
475            }
476        }
477    }
478
479    let last_child_bottom_margin_set = active_collapsible_margin_set;
480    let bottom_y_margin_offset =
481        if own_margins_collapse_with_children.end { 0.0 } else { last_child_bottom_margin_set.resolve() };
482
483    committed_y_offset += resolved_content_box_inset.bottom + bottom_y_margin_offset;
484    let content_height = f32_max(0.0, committed_y_offset);
485    (inflow_content_size, content_height, first_child_top_margin_set, last_child_bottom_margin_set)
486}
487
488/// Perform absolute layout on all absolutely positioned children.
489#[inline]
490fn perform_absolute_layout_on_absolute_children(
491    tree: &mut impl PartialLayoutTree,
492    items: &[BlockItem],
493    area_size: Size<f32>,
494    area_offset: Point<f32>,
495) -> Size<f32> {
496    let area_width = area_size.width;
497    let area_height = area_size.height;
498
499    #[cfg_attr(not(feature = "content_size"), allow(unused_mut))]
500    let mut absolute_content_size = Size::ZERO;
501
502    for item in items.iter().filter(|item| item.position == Position::Absolute) {
503        let child_style = tree.get_style(item.node_id);
504
505        // Skip items that are display:none or are not position:absolute
506        if child_style.display == Display::None || child_style.position != Position::Absolute {
507            continue;
508        }
509
510        let aspect_ratio = child_style.aspect_ratio;
511        let margin = child_style.margin.map(|margin| margin.resolve_to_option(area_width));
512        let padding = child_style.padding.resolve_or_zero(Some(area_width));
513        let border = child_style.border.resolve_or_zero(Some(area_width));
514        let padding_border_sum = (padding + border).sum_axes();
515
516        // Resolve inset
517        let left = child_style.inset.left.maybe_resolve(area_width);
518        let right = child_style.inset.right.maybe_resolve(area_width);
519        let top = child_style.inset.top.maybe_resolve(area_height);
520        let bottom = child_style.inset.bottom.maybe_resolve(area_height);
521
522        // Compute known dimensions from min/max/inherent size styles
523        let style_size = child_style.size.maybe_resolve(area_size).maybe_apply_aspect_ratio(aspect_ratio);
524        let min_size = child_style
525            .min_size
526            .maybe_resolve(area_size)
527            .maybe_apply_aspect_ratio(aspect_ratio)
528            .or(padding_border_sum.map(Some))
529            .maybe_max(padding_border_sum);
530        let max_size = child_style.max_size.maybe_resolve(area_size).maybe_apply_aspect_ratio(aspect_ratio);
531        let mut known_dimensions = style_size.maybe_clamp(min_size, max_size);
532
533        // Fill in width from left/right and reapply aspect ratio if:
534        //   - Width is not already known
535        //   - Item has both left and right inset properties set
536        if let (None, Some(left), Some(right)) = (known_dimensions.width, left, right) {
537            let new_width_raw = area_width.maybe_sub(margin.left).maybe_sub(margin.right) - left - right;
538            known_dimensions.width = Some(f32_max(new_width_raw, 0.0));
539            known_dimensions = known_dimensions.maybe_apply_aspect_ratio(aspect_ratio).maybe_clamp(min_size, max_size);
540        }
541
542        // Fill in height from top/bottom and reapply aspect ratio if:
543        //   - Height is not already known
544        //   - Item has both top and bottom inset properties set
545        if let (None, Some(top), Some(bottom)) = (known_dimensions.height, top, bottom) {
546            let new_height_raw = area_height.maybe_sub(margin.top).maybe_sub(margin.bottom) - top - bottom;
547            known_dimensions.height = Some(f32_max(new_height_raw, 0.0));
548            known_dimensions = known_dimensions.maybe_apply_aspect_ratio(aspect_ratio).maybe_clamp(min_size, max_size);
549        }
550
551        let layout_output = tree.perform_child_layout(
552            item.node_id,
553            known_dimensions,
554            area_size.map(Some),
555            Size {
556                width: AvailableSpace::Definite(area_width.maybe_clamp(min_size.width, max_size.width)),
557                height: AvailableSpace::Definite(area_height.maybe_clamp(min_size.height, max_size.height)),
558            },
559            SizingMode::ContentSize,
560            Line::FALSE,
561        );
562        let measured_size = layout_output.size;
563        let final_size = known_dimensions.unwrap_or(measured_size).maybe_clamp(min_size, max_size);
564
565        let non_auto_margin = Rect {
566            left: if left.is_some() { margin.left.unwrap_or(0.0) } else { 0.0 },
567            right: if right.is_some() { margin.right.unwrap_or(0.0) } else { 0.0 },
568            top: if top.is_some() { margin.top.unwrap_or(0.0) } else { 0.0 },
569            bottom: if bottom.is_some() { margin.left.unwrap_or(0.0) } else { 0.0 },
570        };
571
572        // Expand auto margins to fill available space
573        // https://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
574        let auto_margin = {
575            // Auto margins for absolutely positioned elements in block containers only resolve
576            // if inset is set. Otherwise they resolve to 0.
577            let absolute_auto_margin_space = Point {
578                x: right.map(|right| area_size.width - right - left.unwrap_or(0.0)).unwrap_or(final_size.width),
579                y: bottom.map(|bottom| area_size.height - bottom - top.unwrap_or(0.0)).unwrap_or(final_size.height),
580            };
581            let free_space = Size {
582                width: absolute_auto_margin_space.x - final_size.width - non_auto_margin.horizontal_axis_sum(),
583                height: absolute_auto_margin_space.y - final_size.height - non_auto_margin.vertical_axis_sum(),
584            };
585
586            let auto_margin_size = Size {
587                // If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0.
588                // Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the
589                // static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
590                //
591                // If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint
592                // that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is
593                // 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or
594                // 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case
595                // the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
596                width: {
597                    let auto_margin_count = margin.left.is_none() as u8 + margin.right.is_none() as u8;
598                    if auto_margin_count == 2
599                        && (style_size.width.is_none() || style_size.width.unwrap() >= free_space.width)
600                    {
601                        0.0
602                    } else if auto_margin_count > 0 {
603                        free_space.width / auto_margin_count as f32
604                    } else {
605                        0.0
606                    }
607                },
608                height: {
609                    let auto_margin_count = margin.top.is_none() as u8 + margin.bottom.is_none() as u8;
610                    if auto_margin_count == 2
611                        && (style_size.height.is_none() || style_size.height.unwrap() >= free_space.height)
612                    {
613                        0.0
614                    } else if auto_margin_count > 0 {
615                        free_space.height / auto_margin_count as f32
616                    } else {
617                        0.0
618                    }
619                },
620            };
621
622            Rect {
623                left: margin.left.map(|_| 0.0).unwrap_or(auto_margin_size.width),
624                right: margin.right.map(|_| 0.0).unwrap_or(auto_margin_size.width),
625                top: margin.top.map(|_| 0.0).unwrap_or(auto_margin_size.height),
626                bottom: margin.bottom.map(|_| 0.0).unwrap_or(auto_margin_size.height),
627            }
628        };
629
630        let resolved_margin = Rect {
631            left: margin.left.unwrap_or(auto_margin.left),
632            right: margin.right.unwrap_or(auto_margin.right),
633            top: margin.top.unwrap_or(auto_margin.top),
634            bottom: margin.bottom.unwrap_or(auto_margin.bottom),
635        };
636
637        let item_offset = Point {
638            x: left
639                .map(|left| left + resolved_margin.left)
640                .or(right.map(|right| area_size.width - final_size.width - right - resolved_margin.right))
641                .unwrap_or(resolved_margin.left),
642            y: top
643                .map(|top| top + resolved_margin.top)
644                .or(bottom.map(|bottom| area_size.height - final_size.height - bottom - resolved_margin.bottom))
645                .unwrap_or(item.static_position.y + resolved_margin.top),
646        };
647
648        // Note: axis intentionally switched here as scrollbars take up space in the opposite axis
649        // to the axis in which scrolling is enabled.
650        let scrollbar_size = Size {
651            width: if item.overflow.y == Overflow::Scroll { item.scrollbar_width } else { 0.0 },
652            height: if item.overflow.x == Overflow::Scroll { item.scrollbar_width } else { 0.0 },
653        };
654
655        let location = area_offset + item_offset;
656        tree.set_unrounded_layout(
657            item.node_id,
658            &Layout {
659                order: item.order,
660                size: final_size,
661                #[cfg(feature = "content_size")]
662                content_size: layout_output.content_size,
663                scrollbar_size,
664                location,
665                padding,
666                border,
667            },
668        );
669
670        #[cfg(feature = "content_size")]
671        {
672            absolute_content_size = absolute_content_size.f32_max(compute_content_size_contribution(
673                location,
674                final_size,
675                layout_output.content_size,
676                item.overflow,
677            ));
678        }
679    }
680
681    absolute_content_size
682}