mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-11-10 13:00:29 +03:00
a61f09a010
This solves a particular issue with SVG as flex items, where the SVG has an intrinsic aspect ratio via its viewBox, but no explicit natural width or height. Makes all corporate sponsor logos show up on https://ziglang.org/ :^)
2221 lines
106 KiB
C++
2221 lines
106 KiB
C++
/*
|
||
* 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);
|
||
set_has_definite_cross_size(item);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 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());
|
||
set_has_definite_cross_size(item);
|
||
}
|
||
}
|
||
}
|
||
|
||
{
|
||
// 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_has_definite_main_size(FlexItem& item)
|
||
{
|
||
if (is_row_layout())
|
||
item.used_values.set_has_definite_width(true);
|
||
else
|
||
item.used_values.set_has_definite_height(true);
|
||
}
|
||
|
||
void FlexFormattingContext::set_has_definite_cross_size(FlexItem& item)
|
||
{
|
||
if (is_row_layout())
|
||
item.used_values.set_has_definite_height(true);
|
||
else
|
||
item.used_values.set_has_definite_width(true);
|
||
}
|
||
|
||
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 these ways:
|
||
// - using stretch-fit main size if the flex basis is indefinite.
|
||
// - in response to cross size min/max constraints.
|
||
if (item.box->has_preferred_aspect_ratio()) {
|
||
if (!item.used_flex_basis_is_definite) {
|
||
item.flex_base_size = inner_main_size(m_flex_container_state);
|
||
}
|
||
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/#definite-sizes
|
||
// 1. If the flex container has a definite main size, then the post-flexing main sizes of its flex items are treated as definite.
|
||
// 2. If a flex item’s flex basis is definite, then its post-flexing main size is also definite.
|
||
if (has_definite_main_size(m_flex_container_state) || item.used_flex_basis_is_definite)
|
||
set_has_definite_main_size(item);
|
||
}
|
||
}
|
||
|
||
// 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()) {
|
||
if (item.used_flex_basis_is_definite) {
|
||
item.hypothetical_cross_size = calculate_cross_size_from_main_size_and_aspect_ratio(item.main_size.value(), item.box->preferred_aspect_ratio().value());
|
||
return;
|
||
}
|
||
item.hypothetical_cross_size = inner_cross_size(m_flex_container_state);
|
||
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));
|
||
}
|
||
|
||
}
|