ladybird/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp

/*
 * Copyright (c) 2021-2024, Andreas Kling <kling@serenityos.org>
 * Copyright (c) 2021, Tobias Christiansen <tobyase@serenityos.org>
 *
 * SPDX-License-Identifier: BSD-2-Clause
 */

#include "InlineFormattingContext.h"
#include <AK/Function.h>
#include <AK/QuickSort.h>
#include <AK/StdLibExtras.h>
#include <LibWeb/Layout/BlockContainer.h>
#include <LibWeb/Layout/BlockFormattingContext.h>
#include <LibWeb/Layout/Box.h>
#include <LibWeb/Layout/FlexFormattingContext.h>
#include <LibWeb/Layout/ReplacedBox.h>
#include <LibWeb/Layout/TextNode.h>
#include <LibWeb/Layout/Viewport.h>

namespace Web::Layout {

// NOTE: We use a custom clamping function here instead of AK::clamp(), since the AK version
//       will VERIFY(max >= min) and CSS explicitly allows that (see css-values-4.)
template<typename T>
[[nodiscard]] constexpr T css_clamp(T const& value, T const& min, T const& max)
{
    return ::max(min, ::min(value, max));
}

CSSPixels FlexFormattingContext::get_pixel_width(Box const& box, CSS::Size const& size) const
{
    return calculate_inner_width(box, containing_block_width_as_available_size(box), size);
}

CSSPixels FlexFormattingContext::get_pixel_height(Box const& box, CSS::Size const& size) const
{
    return calculate_inner_height(box, containing_block_height_as_available_size(box), size);
}

FlexFormattingContext::FlexFormattingContext(LayoutState& state, Box const& flex_container, FormattingContext* parent)
    : FormattingContext(Type::Flex, state, flex_container, parent)
    , m_flex_container_state(m_state.get_mutable(flex_container))
    , m_flex_direction(flex_container.computed_values().flex_direction())
{
}

FlexFormattingContext::~FlexFormattingContext() = default;

CSSPixels FlexFormattingContext::automatic_content_width() const
{
    return m_flex_container_state.content_width();
}

CSSPixels FlexFormattingContext::automatic_content_height() const
{
    return m_flex_container_state.content_height();
}

void FlexFormattingContext::run(Box const& run_box, LayoutMode, AvailableSpace const& available_space)
{
    VERIFY(&run_box == &flex_container());

    // This implements https://www.w3.org/TR/css-flexbox-1/#layout-algorithm

    // 1. Generate anonymous flex items
    generate_anonymous_flex_items();

    // 2. Determine the available main and cross space for the flex items
    determine_available_space_for_items(available_space);

    {
        // https://drafts.csswg.org/css-flexbox-1/#definite-sizes
        // 3. If a single-line flex container has a definite cross size,
        //    the automatic preferred outer cross size of any stretched flex items is the flex container’s inner cross size
        //    (clamped to the flex item’s min and max cross size) and is considered definite.
        if (is_single_line() && has_definite_cross_size(m_flex_container_state)) {
            auto flex_container_inner_cross_size = inner_cross_size(m_flex_container_state);
            for (auto& item : m_flex_items) {
                if (!flex_item_is_stretched(item))
                    continue;
                auto item_min_cross_size = has_cross_min_size(item.box) ? specified_cross_min_size(item.box) : 0;
                auto item_max_cross_size = has_cross_max_size(item.box) ? specified_cross_max_size(item.box) : CSSPixels::max();
                auto item_preferred_outer_cross_size = css_clamp(flex_container_inner_cross_size, item_min_cross_size, item_max_cross_size);
                auto item_inner_cross_size = item_preferred_outer_cross_size - item.margins.cross_before - item.margins.cross_after - item.padding.cross_before - item.padding.cross_after - item.borders.cross_before - item.borders.cross_after;
                set_cross_size(item.box, item_inner_cross_size);
            }
        }
    }

    // 3. Determine the flex base size and hypothetical main size of each item
    for (auto& item : m_flex_items) {
        if (item.box->is_replaced_box()) {
            // FIXME: Get rid of prepare_for_replaced_layout() and make replaced elements figure out their intrinsic size lazily.
            static_cast<ReplacedBox&>(*item.box).prepare_for_replaced_layout();
        }
        determine_flex_base_size_and_hypothetical_main_size(item);
    }

    if (available_space.width.is_intrinsic_sizing_constraint() || available_space.height.is_intrinsic_sizing_constraint()) {
        // We're computing intrinsic size for the flex container. This happens at the end of run().
    } else {
        // 4. Determine the main size of the flex container
        // Determine the main size of the flex container using the rules of the formatting context in which it participates.
        // NOTE: The automatic block size of a block-level flex container is its max-content size.

        // NOTE: We've already handled this in the parent formatting context.
        //       Specifically, all formatting contexts will have assigned width & height to the flex container
        //       before this formatting context runs.
    }

    // 5. Collect flex items into flex lines:
    // After this step no additional items are to be added to flex_lines or any of its items!
    collect_flex_items_into_flex_lines();

    // 6. Resolve the flexible lengths
    resolve_flexible_lengths();

    // Cross Size Determination
    // 7. Determine the hypothetical cross size of each item
    for (auto& item : m_flex_items) {
        determine_hypothetical_cross_size_of_item(item, false);
    }

    // 8. Calculate the cross size of each flex line.
    calculate_cross_size_of_each_flex_line();

    // 9. Handle 'align-content: stretch'.
    handle_align_content_stretch();

    // 10. Collapse visibility:collapse items.
    // FIXME: This

    // 11. Determine the used cross size of each flex item.
    determine_used_cross_size_of_each_flex_item();

    // 12. Distribute any remaining free space.
    distribute_any_remaining_free_space();

    // 13. Resolve cross-axis auto margins.
    resolve_cross_axis_auto_margins();

    // 14. Align all flex items along the cross-axis
    align_all_flex_items_along_the_cross_axis();

    // 15. Determine the flex container’s used cross size:
    determine_flex_container_used_cross_size();

    {
        // https://drafts.csswg.org/css-flexbox-1/#definite-sizes
        // 4. Once the cross size of a flex line has been determined,
        //    the cross sizes of items in auto-sized flex containers are also considered definite for the purpose of layout.
        auto const& flex_container_computed_cross_size = is_row_layout() ? flex_container().computed_values().height() : flex_container().computed_values().width();
        if (flex_container_computed_cross_size.is_auto()) {
            for (auto& item : m_flex_items) {
                set_cross_size(item.box, item.cross_size.value());
            }
        }
    }

    {
        // NOTE: We re-resolve cross sizes here, now that we can resolve percentages.

        // 7. Determine the hypothetical cross size of each item
        for (auto& item : m_flex_items) {
            determine_hypothetical_cross_size_of_item(item, true);
        }

        // 11. Determine the used cross size of each flex item.
        determine_used_cross_size_of_each_flex_item();
    }

    // 16. Align all flex lines (per align-content)
    align_all_flex_lines();

    if (available_space.width.is_intrinsic_sizing_constraint() || available_space.height.is_intrinsic_sizing_constraint()) {
        // We're computing intrinsic size for the flex container.
        determine_intrinsic_size_of_flex_container();
    } else {
        // This is a normal layout (not intrinsic sizing).
        // AD-HOC: Finally, layout the inside of all flex items.
        copy_dimensions_from_flex_items_to_boxes();
        for (auto& item : m_flex_items) {
            if (auto independent_formatting_context = layout_inside(item.box, LayoutMode::Normal, item.used_values.available_inner_space_or_constraints_from(m_available_space_for_items->space)))
                independent_formatting_context->parent_context_did_dimension_child_root_box();

            compute_inset(item.box);
        }
    }
}

void FlexFormattingContext::parent_context_did_dimension_child_root_box()
{
    flex_container().for_each_child_of_type<Box>([&](Layout::Box& box) {
        if (box.is_absolutely_positioned()) {
            auto& cb_state = m_state.get(*box.containing_block());
            auto available_width = AvailableSize::make_definite(cb_state.content_width() + cb_state.padding_left + cb_state.padding_right);
            auto available_height = AvailableSize::make_definite(cb_state.content_height() + cb_state.padding_top + cb_state.padding_bottom);
            layout_absolutely_positioned_element(box, AvailableSpace(available_width, available_height));
        }
    });
}

void FlexFormattingContext::populate_specified_margins(FlexItem& item, CSS::FlexDirection flex_direction) const
{
    auto width_of_containing_block = m_flex_container_state.content_width();
    // FIXME: This should also take reverse-ness into account
    if (flex_direction == CSS::FlexDirection::Row || flex_direction == CSS::FlexDirection::RowReverse) {
        item.borders.main_before = item.box->computed_values().border_left().width;
        item.borders.main_after = item.box->computed_values().border_right().width;
        item.borders.cross_before = item.box->computed_values().border_top().width;
        item.borders.cross_after = item.box->computed_values().border_bottom().width;

        item.padding.main_before = item.box->computed_values().padding().left().to_px(item.box, width_of_containing_block);
        item.padding.main_after = item.box->computed_values().padding().right().to_px(item.box, width_of_containing_block);
        item.padding.cross_before = item.box->computed_values().padding().top().to_px(item.box, width_of_containing_block);
        item.padding.cross_after = item.box->computed_values().padding().bottom().to_px(item.box, width_of_containing_block);

        item.margins.main_before = item.box->computed_values().margin().left().to_px(item.box, width_of_containing_block);
        item.margins.main_after = item.box->computed_values().margin().right().to_px(item.box, width_of_containing_block);
        item.margins.cross_before = item.box->computed_values().margin().top().to_px(item.box, width_of_containing_block);
        item.margins.cross_after = item.box->computed_values().margin().bottom().to_px(item.box, width_of_containing_block);

        item.margins.main_before_is_auto = item.box->computed_values().margin().left().is_auto();
        item.margins.main_after_is_auto = item.box->computed_values().margin().right().is_auto();
        item.margins.cross_before_is_auto = item.box->computed_values().margin().top().is_auto();
        item.margins.cross_after_is_auto = item.box->computed_values().margin().bottom().is_auto();
    } else {
        item.borders.main_before = item.box->computed_values().border_top().width;
        item.borders.main_after = item.box->computed_values().border_bottom().width;
        item.borders.cross_before = item.box->computed_values().border_left().width;
        item.borders.cross_after = item.box->computed_values().border_right().width;

        item.padding.main_before = item.box->computed_values().padding().top().to_px(item.box, width_of_containing_block);
        item.padding.main_after = item.box->computed_values().padding().bottom().to_px(item.box, width_of_containing_block);
        item.padding.cross_before = item.box->computed_values().padding().left().to_px(item.box, width_of_containing_block);
        item.padding.cross_after = item.box->computed_values().padding().right().to_px(item.box, width_of_containing_block);

        item.margins.main_before = item.box->computed_values().margin().top().to_px(item.box, width_of_containing_block);
        item.margins.main_after = item.box->computed_values().margin().bottom().to_px(item.box, width_of_containing_block);
        item.margins.cross_before = item.box->computed_values().margin().left().to_px(item.box, width_of_containing_block);
        item.margins.cross_after = item.box->computed_values().margin().right().to_px(item.box, width_of_containing_block);

        item.margins.main_before_is_auto = item.box->computed_values().margin().top().is_auto();
        item.margins.main_after_is_auto = item.box->computed_values().margin().bottom().is_auto();
        item.margins.cross_before_is_auto = item.box->computed_values().margin().left().is_auto();
        item.margins.cross_after_is_auto = item.box->computed_values().margin().right().is_auto();
    }
}

// https://www.w3.org/TR/css-flexbox-1/#flex-items
void FlexFormattingContext::generate_anonymous_flex_items()
{
    // More like, sift through the already generated items.
    // After this step no items are to be added or removed from flex_items!
    // It holds every item we need to consider and there should be nothing in the following
    // calculations that could change that.
    // This is particularly important since we take references to the items stored in flex_items
    // later, whose addresses won't be stable if we added or removed any items.
    HashMap<int, Vector<FlexItem>> order_item_bucket;

    flex_container().for_each_child_of_type<Box>([&](Box& child_box) {
        if (can_skip_is_anonymous_text_run(child_box))
            return IterationDecision::Continue;

        // Skip any "out-of-flow" children
        if (child_box.is_out_of_flow(*this))
            return IterationDecision::Continue;

        child_box.set_flex_item(true);
        FlexItem item = { child_box, m_state.get_mutable(child_box) };
        populate_specified_margins(item, m_flex_direction);

        auto& order_bucket = order_item_bucket.ensure(child_box.computed_values().order());
        order_bucket.append(move(item));

        return IterationDecision::Continue;
    });

    auto keys = order_item_bucket.keys();

    if (is_direction_reverse()) {
        quick_sort(keys, [](auto& a, auto& b) { return a > b; });
    } else {
        quick_sort(keys, [](auto& a, auto& b) { return a < b; });
    }

    for (auto key : keys) {
        auto order_bucket = order_item_bucket.get(key);
        if (order_bucket.has_value()) {
            auto& items = order_bucket.value();
            if (is_direction_reverse()) {
                for (auto item : items.in_reverse()) {
                    m_flex_items.append(move(item));
                }
            } else {
                for (auto item : items) {
                    m_flex_items.append(move(item));
                }
            }
        }
    }
}

bool FlexFormattingContext::has_definite_main_size(LayoutState::UsedValues const& used_values) const
{
    return is_row_layout() ? used_values.has_definite_width() : used_values.has_definite_height();
}

CSSPixels FlexFormattingContext::inner_main_size(LayoutState::UsedValues const& used_values) const
{
    return is_row_layout() ? used_values.content_width() : used_values.content_height();
}

CSSPixels FlexFormattingContext::inner_cross_size(LayoutState::UsedValues const& used_values) const
{
    return is_row_layout() ? used_values.content_height() : used_values.content_width();
}

bool FlexFormattingContext::has_main_min_size(Box const& box) const
{
    auto const& value = is_row_layout() ? box.computed_values().min_width() : box.computed_values().min_height();
    return !value.is_auto();
}

bool FlexFormattingContext::has_cross_min_size(Box const& box) const
{
    auto const& value = is_row_layout() ? box.computed_values().min_height() : box.computed_values().min_width();
    return !value.is_auto();
}

bool FlexFormattingContext::has_definite_cross_size(LayoutState::UsedValues const& used_values) const
{
    return is_row_layout() ? used_values.has_definite_height() : used_values.has_definite_width();
}

CSSPixels FlexFormattingContext::specified_main_min_size(Box const& box) const
{
    return is_row_layout()
        ? get_pixel_width(box, box.computed_values().min_width())
        : get_pixel_height(box, box.computed_values().min_height());
}

CSSPixels FlexFormattingContext::specified_cross_min_size(Box const& box) const
{
    return is_row_layout()
        ? get_pixel_height(box, box.computed_values().min_height())
        : get_pixel_width(box, box.computed_values().min_width());
}

bool FlexFormattingContext::has_main_max_size(Box const& box) const
{
    return !should_treat_main_max_size_as_none(box);
}

bool FlexFormattingContext::has_cross_max_size(Box const& box) const
{
    return !should_treat_cross_max_size_as_none(box);
}

CSSPixels FlexFormattingContext::specified_main_max_size(Box const& box) const
{
    return is_row_layout()
        ? get_pixel_width(box, box.computed_values().max_width())
        : get_pixel_height(box, box.computed_values().max_height());
}

CSSPixels FlexFormattingContext::specified_cross_max_size(Box const& box) const
{
    return is_row_layout()
        ? get_pixel_height(box, box.computed_values().max_height())
        : get_pixel_width(box, box.computed_values().max_width());
}

bool FlexFormattingContext::is_cross_auto(Box const& box) const
{
    auto& cross_length = is_row_layout() ? box.computed_values().height() : box.computed_values().width();
    return cross_length.is_auto();
}

void FlexFormattingContext::set_main_size(Box const& box, CSSPixels size)
{
    if (is_row_layout())
        m_state.get_mutable(box).set_content_width(size);
    else
        m_state.get_mutable(box).set_content_height(size);
}

void FlexFormattingContext::set_cross_size(Box const& box, CSSPixels size)
{
    if (is_row_layout())
        m_state.get_mutable(box).set_content_height(size);
    else
        m_state.get_mutable(box).set_content_width(size);
}

void FlexFormattingContext::set_offset(Box const& box, CSSPixels main_offset, CSSPixels cross_offset)
{
    if (is_row_layout())
        m_state.get_mutable(box).offset = CSSPixelPoint { main_offset, cross_offset };
    else
        m_state.get_mutable(box).offset = CSSPixelPoint { cross_offset, main_offset };
}

void FlexFormattingContext::set_main_axis_first_margin(FlexItem& item, CSSPixels margin)
{
    item.margins.main_before = margin;
    if (is_row_layout())
        m_state.get_mutable(item.box).margin_left = margin;
    else
        m_state.get_mutable(item.box).margin_top = margin;
}

void FlexFormattingContext::set_main_axis_second_margin(FlexItem& item, CSSPixels margin)
{
    item.margins.main_after = margin;
    if (is_row_layout())
        m_state.get_mutable(item.box).margin_right = margin;
    else
        m_state.get_mutable(item.box).margin_bottom = margin;
}

// https://drafts.csswg.org/css-flexbox-1/#algo-available
void FlexFormattingContext::determine_available_space_for_items(AvailableSpace const& available_space)
{
    if (is_row_layout()) {
        m_available_space_for_items = AxisAgnosticAvailableSpace {
            .main = available_space.width,
            .cross = available_space.height,
            .space = { available_space.width, available_space.height },
        };
    } else {
        m_available_space_for_items = AxisAgnosticAvailableSpace {
            .main = available_space.height,
            .cross = available_space.width,
            .space = { available_space.width, available_space.height },
        };
    }
}

// https://drafts.csswg.org/css-flexbox-1/#propdef-flex-basis
CSS::FlexBasis FlexFormattingContext::used_flex_basis_for_item(FlexItem const& item) const
{
    auto flex_basis = item.box->computed_values().flex_basis();

    if (flex_basis.has<CSS::Size>() && flex_basis.get<CSS::Size>().is_auto()) {
        // https://drafts.csswg.org/css-flexbox-1/#valdef-flex-basis-auto
        // When specified on a flex item, the auto keyword retrieves the value of the main size property as the used flex-basis.
        // If that value is itself auto, then the used value is content.
        auto const& main_size = is_row_layout() ? item.box->computed_values().width() : item.box->computed_values().height();

        if (main_size.is_auto()) {
            flex_basis = CSS::FlexBasisContent {};
        } else {
            flex_basis = main_size;
        }
    }

    // For example, percentage values of flex-basis are resolved against the flex item’s containing block
    // (i.e. its flex container); and if that containing block’s size is indefinite,
    // the used value for flex-basis is content.
    if (flex_basis.has<CSS::Size>()
        && flex_basis.get<CSS::Size>().is_percentage()
        && !has_definite_main_size(m_flex_container_state)) {
        flex_basis = CSS::FlexBasisContent {};
    }

    return flex_basis;
}

CSSPixels FlexFormattingContext::calculate_main_size_from_cross_size_and_aspect_ratio(CSSPixels cross_size, CSSPixelFraction aspect_ratio) const
{
    if (is_row_layout())
        return cross_size * aspect_ratio;
    return cross_size / aspect_ratio;
}

CSSPixels FlexFormattingContext::calculate_cross_size_from_main_size_and_aspect_ratio(CSSPixels main_size, CSSPixelFraction aspect_ratio) const
{
    if (is_row_layout())
        return main_size / aspect_ratio;
    return main_size * aspect_ratio;
}

// This function takes a size in the main axis and adjusts it according to the aspect ratio of the box
// if the min/max constraints in the cross axis forces us to come up with a new main axis size.
CSSPixels FlexFormattingContext::adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(Box const& box, CSSPixels main_size, CSS::Size const& min_cross_size, CSS::Size const& max_cross_size) const
{
    if (!should_treat_cross_max_size_as_none(box)) {
        auto max_cross_size_px = max_cross_size.to_px(box, !is_row_layout() ? m_flex_container_state.content_width() : m_flex_container_state.content_height());
        main_size = min(main_size, calculate_main_size_from_cross_size_and_aspect_ratio(max_cross_size_px, box.preferred_aspect_ratio().value()));
    }

    if (!min_cross_size.is_auto()) {
        auto min_cross_size_px = min_cross_size.to_px(box, !is_row_layout() ? m_flex_container_state.content_width() : m_flex_container_state.content_height());
        main_size = max(main_size, calculate_main_size_from_cross_size_and_aspect_ratio(min_cross_size_px, box.preferred_aspect_ratio().value()));
    }

    return main_size;
}

// https://www.w3.org/TR/css-flexbox-1/#algo-main-item
void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(FlexItem& item)
{
    auto& child_box = item.box;

    item.flex_base_size = [&] {
        item.used_flex_basis = used_flex_basis_for_item(item);

        item.used_flex_basis_is_definite = [&](CSS::FlexBasis const& flex_basis) -> bool {
            if (!flex_basis.has<CSS::Size>())
                return false;
            auto const& size = flex_basis.get<CSS::Size>();
            if (size.is_auto() || size.is_min_content() || size.is_max_content() || size.is_fit_content())
                return false;
            if (size.is_length())
                return true;

            bool can_resolve_percentages = is_row_layout()
                ? m_flex_container_state.has_definite_width()
                : m_flex_container_state.has_definite_height();

            if (size.is_calculated()) {
                auto const& calc_value = size.calculated();
                if (calc_value.resolves_to_percentage())
                    return can_resolve_percentages;
                if (calc_value.resolves_to_length()) {
                    if (calc_value.contains_percentage())
                        return can_resolve_percentages;
                    return true;
                }
                return false;
            }
            VERIFY(size.is_percentage());
            return can_resolve_percentages;
        }(*item.used_flex_basis);

        // A. If the item has a definite used flex basis, that’s the flex base size.
        if (item.used_flex_basis_is_definite) {
            auto const& size = item.used_flex_basis->get<CSS::Size>();
            if (is_row_layout())
                return get_pixel_width(child_box, size);
            return get_pixel_height(child_box, size);
        }

        // B. If the flex item has ...
        //    - an intrinsic aspect ratio,
        //    - a used flex basis of content, and
        //    - a definite cross size,
        if (item.box->has_preferred_aspect_ratio()
            && item.used_flex_basis->has<CSS::FlexBasisContent>()
            && has_definite_cross_size(item)) {
            // flex_base_size is calculated from definite cross size and intrinsic aspect ratio
            return adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(
                item.box,
                calculate_main_size_from_cross_size_and_aspect_ratio(inner_cross_size(item), item.box->preferred_aspect_ratio().value()),
                computed_cross_min_size(item.box),
                computed_cross_max_size(item.box));
        }

        // C. If the used flex basis is content or depends on its available space,
        //    and the flex container is being sized under a min-content or max-content constraint
        //    (e.g. when performing automatic table layout [CSS21]), size the item under that constraint.
        //    The flex base size is the item’s resulting main size.
        if (item.used_flex_basis->has<CSS::FlexBasisContent>() && m_available_space_for_items->main.is_intrinsic_sizing_constraint()) {
            if (m_available_space_for_items->main.is_min_content())
                return calculate_min_content_main_size(item);
            return calculate_max_content_main_size(item);
        }

        // D. Otherwise, if the used flex basis is content or depends on its available space,
        //    the available main size is infinite, and the flex item’s inline axis is parallel to the main axis,
        //    lay the item out using the rules for a box in an orthogonal flow [CSS3-WRITING-MODES].
        //    The flex base size is the item’s max-content main size.
        if (item.used_flex_basis->has<CSS::FlexBasisContent>()
            // FIXME: && main_size is infinite && inline axis is parallel to the main axis
            && false && false) {
            TODO();
            // Use rules for a flex_container in orthogonal flow
        }

        // E. Otherwise, size the item into the available space using its used flex basis in place of its main size,
        //    treating a value of content as max-content. If a cross size is needed to determine the main size
        //    (e.g. when the flex item’s main size is in its block axis) and the flex item’s cross size is auto and not definite,
        //    in this calculation use fit-content as the flex item’s cross size.
        //    The flex base size is the item’s resulting main size.

        // NOTE: If the flex item has a definite main size, just use that as the flex base size.
        if (has_definite_main_size(item))
            return inner_main_size(item);

        // NOTE: There's a fundamental problem with many CSS specifications in that they neglect to mention
        //       which width to provide when calculating the intrinsic height of a box in various situations.
        //       Spec bug: https://github.com/w3c/csswg-drafts/issues/2890

        // NOTE: This is one of many situations where that causes trouble: if this is a flex column layout,
        //       we may need to calculate the intrinsic height of a flex item. This requires a width, but a
        //       width won't be determined until later on in the flex layout algorithm.
        //       In the specific case above (E), the spec mentions using `fit-content` in place of `auto`
        //       if "a cross size is needed to determine the main size", so that's exactly what we do.

        // NOTE: Finding a suitable width for intrinsic height determination actually happens elsewhere,
        //       in the various helpers that calculate the intrinsic sizes of a flex item,
        //       e.g. calculate_min_content_main_size().

        if (item.used_flex_basis->has<CSS::FlexBasisContent>()) {
            return calculate_max_content_main_size(item);
        }

        return calculate_fit_content_main_size(item);
    }();

    // AD-HOC: This is not mentioned in the spec, but if the item has an aspect ratio,
    //         we may need to adjust the main size in response to cross size min/max constraints.
    if (item.box->has_preferred_aspect_ratio()) {
        item.flex_base_size = adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(child_box, item.flex_base_size, computed_cross_min_size(child_box), computed_cross_max_size(child_box));
    }

    // The hypothetical main size is the item’s flex base size clamped according to its used min and max main sizes (and flooring the content box size at zero).
    auto clamp_min = has_main_min_size(child_box) ? specified_main_min_size(child_box) : automatic_minimum_size(item);
    auto clamp_max = has_main_max_size(child_box) ? specified_main_max_size(child_box) : CSSPixels::max();
    item.hypothetical_main_size = max(CSSPixels(0), css_clamp(item.flex_base_size, clamp_min, clamp_max));

    // NOTE: At this point, we set the hypothetical main size as the flex item's *temporary* main size.
    //       The size may change again when we resolve flexible lengths, but this is necessary in order for
    //       descendants of this flex item to resolve percentage sizes against something.
    //
    //       The spec just barely hand-waves about this, but it seems to *roughly* match what other engines do.
    //       See "Note" section here: https://drafts.csswg.org/css-flexbox-1/#definite-sizes
    if (is_row_layout())
        item.used_values.set_temporary_content_width(item.hypothetical_main_size);
    else
        item.used_values.set_temporary_content_height(item.hypothetical_main_size);
}

// https://drafts.csswg.org/css-flexbox-1/#min-size-auto
CSSPixels FlexFormattingContext::automatic_minimum_size(FlexItem const& item) const
{
    // To provide a more reasonable default minimum size for flex items,
    // the used value of a main axis automatic minimum size on a flex item that is not a scroll container is its content-based minimum size;
    // for scroll containers the automatic minimum size is zero, as usual.
    if (!item.box->is_scroll_container())
        return content_based_minimum_size(item);
    return 0;
}

// https://drafts.csswg.org/css-flexbox-1/#specified-size-suggestion
Optional<CSSPixels> FlexFormattingContext::specified_size_suggestion(FlexItem const& item) const
{
    // If the item’s preferred main size is definite and not automatic,
    // then the specified size suggestion is that size. It is otherwise undefined.
    if (has_definite_main_size(item) && !should_treat_main_size_as_auto(item.box)) {
        // NOTE: We use get_pixel_{width,height} to ensure that CSS box-sizing is respected.
        return is_row_layout() ? get_pixel_width(item.box, computed_main_size(item.box)) : get_pixel_height(item.box, computed_main_size(item.box));
    }
    return {};
}

// https://drafts.csswg.org/css-flexbox-1/#content-size-suggestion
CSSPixels FlexFormattingContext::content_size_suggestion(FlexItem const& item) const
{
    auto suggestion = calculate_min_content_main_size(item);

    if (item.box->has_preferred_aspect_ratio()) {
        suggestion = adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(item.box, suggestion, computed_cross_min_size(item.box), computed_cross_max_size(item.box));
    }

    return suggestion;
}

// https://drafts.csswg.org/css-flexbox-1/#transferred-size-suggestion
Optional<CSSPixels> FlexFormattingContext::transferred_size_suggestion(FlexItem const& item) const
{
    // If the item has a preferred aspect ratio and its preferred cross size is definite,
    // then the transferred size suggestion is that size
    // (clamped by its minimum and maximum cross sizes if they are definite), converted through the aspect ratio.
    if (item.box->has_preferred_aspect_ratio() && has_definite_cross_size(item)) {
        auto aspect_ratio = item.box->preferred_aspect_ratio().value();
        return adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(
            item.box,
            calculate_main_size_from_cross_size_and_aspect_ratio(inner_cross_size(item), aspect_ratio),
            computed_cross_min_size(item.box),
            computed_cross_max_size(item.box));
    }

    // It is otherwise undefined.
    return {};
}

// https://drafts.csswg.org/css-flexbox-1/#content-based-minimum-size
CSSPixels FlexFormattingContext::content_based_minimum_size(FlexItem const& item) const
{
    auto unclamped_size = [&] {
        // The content-based minimum size of a flex item is the smaller of its specified size suggestion
        // and its content size suggestion if its specified size suggestion exists;
        if (auto specified_size_suggestion = this->specified_size_suggestion(item); specified_size_suggestion.has_value()) {
            return min(specified_size_suggestion.value(), content_size_suggestion(item));
        }

        // otherwise, the smaller of its transferred size suggestion and its content size suggestion
        // if the element is replaced and its transferred size suggestion exists;
        if (item.box->is_replaced_box()) {
            if (auto transferred_size_suggestion = this->transferred_size_suggestion(item); transferred_size_suggestion.has_value()) {
                return min(transferred_size_suggestion.value(), content_size_suggestion(item));
            }
        }

        // otherwise its content size suggestion.
        return content_size_suggestion(item);
    }();

    // In all cases, the size is clamped by the maximum main size if it’s definite.
    if (has_main_max_size(item.box)) {
        return min(unclamped_size, specified_main_max_size(item.box));
    }
    return unclamped_size;
}

// https://www.w3.org/TR/css-flexbox-1/#algo-line-break
void FlexFormattingContext::collect_flex_items_into_flex_lines()
{
    // FIXME: Also support wrap-reverse

    // If the flex container is single-line, collect all the flex items into a single flex line.
    if (is_single_line()) {
        FlexLine line;
        for (auto& item : m_flex_items) {
            line.items.append(item);
        }
        m_flex_lines.append(move(line));
        return;
    }

    // Otherwise, starting from the first uncollected item, collect consecutive items one by one
    // until the first time that the next collected item would not fit into the flex container’s inner main size
    // (or until a forced break is encountered, see §10 Fragmenting Flex Layout).
    // If the very first uncollected item wouldn't fit, collect just it into the line.

    // For this step, the size of a flex item is its outer hypothetical main size. (Note: This can be negative.)

    // Repeat until all flex items have been collected into flex lines.

    FlexLine line;
    CSSPixels line_main_size = 0;
    for (auto& item : m_flex_items) {
        auto const outer_hypothetical_main_size = item.outer_hypothetical_main_size();
        if (!line.items.is_empty() && (line_main_size + outer_hypothetical_main_size) > m_available_space_for_items->main) {
            m_flex_lines.append(move(line));
            line = {};
            line_main_size = 0;
        }
        line.items.append(item);
        line_main_size += outer_hypothetical_main_size;
        // CSS-FLEXBOX-2: Account for gap between flex items.
        line_main_size += main_gap();
    }
    m_flex_lines.append(move(line));
}

// https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths
void FlexFormattingContext::resolve_flexible_lengths_for_line(FlexLine& line)
{
    // AD-HOC: The spec tells us to use the "flex container’s inner main size" in this algorithm,
    //         but that doesn't work when we're sizing under a max-content constraint.
    //         In that case, there is effectively infinite size available in the main axis,
    //         but the inner main size has not been assigned yet.
    //         We solve this by calculating our own "available main size" here, which is essentially
    //         infinity under max-content, 0 under min-content, and the inner main size otherwise.
    AvailableSize available_main_size { AvailableSize::make_indefinite() };
    if (m_available_space_for_items->main.is_intrinsic_sizing_constraint())
        available_main_size = m_available_space_for_items->main;
    else
        available_main_size = AvailableSize::make_definite(inner_main_size(m_flex_container_state));

    // 1. Determine the used flex factor.

    // Sum the outer hypothetical main sizes of all items on the line.
    // If the sum is less than the flex container’s inner main size,
    // use the flex grow factor for the rest of this algorithm; otherwise, use the flex shrink factor
    enum FlexFactor {
        FlexGrowFactor,
        FlexShrinkFactor
    };
    auto used_flex_factor = [&]() -> FlexFactor {
        CSSPixels sum = 0;
        for (auto const& item : line.items) {
            sum += item.outer_hypothetical_main_size();
        }
        // CSS-FLEXBOX-2: Account for gap between flex items.
        sum += main_gap() * (line.items.size() - 1);
        // AD-HOC: Note that we're using our own "available main size" explained above
        //         instead of the flex container’s inner main size.
        if (sum < available_main_size)
            return FlexFactor::FlexGrowFactor;
        return FlexFactor::FlexShrinkFactor;
    }();

    // 2. Each item in the flex line has a target main size, initially set to its flex base size.
    //    Each item is initially unfrozen and may become frozen.
    for (auto& item : line.items) {
        item.target_main_size = item.flex_base_size;
        item.frozen = false;
    }

    // 3. Size inflexible items.

    for (FlexItem& item : line.items) {
        if (used_flex_factor == FlexFactor::FlexGrowFactor) {
            item.flex_factor = item.box->computed_values().flex_grow();
        } else if (used_flex_factor == FlexFactor::FlexShrinkFactor) {
            item.flex_factor = item.box->computed_values().flex_shrink();
        }
        // Freeze, setting its target main size to its hypothetical main size…
        // - any item that has a flex factor of zero
        // - if using the flex grow factor: any item that has a flex base size greater than its hypothetical main size
        // - if using the flex shrink factor: any item that has a flex base size smaller than its hypothetical main size
        if (item.flex_factor.value() == 0
            || (used_flex_factor == FlexFactor::FlexGrowFactor && item.flex_base_size > item.hypothetical_main_size)
            || (used_flex_factor == FlexFactor::FlexShrinkFactor && item.flex_base_size < item.hypothetical_main_size)) {
            item.frozen = true;
            item.target_main_size = item.hypothetical_main_size;
        }
    }

    // 4. Calculate initial free space

    // Sum the outer sizes of all items on the line, and subtract this from the flex container’s inner main size.
    // For frozen items, use their outer target main size; for other items, use their outer flex base size.
    auto calculate_remaining_free_space = [&]() -> Optional<CSSPixels> {
        // AD-HOC: If the container is sized under max-content constraints, then remaining_free_space won't have
        //         a value to avoid leaking an infinite value into layout calculations.
        if (available_main_size.is_intrinsic_sizing_constraint())
            return {};
        CSSPixels sum = 0;
        for (auto const& item : line.items) {
            if (item.frozen)
                sum += item.outer_target_main_size();
            else
                sum += item.outer_flex_base_size();
        }
        // CSS-FLEXBOX-2: Account for gap between flex items.
        sum += main_gap() * (line.items.size() - 1);

        // AD-HOC: Note that we're using our own "available main size" explained above
        //         instead of the flex container’s inner main size.
        return available_main_size.to_px_or_zero() - sum;
    };
    auto const initial_free_space = calculate_remaining_free_space();

    // 5. Loop
    while (true) {
        // a. Check for flexible items.
        //    If all the flex items on the line are frozen, free space has been distributed; exit this loop.
        if (all_of(line.items, [](auto const& item) { return item.frozen; })) {
            break;
        }

        // b. Calculate the remaining free space as for initial free space, above.
        line.remaining_free_space = calculate_remaining_free_space();

        // If the sum of the unfrozen flex items’ flex factors is less than one, multiply the initial free space by this sum.
        if (auto sum_of_flex_factor_of_unfrozen_items = line.sum_of_flex_factor_of_unfrozen_items(); sum_of_flex_factor_of_unfrozen_items < 1 && initial_free_space.has_value()) {
            auto value = CSSPixels::nearest_value_for(initial_free_space.value() * sum_of_flex_factor_of_unfrozen_items);
            // If the magnitude of this value is less than the magnitude of the remaining free space, use this as the remaining free space.
            if (abs(value) < abs(line.remaining_free_space.value()))
                line.remaining_free_space = value;
        }

        // AD-HOC: We allow the remaining free space to be infinite, but we can't let infinity
        //         leak into the layout geometry, so we treat infinity as zero when used in arithmetic.
        auto remaining_free_space_or_zero_if_infinite = line.remaining_free_space.has_value() ? line.remaining_free_space.value() : 0;

        // c. If the remaining free space is non-zero, distribute it proportional to the flex factors:
        if (line.remaining_free_space != 0) {
            // If using the flex grow factor
            if (used_flex_factor == FlexFactor::FlexGrowFactor) {
                // For every unfrozen item on the line,
                // find the ratio of the item’s flex grow factor to the sum of the flex grow factors of all unfrozen items on the line.
                auto sum_of_flex_factor_of_unfrozen_items = line.sum_of_flex_factor_of_unfrozen_items();
                for (auto& item : line.items) {
                    if (item.frozen)
                        continue;
                    double ratio = item.flex_factor.value() / sum_of_flex_factor_of_unfrozen_items;
                    // Set the item’s target main size to its flex base size plus a fraction of the remaining free space proportional to the ratio.
                    item.target_main_size = item.flex_base_size + remaining_free_space_or_zero_if_infinite.scaled(ratio);
                }
            }
            // If using the flex shrink factor
            else if (used_flex_factor == FlexFactor::FlexShrinkFactor) {
                // For every unfrozen item on the line, multiply its flex shrink factor by its inner flex base size, and note this as its scaled flex shrink factor.
                for (auto& item : line.items) {
                    if (item.frozen)
                        continue;
                    item.scaled_flex_shrink_factor = item.flex_factor.value() * item.flex_base_size.to_double();
                }
                auto sum_of_scaled_flex_shrink_factors_of_all_unfrozen_items_on_line = line.sum_of_scaled_flex_shrink_factor_of_unfrozen_items();
                for (auto& item : line.items) {
                    if (item.frozen)
                        continue;
                    // Find the ratio of the item’s scaled flex shrink factor to the sum of the scaled flex shrink factors of all unfrozen items on the line.
                    double ratio = 1.0;
                    if (sum_of_scaled_flex_shrink_factors_of_all_unfrozen_items_on_line != 0)
                        ratio = item.scaled_flex_shrink_factor / sum_of_scaled_flex_shrink_factors_of_all_unfrozen_items_on_line;

                    // Set the item’s target main size to its flex base size minus a fraction of the absolute value of the remaining free space proportional to the ratio.
                    // (Note this may result in a negative inner main size; it will be corrected in the next step.)
                    item.target_main_size = item.flex_base_size - abs(remaining_free_space_or_zero_if_infinite).scaled(ratio);
                }
            }
        }

        // d. Fix min/max violations.
        CSSPixels total_violation = 0;

        // Clamp each non-frozen item’s target main size by its used min and max main sizes and floor its content-box size at zero.
        for (auto& item : line.items) {
            if (item.frozen)
                continue;
            auto used_min_main_size = has_main_min_size(item.box)
                ? specified_main_min_size(item.box)
                : automatic_minimum_size(item);

            auto used_max_main_size = has_main_max_size(item.box)
                ? specified_main_max_size(item.box)
                : CSSPixels::max();

            auto original_target_main_size = item.target_main_size;
            item.target_main_size = css_clamp(item.target_main_size, used_min_main_size, used_max_main_size);
            item.target_main_size = max(item.target_main_size, CSSPixels(0));

            // If the item’s target main size was made smaller by this, it’s a max violation.
            if (item.target_main_size < original_target_main_size)
                item.is_max_violation = true;

            // If the item’s target main size was made larger by this, it’s a min violation.
            if (item.target_main_size > original_target_main_size)
                item.is_min_violation = true;

            total_violation += item.target_main_size - original_target_main_size;
        }

        // e. Freeze over-flexed items.
        //    The total violation is the sum of the adjustments from the previous step ∑(clamped size - unclamped size).

        // If the total violation is:
        // Zero
        //   Freeze all items.
        if (total_violation == 0) {
            for (auto& item : line.items) {
                if (!item.frozen)
                    item.frozen = true;
            }
        }
        // Positive
        //   Freeze all the items with min violations.
        else if (total_violation > 0) {
            for (auto& item : line.items) {
                if (!item.frozen && item.is_min_violation)
                    item.frozen = true;
            }
        }
        // Negative
        //   Freeze all the items with max violations.
        else {
            for (auto& item : line.items) {
                if (!item.frozen && item.is_max_violation)
                    item.frozen = true;
            }
        }
        // NOTE: This freezes at least one item, ensuring that the loop makes progress and eventually terminates.

        // f. Return to the start of this loop.
    }

    // NOTE: Calculate the remaining free space once again here, since it's needed later when aligning items.
    line.remaining_free_space = calculate_remaining_free_space();

    // 6. Set each item’s used main size to its target main size.
    for (auto& item : line.items) {
        item.main_size = item.target_main_size;
        set_main_size(item.box, item.target_main_size);
    }
}

// https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths
void FlexFormattingContext::resolve_flexible_lengths()
{
    for (auto& line : m_flex_lines) {
        resolve_flexible_lengths_for_line(line);
    }
}

// https://drafts.csswg.org/css-flexbox-1/#algo-cross-item
void FlexFormattingContext::determine_hypothetical_cross_size_of_item(FlexItem& item, bool resolve_percentage_min_max_sizes)
{
    // Determine the hypothetical cross size of each item by performing layout
    // as if it were an in-flow block-level box with the used main size
    // and the given available space, treating auto as fit-content.

    auto const& computed_min_size = this->computed_cross_min_size(item.box);
    auto const& computed_max_size = this->computed_cross_max_size(item.box);

    auto clamp_min = (!computed_min_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_min_size.contains_percentage())) ? specified_cross_min_size(item.box) : 0;
    auto clamp_max = (!should_treat_cross_max_size_as_none(item.box) && (resolve_percentage_min_max_sizes || !computed_max_size.contains_percentage())) ? specified_cross_max_size(item.box) : CSSPixels::max();

    // If we have a definite cross size, this is easy! No need to perform layout, we can just use it as-is.
    if (has_definite_cross_size(item)) {
        // To avoid subtracting padding and border twice for `box-sizing: border-box` only min and max clamp should happen on a second pass
        if (resolve_percentage_min_max_sizes) {
            item.hypothetical_cross_size = css_clamp(item.hypothetical_cross_size, clamp_min, clamp_max);
            return;
        }

        item.hypothetical_cross_size = css_clamp(inner_cross_size(item), clamp_min, clamp_max);
        return;
    }

    if (item.box->has_preferred_aspect_ratio() && item.main_size.has_value()) {
        item.hypothetical_cross_size = calculate_cross_size_from_main_size_and_aspect_ratio(item.main_size.value(), item.box->preferred_aspect_ratio().value());
        return;
    }

    auto computed_cross_size = [&]() -> CSS::Size {
        // "... treating auto as fit-content"
        if (should_treat_cross_size_as_auto(item.box))
            return CSS::Size::make_fit_content();
        return this->computed_cross_size(item.box);
    }();

    if (computed_cross_size.is_min_content()) {
        item.hypothetical_cross_size = css_clamp(calculate_min_content_cross_size(item), clamp_min, clamp_max);
        return;
    }

    if (computed_cross_size.is_max_content()) {
        item.hypothetical_cross_size = css_clamp(calculate_max_content_cross_size(item), clamp_min, clamp_max);
        return;
    }

    if (computed_cross_size.is_fit_content()) {
        CSSPixels fit_content_cross_size = 0;
        if (is_row_layout()) {
            auto available_width = item.main_size.has_value() ? AvailableSize::make_definite(item.main_size.value()) : AvailableSize::make_indefinite();
            auto available_height = AvailableSize::make_indefinite();
            fit_content_cross_size = calculate_fit_content_height(item.box, AvailableSpace(available_width, available_height));
        } else {
            fit_content_cross_size = calculate_fit_content_width(item.box, m_available_space_for_items->space);
        }

        item.hypothetical_cross_size = css_clamp(fit_content_cross_size, clamp_min, clamp_max);
        return;
    }

    // For indefinite cross sizes, we perform a throwaway layout and then measure it.
    LayoutState throwaway_state(&m_state);

    auto& box_state = throwaway_state.get_mutable(item.box);
    if (is_row_layout()) {
        box_state.set_content_width(item.main_size.value());
    } else {
        box_state.set_content_height(item.main_size.value());
    }

    // Item has definite main size, layout with that as the used main size.
    auto independent_formatting_context = create_independent_formatting_context_if_needed(throwaway_state, item.box);
    // NOTE: Flex items should always create an independent formatting context!
    VERIFY(independent_formatting_context);

    auto available_width = is_row_layout() ? AvailableSize::make_definite(item.main_size.value()) : AvailableSize::make_indefinite();
    auto available_height = is_row_layout() ? AvailableSize::make_indefinite() : AvailableSize::make_definite(item.main_size.value());

    independent_formatting_context->run(item.box, LayoutMode::Normal, AvailableSpace(available_width, available_height));

    auto automatic_cross_size = is_row_layout() ? independent_formatting_context->automatic_content_height()
                                                : independent_formatting_context->automatic_content_width();

    item.hypothetical_cross_size = css_clamp(automatic_cross_size, clamp_min, clamp_max);
}

// https://www.w3.org/TR/css-flexbox-1/#algo-cross-line
void FlexFormattingContext::calculate_cross_size_of_each_flex_line()
{
    // If the flex container is single-line and has a definite cross size, the cross size of the flex line is the flex container’s inner cross size.
    if (is_single_line() && has_definite_cross_size(m_flex_container_state)) {
        m_flex_lines[0].cross_size = inner_cross_size(m_flex_container_state);
        return;
    }

    // Otherwise, for each flex line:
    for (auto& flex_line : m_flex_lines) {
        // FIXME: 1. Collect all the flex items whose inline-axis is parallel to the main-axis, whose align-self is baseline,
        //           and whose cross-axis margins are both non-auto. Find the largest of the distances between each item’s baseline
        //           and its hypothetical outer cross-start edge, and the largest of the distances between each item’s baseline
        //           and its hypothetical outer cross-end edge, and sum these two values.

        // 2. Among all the items not collected by the previous step, find the largest outer hypothetical cross size.
        CSSPixels largest_hypothetical_cross_size = 0;
        for (auto& item : flex_line.items) {
            if (largest_hypothetical_cross_size < item.hypothetical_cross_size_with_margins())
                largest_hypothetical_cross_size = item.hypothetical_cross_size_with_margins();
        }

        // 3. The used cross-size of the flex line is the largest of the numbers found in the previous two steps and zero.
        flex_line.cross_size = max(CSSPixels(0), largest_hypothetical_cross_size);
    }

    // If the flex container is single-line, then clamp the line’s cross-size to be within the container’s computed min and max cross sizes.
    // Note that if CSS 2.1’s definition of min/max-width/height applied more generally, this behavior would fall out automatically.
    // AD-HOC: We don't do this when the flex container is being sized under a min-content or max-content constraint.
    if (is_single_line() && !m_available_space_for_items->cross.is_intrinsic_sizing_constraint()) {
        auto const& computed_min_size = this->computed_cross_min_size(flex_container());
        auto const& computed_max_size = this->computed_cross_max_size(flex_container());
        auto cross_min_size = (!computed_min_size.is_auto() && !computed_min_size.contains_percentage()) ? specified_cross_min_size(flex_container()) : 0;
        auto cross_max_size = (!computed_max_size.is_none() && !computed_max_size.contains_percentage()) ? specified_cross_max_size(flex_container()) : CSSPixels::max();
        m_flex_lines[0].cross_size = css_clamp(m_flex_lines[0].cross_size, cross_min_size, cross_max_size);
    }
}

// https://www.w3.org/TR/css-flexbox-1/#algo-stretch
void FlexFormattingContext::determine_used_cross_size_of_each_flex_item()
{
    for (auto& flex_line : m_flex_lines) {
        for (auto& item : flex_line.items) {
            //  If a flex item has align-self: stretch, its computed cross size property is auto,
            //  and neither of its cross-axis margins are auto, the used outer cross size is the used cross size of its flex line,
            //  clamped according to the item’s used min and max cross sizes.
            auto flex_item_alignment = alignment_for_item(item.box);
            if ((flex_item_alignment == CSS::AlignItems::Stretch || flex_item_alignment == CSS::AlignItems::Normal)
                && is_cross_auto(item.box)
                && !item.margins.cross_before_is_auto
                && !item.margins.cross_after_is_auto) {
                auto unclamped_cross_size = flex_line.cross_size
                    - item.margins.cross_before - item.margins.cross_after
                    - item.padding.cross_before - item.padding.cross_after
                    - item.borders.cross_before - item.borders.cross_after;

                auto const& computed_min_size = computed_cross_min_size(item.box);
                auto const& computed_max_size = computed_cross_max_size(item.box);
                auto cross_min_size = (!computed_min_size.is_auto() && !computed_min_size.contains_percentage()) ? specified_cross_min_size(item.box) : 0;
                auto cross_max_size = (!should_treat_cross_max_size_as_none(item.box) && !computed_max_size.contains_percentage()) ? specified_cross_max_size(item.box) : CSSPixels::max();

                item.cross_size = css_clamp(unclamped_cross_size, cross_min_size, cross_max_size);
            } else {
                // Otherwise, the used cross size is the item’s hypothetical cross size.
                item.cross_size = item.hypothetical_cross_size;
            }
        }
    }
}

// https://www.w3.org/TR/css-flexbox-1/#algo-main-align
void FlexFormattingContext::distribute_any_remaining_free_space()
{
    for (auto& flex_line : m_flex_lines) {
        // 12.1.
        CSSPixels used_main_space = 0;
        size_t auto_margins = 0;
        for (auto& item : flex_line.items) {
            used_main_space += item.main_size.value();
            if (item.margins.main_before_is_auto)
                ++auto_margins;

            if (item.margins.main_after_is_auto)
                ++auto_margins;

            used_main_space += item.margins.main_before + item.margins.main_after
                + item.borders.main_before + item.borders.main_after
                + item.padding.main_before + item.padding.main_after;
        }

        // CSS-FLEXBOX-2: Account for gap between flex items.
        used_main_space += main_gap() * (flex_line.items.size() - 1);

        if (flex_line.remaining_free_space.has_value() && flex_line.remaining_free_space.value() > 0 && auto_margins > 0) {
            CSSPixels size_per_auto_margin = flex_line.remaining_free_space.value() / auto_margins;
            for (auto& item : flex_line.items) {
                if (item.margins.main_before_is_auto)
                    set_main_axis_first_margin(item, size_per_auto_margin);
                if (item.margins.main_after_is_auto)
                    set_main_axis_second_margin(item, size_per_auto_margin);
            }
        } else {
            for (auto& item : flex_line.items) {
                if (item.margins.main_before_is_auto)
                    set_main_axis_first_margin(item, 0);
                if (item.margins.main_after_is_auto)
                    set_main_axis_second_margin(item, 0);
            }
        }

        // 12.2.
        // CSS-FLEXBOX-2: Account for gap between items.
        CSSPixels space_between_items = main_gap();
        CSSPixels initial_offset = 0;
        auto number_of_items = flex_line.items.size();

        if (auto_margins == 0 && number_of_items > 0) {
            switch (flex_container().computed_values().justify_content()) {
            case CSS::JustifyContent::Start:
                initial_offset = 0;
                break;
            case CSS::JustifyContent::Stretch:
            case CSS::JustifyContent::Normal:
            case CSS::JustifyContent::FlexStart:
                if (is_direction_reverse()) {
                    initial_offset = inner_main_size(m_flex_container_state);
                } else {
                    initial_offset = 0;
                }
                break;
            case CSS::JustifyContent::End:
                initial_offset = inner_main_size(m_flex_container_state);
                break;
            case CSS::JustifyContent::FlexEnd:
                if (is_direction_reverse()) {
                    initial_offset = 0;
                } else {
                    initial_offset = inner_main_size(m_flex_container_state);
                }
                break;
            case CSS::JustifyContent::Center:
                initial_offset = (inner_main_size(m_flex_container_state) - used_main_space) / 2;
                if (is_direction_reverse()) {
                    initial_offset = inner_main_size(m_flex_container_state) - initial_offset;
                }
                break;
            case CSS::JustifyContent::SpaceBetween:
                if (is_direction_reverse()) {
                    initial_offset = inner_main_size(m_flex_container_state);
                } else {
                    initial_offset = 0;
                }
                if (flex_line.remaining_free_space.has_value() && number_of_items > 1)
                    space_between_items = max(CSSPixels(0), flex_line.remaining_free_space.value() / (number_of_items - 1));
                break;
            case CSS::JustifyContent::SpaceAround:
                if (flex_line.remaining_free_space.has_value())
                    space_between_items = max(CSSPixels(0), flex_line.remaining_free_space.value() / number_of_items);
                if (is_direction_reverse()) {
                    initial_offset = inner_main_size(m_flex_container_state) - space_between_items / 2;
                } else {
                    initial_offset = space_between_items / 2;
                }
                break;
            case CSS::JustifyContent::SpaceEvenly:
                if (flex_line.remaining_free_space.has_value())
                    space_between_items = max(CSSPixels(0), flex_line.remaining_free_space.value() / (number_of_items + 1));
                if (is_direction_reverse()) {
                    initial_offset = inner_main_size(m_flex_container_state) - space_between_items;
                } else {
                    initial_offset = space_between_items;
                }
                break;
            }
        }

        // For reverse, we use FlexRegionRenderCursor::Right
        // to indicate the cursor offset is the end and render backwards
        // Otherwise the cursor offset is the 'start' of the region or initial offset
        enum class FlexRegionRenderCursor {
            Left,
            Right
        };
        auto flex_region_render_cursor = FlexRegionRenderCursor::Left;

        if (auto_margins == 0) {
            switch (flex_container().computed_values().justify_content()) {
            case CSS::JustifyContent::Normal:
            case CSS::JustifyContent::FlexStart:
            case CSS::JustifyContent::Center:
            case CSS::JustifyContent::SpaceAround:
            case CSS::JustifyContent::SpaceBetween:
            case CSS::JustifyContent::SpaceEvenly:
            case CSS::JustifyContent::Stretch:
                if (is_direction_reverse()) {
                    flex_region_render_cursor = FlexRegionRenderCursor::Right;
                }
                break;
            case CSS::JustifyContent::End:
                flex_region_render_cursor = FlexRegionRenderCursor::Right;
                break;
            case CSS::JustifyContent::FlexEnd:
                if (!is_direction_reverse()) {
                    flex_region_render_cursor = FlexRegionRenderCursor::Right;
                }
                break;
            default:
                break;
            }
        }

        CSSPixels cursor_offset = initial_offset;

        auto place_item = [&](FlexItem& item) {
            auto amount_of_main_size_used = item.main_size.value()
                + item.margins.main_before
                + item.borders.main_before
                + item.padding.main_before
                + item.margins.main_after
                + item.borders.main_after
                + item.padding.main_after
                + space_between_items;

            if (is_direction_reverse() && flex_region_render_cursor == FlexRegionRenderCursor::Right) {
                item.main_offset = cursor_offset - item.main_size.value() - item.margins.main_after - item.borders.main_after - item.padding.main_after;
                cursor_offset -= amount_of_main_size_used;
            } else if (flex_region_render_cursor == FlexRegionRenderCursor::Right) {
                cursor_offset -= amount_of_main_size_used;
                item.main_offset = cursor_offset + item.margins.main_before + item.borders.main_before + item.padding.main_before;
            } else {
                item.main_offset = cursor_offset + item.margins.main_before + item.borders.main_before + item.padding.main_before;
                cursor_offset += amount_of_main_size_used;
            }
        };

        if (flex_region_render_cursor == FlexRegionRenderCursor::Right) {
            for (ssize_t i = flex_line.items.size() - 1; i >= 0; --i) {
                auto& item = flex_line.items[i];
                place_item(item);
            }
        } else {
            for (size_t i = 0; i < flex_line.items.size(); ++i) {
                auto& item = flex_line.items[i];
                place_item(item);
            }
        }
    }
}

void FlexFormattingContext::dump_items() const
{
    dbgln("\033[34;1mflex-container\033[0m {}, direction: {}, current-size: {}x{}", flex_container().debug_description(), is_row_layout() ? "row" : "column", m_flex_container_state.content_width(), m_flex_container_state.content_height());
    for (size_t i = 0; i < m_flex_lines.size(); ++i) {
        dbgln("{} flex-line #{}:", flex_container().debug_description(), i);
        for (size_t j = 0; j < m_flex_lines[i].items.size(); ++j) {
            auto& item = m_flex_lines[i].items[j];
            dbgln("{}   flex-item #{}: {} (main:{}, cross:{})", flex_container().debug_description(), j, item.box->debug_description(), item.main_size.value_or(-1), item.cross_size.value_or(-1));
        }
    }
}

CSS::AlignItems FlexFormattingContext::alignment_for_item(Box const& box) const
{
    switch (box.computed_values().align_self()) {
    case CSS::AlignSelf::Auto:
        return flex_container().computed_values().align_items();
    case CSS::AlignSelf::End:
        return CSS::AlignItems::End;
    case CSS::AlignSelf::Normal:
        return CSS::AlignItems::Normal;
    case CSS::AlignSelf::SelfStart:
        return CSS::AlignItems::SelfStart;
    case CSS::AlignSelf::SelfEnd:
        return CSS::AlignItems::SelfEnd;
    case CSS::AlignSelf::FlexStart:
        return CSS::AlignItems::FlexStart;
    case CSS::AlignSelf::FlexEnd:
        return CSS::AlignItems::FlexEnd;
    case CSS::AlignSelf::Center:
        return CSS::AlignItems::Center;
    case CSS::AlignSelf::Baseline:
        return CSS::AlignItems::Baseline;
    case CSS::AlignSelf::Start:
        return CSS::AlignItems::Start;
    case CSS::AlignSelf::Stretch:
        return CSS::AlignItems::Stretch;
    case CSS::AlignSelf::Safe:
        return CSS::AlignItems::Safe;
    case CSS::AlignSelf::Unsafe:
        return CSS::AlignItems::Unsafe;
    default:
        VERIFY_NOT_REACHED();
    }
}

void FlexFormattingContext::align_all_flex_items_along_the_cross_axis()
{
    // FIXME: Take better care of margins
    for (auto& flex_line : m_flex_lines) {
        for (auto& item : flex_line.items) {
            CSSPixels half_line_size = flex_line.cross_size / 2;
            switch (alignment_for_item(item.box)) {
            case CSS::AlignItems::Baseline:
                // FIXME: Implement this
                //  Fallthrough
            case CSS::AlignItems::Start:
            case CSS::AlignItems::FlexStart:
            case CSS::AlignItems::Stretch:
            case CSS::AlignItems::Normal:
                item.cross_offset = -half_line_size + item.margins.cross_before + item.borders.cross_before + item.padding.cross_before;
                break;
            case CSS::AlignItems::End:
            case CSS::AlignItems::FlexEnd:
                item.cross_offset = half_line_size - item.cross_size.value() - item.margins.cross_after - item.borders.cross_after - item.padding.cross_after;
                break;
            case CSS::AlignItems::Center:
                item.cross_offset = -(item.cross_size.value() / 2);
                break;
            default:
                break;
            }
        }
    }
}

// https://www.w3.org/TR/css-flexbox-1/#algo-cross-container
void FlexFormattingContext::determine_flex_container_used_cross_size()
{
    CSSPixels cross_size = 0;
    if (has_definite_cross_size(m_flex_container_state)) {
        // Flex container has definite cross size: easy-peasy.
        cross_size = inner_cross_size(m_flex_container_state);
    } else {
        // Flex container has indefinite cross size.
        auto cross_size_value = is_row_layout() ? flex_container().computed_values().height() : flex_container().computed_values().width();
        if (cross_size_value.is_auto() || cross_size_value.contains_percentage()) {
            // If a content-based cross size is needed, use the sum of the flex lines' cross sizes.
            CSSPixels sum_of_flex_lines_cross_sizes = 0;
            for (auto& flex_line : m_flex_lines) {
                sum_of_flex_lines_cross_sizes += flex_line.cross_size;
            }
            cross_size = sum_of_flex_lines_cross_sizes;

            if (cross_size_value.contains_percentage()) {
                // FIXME: Handle percentage values here! Right now we're just treating them as "auto"
            }
        } else {
            // Otherwise, resolve the indefinite size at this point.
            cross_size = cross_size_value.to_px(flex_container(), inner_cross_size(m_state.get(*flex_container().containing_block())));
        }
    }

    // AD-HOC: We don't apply min/max cross size constraints when sizing the flex container under an intrinsic sizing constraint.
    if (!m_available_space_for_items->cross.is_intrinsic_sizing_constraint()) {
        auto const& computed_min_size = this->computed_cross_min_size(flex_container());
        auto const& computed_max_size = this->computed_cross_max_size(flex_container());
        auto cross_min_size = (!computed_min_size.is_auto() && !computed_min_size.contains_percentage()) ? specified_cross_min_size(flex_container()) : 0;
        auto cross_max_size = (!computed_max_size.is_none() && !computed_max_size.contains_percentage()) ? specified_cross_max_size(flex_container()) : CSSPixels::max();
        set_cross_size(flex_container(), css_clamp(cross_size, cross_min_size, cross_max_size));
    } else {
        set_cross_size(flex_container(), cross_size);
    }
}

// https://www.w3.org/TR/css-flexbox-1/#algo-line-align
void FlexFormattingContext::align_all_flex_lines()
{
    if (m_flex_lines.is_empty())
        return;

    // FIXME: Support reverse

    CSSPixels cross_size_of_flex_container = inner_cross_size(m_flex_container_state);

    if (is_single_line()) {
        // For single-line flex containers, we only need to center the line along the cross axis.
        auto& flex_line = m_flex_lines[0];
        CSSPixels center_of_line = cross_size_of_flex_container / 2;
        for (auto& item : flex_line.items) {
            item.cross_offset += center_of_line;
        }
    } else {

        CSSPixels sum_of_flex_line_cross_sizes = 0;
        for (auto& line : m_flex_lines)
            sum_of_flex_line_cross_sizes += line.cross_size;

        // CSS-FLEXBOX-2: Account for gap between flex lines.
        sum_of_flex_line_cross_sizes += cross_gap() * (m_flex_lines.size() - 1);

        CSSPixels start_of_current_line = 0;
        CSSPixels gap_size = 0;
        switch (flex_container().computed_values().align_content()) {
        case CSS::AlignContent::FlexStart:
            start_of_current_line = 0;
            break;
        case CSS::AlignContent::FlexEnd:
            start_of_current_line = cross_size_of_flex_container - sum_of_flex_line_cross_sizes;
            break;
        case CSS::AlignContent::Center:
            start_of_current_line = (cross_size_of_flex_container / 2) - (sum_of_flex_line_cross_sizes / 2);
            break;
        case CSS::AlignContent::SpaceBetween: {
            start_of_current_line = 0;

            auto leftover_free_space = cross_size_of_flex_container - sum_of_flex_line_cross_sizes;
            auto leftover_flex_lines_size = m_flex_lines.size();
            if (leftover_free_space >= 0 && leftover_flex_lines_size > 1) {
                int gap_count = leftover_flex_lines_size - 1;
                gap_size = leftover_free_space / gap_count;
            }
            break;
        }
        case CSS::AlignContent::SpaceAround: {
            auto leftover_free_space = cross_size_of_flex_container - sum_of_flex_line_cross_sizes;
            if (leftover_free_space < 0) {
                // If the leftover free-space is negative this value is identical to center.
                start_of_current_line = (cross_size_of_flex_container / 2) - (sum_of_flex_line_cross_sizes / 2);
                break;
            }

            gap_size = leftover_free_space / m_flex_lines.size();

            // The spacing between the first/last lines and the flex container edges is half the size of the spacing between flex lines.
            start_of_current_line = gap_size / 2;
            break;
        }
        case CSS::AlignContent::SpaceEvenly: {
            auto leftover_free_space = cross_size_of_flex_container - sum_of_flex_line_cross_sizes;
            if (leftover_free_space < 0) {
                // If the leftover free-space is negative this value is identical to center.
                start_of_current_line = (cross_size_of_flex_container / 2) - (sum_of_flex_line_cross_sizes / 2);
                break;
            }

            gap_size = leftover_free_space / (m_flex_lines.size() + 1);

            // The spacing between the first/last lines and the flex container edges is the size of the spacing between flex lines.
            start_of_current_line = gap_size;
            break;
        }

        case CSS::AlignContent::Normal:
        case CSS::AlignContent::Stretch:
            start_of_current_line = 0;
            break;
        }

        for (auto& flex_line : m_flex_lines) {
            CSSPixels center_of_current_line = start_of_current_line + (flex_line.cross_size / 2);
            for (auto& item : flex_line.items) {
                item.cross_offset += center_of_current_line;
            }
            start_of_current_line += flex_line.cross_size + gap_size;
            // CSS-FLEXBOX-2: Account for gap between flex lines.
            start_of_current_line += cross_gap();
        }
    }
}

void FlexFormattingContext::copy_dimensions_from_flex_items_to_boxes()
{
    for (auto& item : m_flex_items) {
        auto const& box = item.box;

        item.used_values.padding_left = box->computed_values().padding().left().to_px(box, m_flex_container_state.content_width());
        item.used_values.padding_right = box->computed_values().padding().right().to_px(box, m_flex_container_state.content_width());
        item.used_values.padding_top = box->computed_values().padding().top().to_px(box, m_flex_container_state.content_width());
        item.used_values.padding_bottom = box->computed_values().padding().bottom().to_px(box, m_flex_container_state.content_width());

        item.used_values.margin_left = box->computed_values().margin().left().to_px(box, m_flex_container_state.content_width());
        item.used_values.margin_right = box->computed_values().margin().right().to_px(box, m_flex_container_state.content_width());
        item.used_values.margin_top = box->computed_values().margin().top().to_px(box, m_flex_container_state.content_width());
        item.used_values.margin_bottom = box->computed_values().margin().bottom().to_px(box, m_flex_container_state.content_width());

        item.used_values.border_left = box->computed_values().border_left().width;
        item.used_values.border_right = box->computed_values().border_right().width;
        item.used_values.border_top = box->computed_values().border_top().width;
        item.used_values.border_bottom = box->computed_values().border_bottom().width;

        set_main_size(box, item.main_size.value());
        set_cross_size(box, item.cross_size.value());
        set_offset(box, item.main_offset, item.cross_offset);
    }
}

// https://drafts.csswg.org/css-flexbox-1/#intrinsic-sizes
void FlexFormattingContext::determine_intrinsic_size_of_flex_container()
{
    if (m_available_space_for_items->main.is_intrinsic_sizing_constraint()) {
        CSSPixels main_size = calculate_intrinsic_main_size_of_flex_container();
        set_main_size(flex_container(), main_size);
    }
    if (m_available_space_for_items->cross.is_intrinsic_sizing_constraint()) {
        CSSPixels cross_size = calculate_intrinsic_cross_size_of_flex_container();
        set_cross_size(flex_container(), cross_size);
    }
}

// https://drafts.csswg.org/css-flexbox-1/#intrinsic-main-sizes
CSSPixels FlexFormattingContext::calculate_intrinsic_main_size_of_flex_container()
{
    // The min-content main size of a single-line flex container is calculated identically to the max-content main size,
    // except that the flex items’ min-content contributions are used instead of their max-content contributions.
    // However, for a multi-line container, it is simply the largest min-content contribution of all the non-collapsed flex items in the flex container.
    if (!is_single_line() && m_available_space_for_items->main.is_min_content()) {
        CSSPixels largest_contribution = 0;
        for (auto const& item : m_flex_items) {
            // FIXME: Skip collapsed flex items.
            largest_contribution = max(largest_contribution, calculate_main_min_content_contribution(item));
        }
        return largest_contribution;
    }

    // The max-content main size of a flex container is, fundamentally, the smallest size the flex container
    // can take such that when flex layout is run with that container size, each flex item ends up at least
    // as large as its max-content contribution, to the extent allowed by the items’ flexibility.
    // It is calculated, considering only non-collapsed flex items, by:

    // 1. For each flex item, subtract its outer flex base size from its max-content contribution size.
    //    If that result is positive, divide it by the item’s flex grow factor if the flex grow factor is ≥ 1,
    //    or multiply it by the flex grow factor if the flex grow factor is < 1; if the result is negative,
    //    divide it by the item’s scaled flex shrink factor (if dividing by zero, treat the result as negative infinity).
    //    This is the item’s desired flex fraction.

    for (auto& item : m_flex_items) {
        CSSPixels contribution = 0;
        if (m_available_space_for_items->main.is_min_content())
            contribution = calculate_main_min_content_contribution(item);
        else if (m_available_space_for_items->main.is_max_content())
            contribution = calculate_main_max_content_contribution(item);

        CSSPixels outer_flex_base_size = item.flex_base_size + item.margins.main_before + item.margins.main_after + item.borders.main_before + item.borders.main_after + item.padding.main_before + item.padding.main_after;

        CSSPixels result = contribution - outer_flex_base_size;
        if (result > 0) {
            if (item.box->computed_values().flex_grow() >= 1) {
                result.scale_by(1 / item.box->computed_values().flex_grow());
            } else {
                result.scale_by(item.box->computed_values().flex_grow());
            }
        } else if (result < 0) {
            if (item.scaled_flex_shrink_factor == 0)
                result = CSSPixels::min();
            else
                result.scale_by(1 / item.scaled_flex_shrink_factor);
        }

        item.desired_flex_fraction = result.to_double();
    }

    // 2. Place all flex items into lines of infinite length.
    m_flex_lines.clear();
    if (!m_flex_items.is_empty())
        m_flex_lines.append(FlexLine {});
    for (auto& item : m_flex_items) {
        // FIXME: Honor breaking requests.
        m_flex_lines.last().items.append(item);
    }

    //    Within each line, find the greatest (most positive) desired flex fraction among all the flex items.
    //    This is the line’s chosen flex fraction.
    for (auto& flex_line : m_flex_lines) {
        float greatest_desired_flex_fraction = 0;
        float sum_of_flex_grow_factors = 0;
        float sum_of_flex_shrink_factors = 0;
        for (auto& item : flex_line.items) {
            greatest_desired_flex_fraction = max(greatest_desired_flex_fraction, item.desired_flex_fraction);
            sum_of_flex_grow_factors += item.box->computed_values().flex_grow();
            sum_of_flex_shrink_factors += item.box->computed_values().flex_shrink();
        }
        float chosen_flex_fraction = greatest_desired_flex_fraction;

        // 3. If the chosen flex fraction is positive, and the sum of the line’s flex grow factors is less than 1,
        //    divide the chosen flex fraction by that sum.
        if (chosen_flex_fraction > 0 && sum_of_flex_grow_factors < 1)
            chosen_flex_fraction /= sum_of_flex_grow_factors;

        // If the chosen flex fraction is negative, and the sum of the line’s flex shrink factors is less than 1,
        // multiply the chosen flex fraction by that sum.
        if (chosen_flex_fraction < 0 && sum_of_flex_shrink_factors < 1)
            chosen_flex_fraction *= sum_of_flex_shrink_factors;

        flex_line.chosen_flex_fraction = chosen_flex_fraction;
    }

    auto determine_main_size = [&]() -> CSSPixels {
        CSSPixels largest_sum = 0;
        for (auto& flex_line : m_flex_lines) {
            // 4. Add each item’s flex base size to the product of its flex grow factor (scaled flex shrink factor, if shrinking)
            //    and the chosen flex fraction, then clamp that result by the max main size floored by the min main size.
            CSSPixels sum = 0;
            for (auto& item : flex_line.items) {
                double product = 0;
                if (item.desired_flex_fraction > 0)
                    product = flex_line.chosen_flex_fraction * static_cast<double>(item.box->computed_values().flex_grow());
                else if (item.desired_flex_fraction < 0)
                    product = flex_line.chosen_flex_fraction * item.scaled_flex_shrink_factor;
                auto result = item.flex_base_size + CSSPixels::nearest_value_for(product);

                auto const& computed_min_size = this->computed_main_min_size(item.box);
                auto const& computed_max_size = this->computed_main_max_size(item.box);

                auto clamp_min = (!computed_min_size.is_auto() && !computed_min_size.contains_percentage()) ? specified_main_min_size(item.box) : automatic_minimum_size(item);
                auto clamp_max = (!should_treat_main_max_size_as_none(item.box) && !computed_max_size.contains_percentage()) ? specified_main_max_size(item.box) : CSSPixels::max();

                result = css_clamp(result, clamp_min, clamp_max);

                // NOTE: The spec doesn't mention anything about the *outer* size here, but if we don't add the margin box,
                //       flex items with non-zero padding/border/margin in the main axis end up overflowing the container.
                result = item.add_main_margin_box_sizes(result);

                sum += result;
            }
            // CSS-FLEXBOX-2: Account for gap between flex items.
            sum += main_gap() * (flex_line.items.size() - 1);
            largest_sum = max(largest_sum, sum);
        }
        // 5. The flex container’s max-content size is the largest sum (among all the lines) of the afore-calculated sizes of all items within a single line.
        return largest_sum;
    };

    auto main_size = determine_main_size();
    set_main_size(flex_container(), main_size);
    return main_size;
}

// https://drafts.csswg.org/css-flexbox-1/#intrinsic-cross-sizes
CSSPixels FlexFormattingContext::calculate_intrinsic_cross_size_of_flex_container()
{
    // The min-content/max-content cross size of a single-line flex container
    // is the largest min-content contribution/max-content contribution (respectively) of its flex items.
    if (is_single_line()) {
        auto calculate_largest_contribution = [&](bool resolve_percentage_min_max_sizes) {
            CSSPixels largest_contribution = 0;
            for (auto& item : m_flex_items) {
                CSSPixels contribution = 0;
                if (m_available_space_for_items->cross.is_min_content())
                    contribution = calculate_cross_min_content_contribution(item, resolve_percentage_min_max_sizes);
                else if (m_available_space_for_items->cross.is_max_content())
                    contribution = calculate_cross_max_content_contribution(item, resolve_percentage_min_max_sizes);
                largest_contribution = max(largest_contribution, contribution);
            }
            return largest_contribution;
        };

        auto first_pass_largest_contribution = calculate_largest_contribution(false);
        set_cross_size(flex_container(), first_pass_largest_contribution);
        auto second_pass_largest_contribution = calculate_largest_contribution(true);
        return second_pass_largest_contribution;
    }

    if (is_row_layout()) {
        // row multi-line flex container cross-size

        // The min-content/max-content cross size is the sum of the flex line cross sizes resulting from
        // sizing the flex container under a cross-axis min-content constraint/max-content constraint (respectively).

        // NOTE: We fall through to the ad-hoc section below.
    } else {
        // column multi-line flex container cross-size

        // The min-content cross size is the largest min-content contribution among all of its flex items.
        if (m_available_space_for_items->cross.is_min_content()) {
            auto calculate_largest_contribution = [&](bool resolve_percentage_min_max_sizes) {
                CSSPixels largest_contribution = 0;
                for (auto& item : m_flex_items) {
                    CSSPixels contribution = calculate_cross_min_content_contribution(item, resolve_percentage_min_max_sizes);
                    largest_contribution = max(largest_contribution, contribution);
                }
                return largest_contribution;
            };

            auto first_pass_largest_contribution = calculate_largest_contribution(false);
            set_cross_size(flex_container(), first_pass_largest_contribution);
            auto second_pass_largest_contribution = calculate_largest_contribution(true);
            return second_pass_largest_contribution;
        }

        // The max-content cross size is the sum of the flex line cross sizes resulting from
        // sizing the flex container under a cross-axis max-content constraint,
        // using the largest max-content cross-size contribution among the flex items
        // as the available space in the cross axis for each of the flex items during layout.

        // NOTE: We fall through to the ad-hoc section below.
    }

    CSSPixels sum_of_flex_line_cross_sizes = 0;
    for (auto& flex_line : m_flex_lines) {
        sum_of_flex_line_cross_sizes += flex_line.cross_size;
    }
    // CSS-FLEXBOX-2: Account for gap between flex lines.
    sum_of_flex_line_cross_sizes += cross_gap() * (m_flex_lines.size() - 1);
    return sum_of_flex_line_cross_sizes;
}

// https://drafts.csswg.org/css-flexbox-1/#intrinsic-item-contributions
CSSPixels FlexFormattingContext::calculate_main_min_content_contribution(FlexItem const& item) const
{
    // The main-size min-content contribution of a flex item is
    // the larger of its outer min-content size and outer preferred size if that is not auto,
    // clamped by its min/max main size.
    auto larger_size = [&] {
        auto inner_min_content_size = calculate_min_content_main_size(item);
        if (computed_main_size(item.box).is_auto())
            return inner_min_content_size;
        auto inner_preferred_size = is_row_layout() ? get_pixel_width(item.box, computed_main_size(item.box)) : get_pixel_height(item.box, computed_main_size(item.box));
        return max(inner_min_content_size, inner_preferred_size);
    }();

    auto clamp_min = has_main_min_size(item.box) ? specified_main_min_size(item.box) : automatic_minimum_size(item);
    auto clamp_max = has_main_max_size(item.box) ? specified_main_max_size(item.box) : CSSPixels::max();
    auto clamped_inner_size = css_clamp(larger_size, clamp_min, clamp_max);

    return item.add_main_margin_box_sizes(clamped_inner_size);
}

// https://drafts.csswg.org/css-flexbox-1/#intrinsic-item-contributions
CSSPixels FlexFormattingContext::calculate_main_max_content_contribution(FlexItem const& item) const
{
    // The main-size max-content contribution of a flex item is
    // the larger of its outer max-content size and outer preferred size if that is not auto,
    // clamped by its min/max main size.
    auto larger_size = [&] {
        auto inner_max_content_size = calculate_max_content_main_size(item);
        if (computed_main_size(item.box).is_auto())
            return inner_max_content_size;
        auto inner_preferred_size = is_row_layout() ? get_pixel_width(item.box, computed_main_size(item.box)) : get_pixel_height(item.box, computed_main_size(item.box));
        return max(inner_max_content_size, inner_preferred_size);
    }();

    auto clamp_min = has_main_min_size(item.box) ? specified_main_min_size(item.box) : automatic_minimum_size(item);
    auto clamp_max = has_main_max_size(item.box) ? specified_main_max_size(item.box) : CSSPixels::max();
    auto clamped_inner_size = css_clamp(larger_size, clamp_min, clamp_max);

    return item.add_main_margin_box_sizes(clamped_inner_size);
}

bool FlexFormattingContext::should_treat_main_size_as_auto(Box const& box) const
{
    if (is_row_layout())
        return should_treat_width_as_auto(box, m_available_space_for_items->space);
    return should_treat_height_as_auto(box, m_available_space_for_items->space);
}

bool FlexFormattingContext::should_treat_cross_size_as_auto(Box const& box) const
{
    if (is_row_layout())
        return should_treat_height_as_auto(box, m_available_space_for_items->space);
    return should_treat_width_as_auto(box, m_available_space_for_items->space);
}

bool FlexFormattingContext::should_treat_main_max_size_as_none(Box const& box) const
{
    if (is_row_layout())
        return should_treat_max_width_as_none(box, m_available_space_for_items->space.width);
    return should_treat_max_height_as_none(box, m_available_space_for_items->space.height);
}

bool FlexFormattingContext::should_treat_cross_max_size_as_none(Box const& box) const
{
    if (is_row_layout())
        return should_treat_max_height_as_none(box, m_available_space_for_items->space.height);
    return should_treat_max_width_as_none(box, m_available_space_for_items->space.width);
}

CSSPixels FlexFormattingContext::calculate_cross_min_content_contribution(FlexItem const& item, bool resolve_percentage_min_max_sizes) const
{
    auto size = [&] {
        if (should_treat_cross_size_as_auto(item.box))
            return calculate_min_content_cross_size(item);
        return !is_row_layout() ? get_pixel_width(item.box, computed_cross_size(item.box)) : get_pixel_height(item.box, computed_cross_size(item.box));
    }();

    auto const& computed_min_size = this->computed_cross_min_size(item.box);
    auto const& computed_max_size = this->computed_cross_max_size(item.box);

    auto clamp_min = (!computed_min_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_min_size.contains_percentage())) ? specified_cross_min_size(item.box) : 0;
    auto clamp_max = (!should_treat_cross_max_size_as_none(item.box) && (resolve_percentage_min_max_sizes || !computed_max_size.contains_percentage())) ? specified_cross_max_size(item.box) : CSSPixels::max();

    auto clamped_inner_size = css_clamp(size, clamp_min, clamp_max);

    return item.add_cross_margin_box_sizes(clamped_inner_size);
}

CSSPixels FlexFormattingContext::calculate_cross_max_content_contribution(FlexItem const& item, bool resolve_percentage_min_max_sizes) const
{
    auto size = [&] {
        if (should_treat_cross_size_as_auto(item.box))
            return calculate_max_content_cross_size(item);
        return !is_row_layout() ? get_pixel_width(item.box, computed_cross_size(item.box)) : get_pixel_height(item.box, computed_cross_size(item.box));
    }();

    auto const& computed_min_size = this->computed_cross_min_size(item.box);
    auto const& computed_max_size = this->computed_cross_max_size(item.box);

    auto clamp_min = (!computed_min_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_min_size.contains_percentage())) ? specified_cross_min_size(item.box) : 0;
    auto clamp_max = (!should_treat_cross_max_size_as_none(item.box) && (resolve_percentage_min_max_sizes || !computed_max_size.contains_percentage())) ? specified_cross_max_size(item.box) : CSSPixels::max();

    auto clamped_inner_size = css_clamp(size, clamp_min, clamp_max);

    return item.add_cross_margin_box_sizes(clamped_inner_size);
}

CSSPixels FlexFormattingContext::calculate_width_to_use_when_determining_intrinsic_height_of_item(FlexItem const& item) const
{
    auto const& box = *item.box;
    auto computed_width = box.computed_values().width();
    auto const& computed_min_width = box.computed_values().min_width();
    auto const& computed_max_width = box.computed_values().max_width();
    auto clamp_min = (!computed_min_width.is_auto() && (!computed_min_width.contains_percentage())) ? get_pixel_width(box, computed_min_width) : 0;
    auto clamp_max = (!should_treat_max_width_as_none(box, m_available_space_for_items->space.width) && (!computed_max_width.contains_percentage())) ? get_pixel_width(box, computed_max_width) : CSSPixels::max();

    CSSPixels width;
    if (should_treat_width_as_auto(box, m_available_space_for_items->space) || computed_width.is_fit_content())
        width = calculate_fit_content_width(box, m_available_space_for_items->space);
    else if (computed_width.is_min_content())
        width = calculate_min_content_width(box);
    else if (computed_width.is_max_content())
        width = calculate_max_content_width(box);

    return css_clamp(width, clamp_min, clamp_max);
}

CSSPixels FlexFormattingContext::calculate_min_content_main_size(FlexItem const& item) const
{
    if (is_row_layout()) {
        return calculate_min_content_width(item.box);
    }
    auto available_space = item.used_values.available_inner_space_or_constraints_from(m_available_space_for_items->space);
    if (available_space.width.is_indefinite()) {
        available_space.width = AvailableSize::make_definite(calculate_width_to_use_when_determining_intrinsic_height_of_item(item));
    }
    return calculate_min_content_height(item.box, available_space.width.to_px_or_zero());
}

CSSPixels FlexFormattingContext::calculate_max_content_main_size(FlexItem const& item) const
{
    if (is_row_layout()) {
        return calculate_max_content_width(item.box);
    }
    auto available_space = item.used_values.available_inner_space_or_constraints_from(m_available_space_for_items->space);
    if (available_space.width.is_indefinite()) {
        available_space.width = AvailableSize::make_definite(calculate_width_to_use_when_determining_intrinsic_height_of_item(item));
    }
    return calculate_max_content_height(item.box, available_space.width.to_px_or_zero());
}

CSSPixels FlexFormattingContext::calculate_fit_content_main_size(FlexItem const& item) const
{
    if (is_row_layout())
        return calculate_fit_content_width(item.box, m_available_space_for_items->space);
    return calculate_fit_content_height(item.box, m_available_space_for_items->space);
}

CSSPixels FlexFormattingContext::calculate_fit_content_cross_size(FlexItem const& item) const
{
    if (!is_row_layout())
        return calculate_fit_content_width(item.box, m_available_space_for_items->space);
    return calculate_fit_content_height(item.box, m_available_space_for_items->space);
}

CSSPixels FlexFormattingContext::calculate_min_content_cross_size(FlexItem const& item) const
{
    if (is_row_layout()) {
        auto available_space = item.used_values.available_inner_space_or_constraints_from(m_available_space_for_items->space);
        if (available_space.width.is_indefinite()) {
            available_space.width = AvailableSize::make_definite(calculate_width_to_use_when_determining_intrinsic_height_of_item(item));
        }
        return calculate_min_content_height(item.box, available_space.width.to_px_or_zero());
    }
    return calculate_min_content_width(item.box);
}

CSSPixels FlexFormattingContext::calculate_max_content_cross_size(FlexItem const& item) const
{
    if (is_row_layout()) {
        auto available_space = item.used_values.available_inner_space_or_constraints_from(m_available_space_for_items->space);
        if (available_space.width.is_indefinite()) {
            available_space.width = AvailableSize::make_definite(calculate_width_to_use_when_determining_intrinsic_height_of_item(item));
        }
        return calculate_max_content_height(item.box, available_space.width.to_px_or_zero());
    }
    return calculate_max_content_width(item.box);
}

// https://drafts.csswg.org/css-flexbox-1/#stretched
bool FlexFormattingContext::flex_item_is_stretched(FlexItem const& item) const
{
    auto alignment = alignment_for_item(item.box);
    if (alignment != CSS::AlignItems::Stretch && alignment != CSS::AlignItems::Normal)
        return false;
    // If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched.
    auto const& computed_cross_size = is_row_layout() ? item.box->computed_values().height() : item.box->computed_values().width();
    return computed_cross_size.is_auto() && !item.margins.cross_before_is_auto && !item.margins.cross_after_is_auto;
}

CSS::Size const& FlexFormattingContext::computed_main_size(Box const& box) const
{
    return is_row_layout() ? box.computed_values().width() : box.computed_values().height();
}

CSS::Size const& FlexFormattingContext::computed_main_min_size(Box const& box) const
{
    return is_row_layout() ? box.computed_values().min_width() : box.computed_values().min_height();
}

CSS::Size const& FlexFormattingContext::computed_main_max_size(Box const& box) const
{
    return is_row_layout() ? box.computed_values().max_width() : box.computed_values().max_height();
}

CSS::Size const& FlexFormattingContext::computed_cross_size(Box const& box) const
{
    return !is_row_layout() ? box.computed_values().width() : box.computed_values().height();
}

CSS::Size const& FlexFormattingContext::computed_cross_min_size(Box const& box) const
{
    return !is_row_layout() ? box.computed_values().min_width() : box.computed_values().min_height();
}

CSS::Size const& FlexFormattingContext::computed_cross_max_size(Box const& box) const
{
    return !is_row_layout() ? box.computed_values().max_width() : box.computed_values().max_height();
}

// https://drafts.csswg.org/css-flexbox-1/#algo-cross-margins
void FlexFormattingContext::resolve_cross_axis_auto_margins()
{
    for (auto& line : m_flex_lines) {
        for (auto& item : line.items) {
            //  If a flex item has auto cross-axis margins:
            if (!item.margins.cross_before_is_auto && !item.margins.cross_after_is_auto)
                continue;

            // If its outer cross size (treating those auto margins as zero) is less than the cross size of its flex line,
            // distribute the difference in those sizes equally to the auto margins.
            auto outer_cross_size = item.cross_size.value() + item.padding.cross_before + item.padding.cross_after + item.borders.cross_before + item.borders.cross_after;
            if (outer_cross_size < line.cross_size) {
                CSSPixels remainder = line.cross_size - outer_cross_size;
                if (item.margins.cross_before_is_auto && item.margins.cross_after_is_auto) {
                    item.margins.cross_before = remainder / 2;
                    item.margins.cross_after = remainder / 2;
                } else if (item.margins.cross_before_is_auto) {
                    item.margins.cross_before = remainder;
                } else {
                    item.margins.cross_after = remainder;
                }
            } else {
                // FIXME: Otherwise, if the block-start or inline-start margin (whichever is in the cross axis) is auto, set it to zero.
                //        Set the opposite margin so that the outer cross size of the item equals the cross size of its flex line.
            }
        }
    }
}

// https://drafts.csswg.org/css-flexbox-1/#algo-line-stretch
void FlexFormattingContext::handle_align_content_stretch()
{
    // If the flex container has a definite cross size,
    if (!has_definite_cross_size(m_flex_container_state))
        return;

    // align-content is stretch,
    if (flex_container().computed_values().align_content() != CSS::AlignContent::Stretch && flex_container().computed_values().align_content() != CSS::AlignContent::Normal)
        return;

    // and the sum of the flex lines' cross sizes is less than the flex container’s inner cross size,
    CSSPixels sum_of_flex_line_cross_sizes = 0;
    for (auto& line : m_flex_lines)
        sum_of_flex_line_cross_sizes += line.cross_size;

    // CSS-FLEXBOX-2: Account for gap between flex lines.
    sum_of_flex_line_cross_sizes += cross_gap() * (m_flex_lines.size() - 1);

    if (sum_of_flex_line_cross_sizes >= inner_cross_size(m_flex_container_state))
        return;

    // increase the cross size of each flex line by equal amounts
    // such that the sum of their cross sizes exactly equals the flex container’s inner cross size.
    CSSPixels remainder = inner_cross_size(m_flex_container_state) - sum_of_flex_line_cross_sizes;
    CSSPixels extra_per_line = remainder / m_flex_lines.size();

    for (auto& line : m_flex_lines)
        line.cross_size += extra_per_line;
}

// https://drafts.csswg.org/css-flexbox-1/#abspos-items
CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) const
{
    // The cross-axis edges of the static-position rectangle of an absolutely-positioned child
    // of a flex container are the content edges of the flex container.
    CSSPixels cross_offset = 0;
    CSSPixels half_line_size = inner_cross_size(m_flex_container_state) / 2;

    auto const& box_state = m_state.get(box);
    CSSPixels cross_margin_before = is_row_layout() ? box_state.margin_top : box_state.margin_left;
    CSSPixels cross_margin_after = is_row_layout() ? box_state.margin_bottom : box_state.margin_right;
    CSSPixels cross_border_before = is_row_layout() ? box_state.border_top : box_state.border_left;
    CSSPixels cross_border_after = is_row_layout() ? box_state.border_bottom : box_state.border_right;
    CSSPixels cross_padding_after = is_row_layout() ? box_state.padding_bottom : box_state.padding_right;
    CSSPixels main_border_before = is_row_layout() ? box_state.border_left : box_state.border_top;
    CSSPixels main_border_after = is_row_layout() ? box_state.border_right : box_state.border_bottom;

    switch (alignment_for_item(box)) {
    case CSS::AlignItems::Baseline:
        // FIXME: Implement this
        //  Fallthrough
    case CSS::AlignItems::Start:
    case CSS::AlignItems::FlexStart:
    case CSS::AlignItems::SelfStart:
    case CSS::AlignItems::Stretch:
    case CSS::AlignItems::Normal:
        cross_offset = -half_line_size + cross_margin_before;
        break;
    case CSS::AlignItems::End:
    case CSS::AlignItems::SelfEnd:
    case CSS::AlignItems::FlexEnd:
        cross_offset = half_line_size - inner_cross_size(box_state) - cross_margin_after - cross_border_after - cross_padding_after;
        break;
    case CSS::AlignItems::Center:
        cross_offset = -((inner_cross_size(box_state) + cross_border_before + cross_border_after) / 2);
        break;
    default:
        break;
    }

    cross_offset += inner_cross_size(m_flex_container_state) / 2;

    // The main-axis edges of the static-position rectangle are where the margin edges of the child
    // would be positioned if it were the sole flex item in the flex container,
    // assuming both the child and the flex container were fixed-size boxes of their used size.
    // (For this purpose, auto margins are treated as zero.

    bool pack_from_end = true;
    CSSPixels main_offset = 0;
    switch (flex_container().computed_values().justify_content()) {
    case CSS::JustifyContent::Start:
        pack_from_end = false;
        break;
    case CSS::JustifyContent::Stretch:
    case CSS::JustifyContent::Normal:
    case CSS::JustifyContent::FlexStart:
    case CSS::JustifyContent::SpaceBetween:
        pack_from_end = is_direction_reverse();
        break;
    case CSS::JustifyContent::End:
        pack_from_end = true;
        break;
    case CSS::JustifyContent::FlexEnd:
        pack_from_end = !is_direction_reverse();
        break;
    case CSS::JustifyContent::Center:
    case CSS::JustifyContent::SpaceAround:
    case CSS::JustifyContent::SpaceEvenly:
        pack_from_end = false;
        main_offset = (inner_main_size(m_flex_container_state) - inner_main_size(box_state) - main_border_before - main_border_after) / 2;
        break;
    }

    if (pack_from_end)
        main_offset += inner_main_size(m_flex_container_state) - inner_main_size(box_state) - main_border_before - main_border_after;

    auto static_position_offset = is_row_layout() ? CSSPixelPoint { main_offset, cross_offset } : CSSPixelPoint { cross_offset, main_offset };

    auto absolute_position_of_flex_container = absolute_content_rect(flex_container()).location();
    auto absolute_position_of_abspos_containing_block = absolute_content_rect(*box.containing_block()).location();
    auto diff = absolute_position_of_flex_container - absolute_position_of_abspos_containing_block;

    return static_position_offset + diff;
}

double FlexFormattingContext::FlexLine::sum_of_flex_factor_of_unfrozen_items() const
{
    double sum = 0;
    for (auto const& item : items) {
        if (!item.frozen)
            sum += item.flex_factor.value();
    }
    return sum;
}

double FlexFormattingContext::FlexLine::sum_of_scaled_flex_shrink_factor_of_unfrozen_items() const
{
    double sum = 0;
    for (auto const& item : items) {
        if (!item.frozen)
            sum += item.scaled_flex_shrink_factor;
    }
    return sum;
}

CSSPixels FlexFormattingContext::main_gap() const
{
    auto const& computed_values = flex_container().computed_values();
    auto gap = is_row_layout() ? computed_values.column_gap() : computed_values.row_gap();
    return gap.to_px(flex_container(), inner_main_size(m_flex_container_state));
}

CSSPixels FlexFormattingContext::cross_gap() const
{
    auto const& computed_values = flex_container().computed_values();
    auto gap = is_row_layout() ? computed_values.row_gap() : computed_values.column_gap();
    return gap.to_px(flex_container(), inner_cross_size(m_flex_container_state));
}

}