Stowage/ladybird
2
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-10-31 13:20:59 +00:00
Code Issues Projects Releases Packages Wiki Activity
ladybird/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp

1592 lines
76 KiB
C++
Raw Normal View History

LibWeb: Add a very naive Layout::FlexFormattingContext :^) This is very dumb and only lays out its child boxes on a horizontal line with their shrink-to-fit widths. You have to start somewhere! :^)
2021-01-18 17:33:46 +01:00
/*
LibWeb: Improve FFC step 7 (hypothetical cross size) - Avoid performing inside layout on definite-size flex items (since their computed size can be used as-is.) - Use FormattingState::clone() to generate a throwaway layout instead of mutating the tree in-place. - Update spec link & comments based on current CSSWG draft. The latest version is quite a bit clearer on how this should work.
2022-02-27 13:39:38 +01:00
* Copyright (c) 2021-2022, Andreas Kling <kling@serenityos.org>
Everywhere: Use tobyase@serenityos.org for my copyright headers
2021-08-09 21:28:56 +02:00
* Copyright (c) 2021, Tobias Christiansen <tobyase@serenityos.org>
LibWeb: Add a very naive Layout::FlexFormattingContext :^) This is very dumb and only lays out its child boxes on a horizontal line with their shrink-to-fit widths. You have to start somewhere! :^)
2021-01-18 17:33:46 +01:00
*
Everything: Move to SPDX license identifiers in all files. SPDX License Identifiers are a more compact / standardized way of representing file license information. See: https://spdx.dev/resources/use/#identifiers This was done with the `ambr` search and replace tool. ambr --no-parent-ignore --key-from-file --rep-from-file key.txt rep.txt *
2021-04-22 01:24:48 -07:00
* SPDX-License-Identifier: BSD-2-Clause
LibWeb: Add a very naive Layout::FlexFormattingContext :^) This is very dumb and only lays out its child boxes on a horizontal line with their shrink-to-fit widths. You have to start somewhere! :^)
2021-01-18 17:33:46 +01:00
*/
LibWeb: Flexbox: Use InlineFormattingContext when needed Previously any children would be layout using a BlockFormattingContext. Now we at least differentiate between IFC and BFC if the sizes in question are not constrained by other things.
2021-09-23 14:26:53 +02:00
#include "InlineFormattingContext.h"
LibWeb: Flexbox: Check for relative resolvability on the cross axis If an element has a relative specified length on the cross axis, but in the lineage there are no parents that have any fixed cross size, this would have resulted in a 0 cross size. We now catch that and check whether the relative length would result in an actual definite length if resolved.
2021-10-01 13:43:36 +02:00
#include <AK/Function.h>
LibWeb: Implement the flex order CSS property Adds support for the flex order property and a test page for it on the browser welcome page.
2022-03-31 22:11:38 +02:00
#include <AK/QuickSort.h>
LibWeb: Implement FlexBox Layout Algorithm
2021-05-31 12:54:06 +02:00
#include <AK/StdLibExtras.h>
LibWeb: Rename Layout::BlockBox => BlockContainer There's a subtle difference here. A "block box" in the spec is a block-level box, while a "block container" is a box whose children are either all inline-level boxes in an IFC, or all block-level boxes participating in a BFC. Notably, an "inline-block" box is a "block container" but not a "block box" since it is itself inline-level.
2021-10-06 20:02:41 +02:00
#include <LibWeb/Layout/BlockContainer.h>
LibWeb: Implement FlexBox Layout Algorithm
2021-05-31 12:54:06 +02:00
#include <LibWeb/Layout/BlockFormattingContext.h>
LibWeb: Add a very naive Layout::FlexFormattingContext :^) This is very dumb and only lays out its child boxes on a horizontal line with their shrink-to-fit widths. You have to start somewhere! :^)
2021-01-18 17:33:46 +01:00
#include <LibWeb/Layout/Box.h>
#include <LibWeb/Layout/FlexFormattingContext.h>
LibWeb: Rename InitialContainingBlockBox => InitialContainingBlock The "Box" suffix added nothing here.
2021-09-08 11:27:46 +02:00
#include <LibWeb/Layout/InitialContainingBlock.h>
LibWeb: Make FFC prepare replaced child boxes for layout Before we ask a replaced box about its intrinsic dimensions, we have to "prepare" the box, which tells it to go and work out what its intrinsic dimensions are. I've added a FIXME about how this is silly (and clearly bug-prone) but this patch only patches it locally in FFC for now.
2022-06-21 20:40:26 +02:00
#include <LibWeb/Layout/ReplacedBox.h>
LibWeb: Implement FlexBox Layout Algorithm
2021-05-31 12:54:06 +02:00
#include <LibWeb/Layout/TextNode.h>
LibWeb: Add a very naive Layout::FlexFormattingContext :^) This is very dumb and only lays out its child boxes on a horizontal line with their shrink-to-fit widths. You have to start somewhere! :^)
2021-01-18 17:33:46 +01:00
namespace Web::Layout {
LibWeb: Follow relaxed CSS clamping rules in flexbox layout AFAICT, css-values-4 tells us that clamping numbers to a range where min>max is okay. That means we can't use AK::clamp() since it will VERIFY that max>=min. This patch adds a css_clamp() helper (locally in FFC for now). This fixes an issue where a bunch of sites were crashing due to the VERIFY in AK::clamp().
2022-04-09 14:47:41 +02:00
// 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>
constexpr T css_clamp(T const& value, T const& min, T const& max)
{
return ::max(min, ::min(value, max));
}
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
static float get_pixel_size(FormattingState const& state, Box const& box, Optional<CSS::LengthPercentage> const& length_percentage)
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
{
LibWeb: Use Optional instead of undefined-lengths for widths/heights
2022-02-18 15:10:11 +00:00
if (!length_percentage.has_value())
return 0;
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
auto inner_main_size = CSS::Length::make_px(state.get(*box.containing_block()).content_width);
LibWeb: Remove redundant Length::resolved() calls Now that calc() is also resolved in to_px(), code in the form `foo.resolved(bar).to_px(bar)` can be simplified to `foo.to_px(bar)`.
2022-02-18 16:27:28 +00:00
return length_percentage->resolved(box, inner_main_size).to_px(box);
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
LibWeb: Use Optional instead of undefined-lengths for widths/heights
2022-02-18 15:10:11 +00:00
static bool is_undefined_or_auto(Optional<CSS::LengthPercentage> const& length_percentage)
LibWeb: Convert width/height and min-/max- versions to LengthPercentage A lot of this is quite ugly, but it should only be so until I remove Length::Type::Percentage entirely. (Which should happen later in this PR, otherwise, yell at me!) For now, a lot of things have to be resolved twice, first from a LengthPercentage to a Length, and then from a Length to a pixel one.
2022-01-19 16:19:43 +00:00
{
LibWeb: Use Optional instead of undefined-lengths for widths/heights
2022-02-18 15:10:11 +00:00
if (!length_percentage.has_value())
return true;
LibWeb: Remove Length::Type::Undefined! :^)
2022-02-18 16:50:17 +00:00
return length_percentage->is_length() && length_percentage->length().is_auto();
LibWeb: Convert width/height and min-/max- versions to LengthPercentage A lot of this is quite ugly, but it should only be so until I remove Length::Type::Percentage entirely. (Which should happen later in this PR, otherwise, yell at me!) For now, a lot of things have to be resolved twice, first from a LengthPercentage to a Length, and then from a Length to a pixel one.
2022-01-19 16:19:43 +00:00
}
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
FlexFormattingContext::FlexFormattingContext(FormattingState& state, Box const& flex_container, FormattingContext* parent)
LibWeb: Add Layout::FormattingState The purpose of this new object will be to keep track of various states during an ongoing layout. Until now, we've been updating layout tree nodes as we go during layout, which adds an invisible layer of implicit serialization to the whole layout system. My idea with FormattingState is that running layout will produce a result entirely contained within the FormattingState object. At the end of layout, it can then be applied to the layout tree, or simply queried for some metrics we were trying to determine. When doing subtree layouts to determine intrinsic sizes, we will eventually be able to clone the current FormattingState, and run the subtree layout in isolation, opening up opportunities for parallelism. This first patch doesn't go very far though, it merely adds the object as a skeleton class, and makes sure the root BFC has one. :^)
2022-02-19 20:13:47 +01:00
: FormattingContext(Type::Flex, state, flex_container, parent)
LibWeb: Rename FormattingState::ensure() -> get_mutable() This makes it much more obvious what the difference between get() and get_mutable() is.
2022-02-21 17:42:09 +01:00
, m_flex_container_state(m_state.get_mutable(flex_container))
LibWeb: Call the FlexFormattingContext context box "flow_container" This is what the spec calls it and makes the code much less ambiguous.
2021-10-13 19:59:15 +02:00
, m_flex_direction(flex_container.computed_values().flex_direction())
LibWeb: Add a very naive Layout::FlexFormattingContext :^) This is very dumb and only lays out its child boxes on a horizontal line with their shrink-to-fit widths. You have to start somewhere! :^)
2021-01-18 17:33:46 +01:00
{
}
Libraries: Use default constructors/destructors in LibWeb https://isocpp.github.io/CppCoreGuidelines/CppCoreGuidelines#cother-other-default-operation-rules "The compiler is more likely to get the default semantics right and you cannot implement these functions better than the compiler."
2022-03-14 13:21:51 -06:00
FlexFormattingContext::~FlexFormattingContext() = default;
LibWeb: Add a very naive Layout::FlexFormattingContext :^) This is very dumb and only lays out its child boxes on a horizontal line with their shrink-to-fit widths. You have to start somewhere! :^)
2021-01-18 17:33:46 +01:00
LibWeb: Implement basic intrinsic sizing algorithms for flex containers This patch adds support for MinContent and MaxContent layout to FFC. This means that an FFC can now calculate intrinsic sizes for the flex container, to be used by the parent formatting context. There are some FIXME's as usual, but this already works on basic things.
2022-04-06 01:20:20 +02:00
void FlexFormattingContext::run(Box const& run_box, LayoutMode layout_mode)
LibWeb: Add a very naive Layout::FlexFormattingContext :^) This is very dumb and only lays out its child boxes on a horizontal line with their shrink-to-fit widths. You have to start somewhere! :^)
2021-01-18 17:33:46 +01:00
{
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
VERIFY(&run_box == &flex_container());
LibWeb: Implement FlexBox Layout Algorithm
2021-05-31 12:54:06 +02:00
// This implements https://www.w3.org/TR/css-flexbox-1/#layout-algorithm
LibWeb: Split out FFC's "generate anonymous flex items" to a function Let's begin splitting the FlexFormattingContext layout algorithm into separate functions to make it more manageable.
2021-10-13 19:57:26 +02:00
// 1. Generate anonymous flex items
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
generate_anonymous_flex_items();
LibWeb: Implement FlexBox Layout Algorithm
2021-05-31 12:54:06 +02:00
// 2. Determine the available main and cross space for the flex items
LibWeb: Move FFC layout algorithm step 2 into a separate function Determining the available main and cross space is now done by a separate function. The signature is a little bit hairy since this function computes some things that are used by subsequent algorithm steps. Factoring can definitely be improved further.
2021-10-13 21:41:35 +02:00
float main_max_size = NumericLimits<float>::max();
float main_min_size = 0;
LibWeb: Implement FlexBox Layout Algorithm
2021-05-31 12:54:06 +02:00
float cross_max_size = NumericLimits<float>::max();
float cross_min_size = 0;
bool main_is_constrained = false;
bool cross_is_constrained = false;
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
determine_available_main_and_cross_space(main_is_constrained, cross_is_constrained, main_min_size, main_max_size, cross_min_size, cross_max_size);
LibWeb: Implement FlexBox Layout Algorithm
2021-05-31 12:54:06 +02:00
// 3. Determine the flex base size and hypothetical main size of each item
LibWeb: Make FFC line and item vectors members instead of locals This gives all member functions access to these vectors without having to pass them as arguments.
2021-10-13 22:44:54 +02:00
for (auto& flex_item : m_flex_items) {
LibWeb: Make FFC prepare replaced child boxes for layout Before we ask a replaced box about its intrinsic dimensions, we have to "prepare" the box, which tells it to go and work out what its intrinsic dimensions are. I've added a FIXME about how this is silly (and clearly bug-prone) but this patch only patches it locally in FFC for now.
2022-06-21 20:40:26 +02:00
if (flex_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&>(flex_item.box).prepare_for_replaced_layout();
}
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
determine_flex_base_size_and_hypothetical_main_size(flex_item);
LibWeb: Implement FlexBox Layout Algorithm
2021-05-31 12:54:06 +02:00
}
LibWeb: Express intrinsic size layout via size constraints Previously, we had three layout modes: - Normal: - Everything uses the computed values from CSS. - MinContent: - Containing blocks act as if they have 0 width. - All line breaking opportunities are taken. - MaxContent: - Containing blocks act as if they have infinite width. - Only forced line breaks are accepted. The above was based on a set of misunderstandings of CSS sizing. A major problem with the above was that *all* containing blocks behaved differently during intrinsic size layout, not just the relevant one. With this patch there are only two layout modes: - Normal: - Everything uses the computed values from CSS. - IntrinsicSizeDetermination: - One or more boxes have size constraints applied. There are two size constraints per layout box, set here: - FormattingState::NodeState::width_constraint - FormattingState::NodeState::height_constraint They are of type SizeConstraint and can be one of None, MinContent, or MaxContent. The default is None. When performing an IntrinsicSizeDetermination layout, we now assign a size constraint to the box we're trying to determine the intrinsic size of, which is then honored by using two new helpers to query the dimensions of containing blocks: - FormattingContext::containing_block_width_for(Box) - FormattingContext::containing_block_height_for(Box) If there's a relevant constraint in effect on the Box, the size of its containing block is adjusted accordingly. This is essentially an implementation of the "available space" constraints from CSS-SIZING-3. I'm sure some things will break from this, and we'll have to deal with that separately. Spec: https://drafts.csswg.org/css-sizing-3/#available
2022-07-09 15:17:47 +02:00
if (m_flex_container_state.width_constraint != SizeConstraint::None || m_flex_container_state.height_constraint != SizeConstraint::None) {
LibWeb: Implement basic intrinsic sizing algorithms for flex containers This patch adds support for MinContent and MaxContent layout to FFC. This means that an FFC can now calculate intrinsic sizes for the flex container, to be used by the parent formatting context. There are some FIXME's as usual, but this already works on basic things.
2022-04-06 01:20:20 +02:00
// We're computing intrinsic size for the flex container.
determine_intrinsic_size_of_flex_container(layout_mode);
// Our caller is only interested in the content-width and content-height results,
// which have now been set on m_flex_container_state, so there's no need to continue
// the main layout algorithm after this point.
return;
}
LibWeb: Implement FlexBox Layout Algorithm
2021-05-31 12:54:06 +02:00
// 4. Determine the main size of the flex container
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
determine_main_size_of_flex_container(main_is_constrained, main_min_size, main_max_size);
LibWeb: Implement FlexBox Layout Algorithm
2021-05-31 12:54:06 +02:00
// 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!
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
collect_flex_items_into_flex_lines();
LibWeb: Implement FlexBox Layout Algorithm
2021-05-31 12:54:06 +02:00
LibWeb: Move FFC layout algorithm step 6 to a separate function
2021-10-13 22:11:50 +02:00
// 6. Resolve the flexible lengths
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
resolve_flexible_lengths();
LibWeb: Implement FlexBox Layout Algorithm
2021-05-31 12:54:06 +02:00
// Cross Size Determination
// 7. Determine the hypothetical cross size of each item
LibWeb: Make FFC line and item vectors members instead of locals This gives all member functions access to these vectors without having to pass them as arguments.
2021-10-13 22:44:54 +02:00
for (auto& flex_item : m_flex_items) {
LibWeb: Improve FFC step 7 (hypothetical cross size) - Avoid performing inside layout on definite-size flex items (since their computed size can be used as-is.) - Use FormattingState::clone() to generate a throwaway layout instead of mutating the tree in-place. - Update spec link & comments based on current CSSWG draft. The latest version is quite a bit clearer on how this should work.
2022-02-27 13:39:38 +01:00
determine_hypothetical_cross_size_of_item(flex_item);
LibWeb: Implement FlexBox Layout Algorithm
2021-05-31 12:54:06 +02:00
}
// 8. Calculate the cross size of each flex line.
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
calculate_cross_size_of_each_flex_line(cross_min_size, cross_max_size);
LibWeb: Add a very naive Layout::FlexFormattingContext :^) This is very dumb and only lays out its child boxes on a horizontal line with their shrink-to-fit widths. You have to start somewhere! :^)
2021-01-18 17:33:46 +01:00
LibWeb: Implement FlexBox Layout Algorithm
2021-05-31 12:54:06 +02:00
// 9. Handle 'align-content: stretch'.
// FIXME: This
// 10. Collapse visibility:collapse items.
// FIXME: This
// 11. Determine the used cross size of each flex item.
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
determine_used_cross_size_of_each_flex_item();
LibWeb: Implement FlexBox Layout Algorithm
2021-05-31 12:54:06 +02:00
// 12. Distribute any remaining free space.
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
distribute_any_remaining_free_space();
LibWeb: Implement FlexBox Layout Algorithm
2021-05-31 12:54:06 +02:00
// 13. Resolve cross-axis auto margins.
// FIXME: This
// 14. Align all flex items along the cross-axis
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
align_all_flex_items_along_the_cross_axis();
LibWeb: Implement FlexBox Layout Algorithm
2021-05-31 12:54:06 +02:00
// 15. Determine the flex container’s used cross size:
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
determine_flex_container_used_cross_size(cross_min_size, cross_max_size);
LibWeb: Implement FlexBox Layout Algorithm
2021-05-31 12:54:06 +02:00
LibWeb: Move FFC layout algorithm step 16 to a separate function
2021-10-13 22:25:39 +02:00
// 16. Align all flex lines (per align-content)
LibWeb: Make FFC line and item vectors members instead of locals This gives all member functions access to these vectors without having to pass them as arguments.
2021-10-13 22:44:54 +02:00
align_all_flex_lines();
LibWeb: Layout inside of flex items at the end of FFC layout Instead of doing internal child layout incrementally as we go, save it for the end of flex layout. The code will become simpler if we can focus on simply computing the dimensions of each flex item while we're doing the main FFC algorithm.
2022-02-27 10:01:38 +01:00
// AD-HOC: Layout the inside of all flex items.
LibWeb: Fix flex line alignment in single-line flex containers For single-line flex containers, center the only flex line along the cross axis. Alignment of multi-line flex containers are left as a FIXME. This patch also moves out the assignment of final metrics to the FormattingState from align_all_flex_lines() to a separate function.
2022-02-27 23:58:54 +01:00
copy_dimensions_from_flex_items_to_boxes();
LibWeb: Layout inside of flex items at the end of FFC layout Instead of doing internal child layout incrementally as we go, save it for the end of flex layout. The code will become simpler if we can focus on simply computing the dimensions of each flex item while we're doing the main FFC algorithm.
2022-02-27 10:01:38 +01:00
for (auto& flex_item : m_flex_items) {
LibWeb: Add missing null check of independent formatting context in FFC When calling layout_inside() on a flex item that can't have children of its own, layout_inside() will not return an independent formatting context, so we need to handle that case here.
2022-04-11 01:20:24 +02:00
if (auto independent_formatting_context = layout_inside(flex_item.box, LayoutMode::Normal))
independent_formatting_context->parent_context_did_dimension_child_root_box();
LibWeb: Layout inside of flex items at the end of FFC layout Instead of doing internal child layout incrementally as we go, save it for the end of flex layout. The code will become simpler if we can focus on simply computing the dimensions of each flex item while we're doing the main FFC algorithm.
2022-02-27 10:01:38 +01:00
}
LibWeb: Fix flex line alignment in single-line flex containers For single-line flex containers, center the only flex line along the cross axis. Alignment of multi-line flex containers are left as a FIXME. This patch also moves out the assignment of final metrics to the FormattingState from align_all_flex_lines() to a separate function.
2022-02-27 23:58:54 +01:00
// FIXME: We run the "copy dimensions" step *again* here, in order to override any sizes
LibWeb: Layout inside of flex items at the end of FFC layout Instead of doing internal child layout incrementally as we go, save it for the end of flex layout. The code will become simpler if we can focus on simply computing the dimensions of each flex item while we're doing the main FFC algorithm.
2022-02-27 10:01:38 +01:00
// assigned to the flex item by the "layout inside" step above. This is definitely not
// part of the spec, and simply covering up the fact that our inside layout currently
// mutates the height of BFC roots.
LibWeb: Fix flex line alignment in single-line flex containers For single-line flex containers, center the only flex line along the cross axis. Alignment of multi-line flex containers are left as a FIXME. This patch also moves out the assignment of final metrics to the FormattingState from align_all_flex_lines() to a separate function.
2022-02-27 23:58:54 +01:00
copy_dimensions_from_flex_items_to_boxes();
LibWeb: Make sure we layout absolutely positioned children of FFC
2022-06-21 20:17:28 +02:00
flex_container().for_each_child_of_type<Box>([&](Layout::Box& box) {
if (box.is_absolutely_positioned())
layout_absolutely_positioned_element(box);
});
LibWeb: Implement FlexBox Layout Algorithm
2021-05-31 12:54:06 +02:00
}
LibWeb: Split out FFC's "generate anonymous flex items" to a function Let's begin splitting the FlexFormattingContext layout algorithm into separate functions to make it more manageable.
2021-10-13 19:57:26 +02:00
LibWeb: Make FFC line and item vectors members instead of locals This gives all member functions access to these vectors without having to pass them as arguments.
2021-10-13 22:44:54 +02:00
void FlexFormattingContext::populate_specified_margins(FlexItem& item, CSS::FlexDirection flex_direction) const
LibWeb: Split out FFC's "generate anonymous flex items" to a function Let's begin splitting the FlexFormattingContext layout algorithm into separate functions to make it more manageable.
2021-10-13 19:57:26 +02:00
{
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
auto width_of_containing_block = m_state.get(*item.box.containing_block()).content_width;
LibWeb: Convert width/height and min-/max- versions to LengthPercentage A lot of this is quite ugly, but it should only be so until I remove Length::Type::Percentage entirely. (Which should happen later in this PR, otherwise, yell at me!) For now, a lot of things have to be resolved twice, first from a LengthPercentage to a Length, and then from a Length to a pixel one.
2022-01-19 16:19:43 +00:00
auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
LibWeb: Split out FFC's "generate anonymous flex items" to a function Let's begin splitting the FlexFormattingContext layout algorithm into separate functions to make it more manageable.
2021-10-13 19:57:26 +02:00
// FIXME: This should also take reverse-ness into account
if (flex_direction == CSS::FlexDirection::Row || flex_direction == CSS::FlexDirection::RowReverse) {
LibWeb: Take borders and padding into account when doing Flex layout Before this the flex layout didn't take into account the applied borders or padding while laying out the items. The child's top and left borders would get painted over the parent's borders, also due to it not taking borders into account, children with borders would overlap each other. Due to it not taking padding into account, the children would get drawn outside the parent element.
2022-03-27 16:14:18 +02:00
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.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
item.padding.main_after = item.box.computed_values().padding().right.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
item.padding.cross_before = item.box.computed_values().padding().top.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
item.padding.cross_after = item.box.computed_values().padding().bottom.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
LibWeb: Remove redundant Length::resolved() calls Now that calc() is also resolved in to_px(), code in the form `foo.resolved(bar).to_px(bar)` can be simplified to `foo.to_px(bar)`.
2022-02-18 16:27:28 +00:00
item.margins.main_before = item.box.computed_values().margin().left.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
item.margins.main_after = item.box.computed_values().margin().right.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
item.margins.cross_before = item.box.computed_values().margin().top.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
item.margins.cross_after = item.box.computed_values().margin().bottom.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
LibWeb: Don't include flex line margins in inner flex item cross sizes In cases where flex item cross size is based on the flex line cross size, the spec specifically says to transfer the *outer* cross size of the line. We were ignoring the "outer" part. This patch fixes that by subtracting the cross margins from the size.
2022-07-07 11:44:35 +02:00
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();
LibWeb: Split out FFC's "generate anonymous flex items" to a function Let's begin splitting the FlexFormattingContext layout algorithm into separate functions to make it more manageable.
2021-10-13 19:57:26 +02:00
} else {
LibWeb: Take borders and padding into account when doing Flex layout Before this the flex layout didn't take into account the applied borders or padding while laying out the items. The child's top and left borders would get painted over the parent's borders, also due to it not taking borders into account, children with borders would overlap each other. Due to it not taking padding into account, the children would get drawn outside the parent element.
2022-03-27 16:14:18 +02:00
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.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
item.padding.main_after = item.box.computed_values().padding().bottom.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
item.padding.cross_before = item.box.computed_values().padding().left.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
item.padding.cross_after = item.box.computed_values().padding().right.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
LibWeb: Remove redundant Length::resolved() calls Now that calc() is also resolved in to_px(), code in the form `foo.resolved(bar).to_px(bar)` can be simplified to `foo.to_px(bar)`.
2022-02-18 16:27:28 +00:00
item.margins.main_before = item.box.computed_values().margin().top.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
item.margins.main_after = item.box.computed_values().margin().bottom.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
item.margins.cross_before = item.box.computed_values().margin().left.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
item.margins.cross_after = item.box.computed_values().margin().right.resolved(item.box, width_of_containing_block_as_length).to_px(item.box);
LibWeb: Don't include flex line margins in inner flex item cross sizes In cases where flex item cross size is based on the flex line cross size, the spec specifically says to transfer the *outer* cross size of the line. We were ignoring the "outer" part. This patch fixes that by subtracting the cross margins from the size.
2022-07-07 11:44:35 +02:00
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();
LibWeb: Split out FFC's "generate anonymous flex items" to a function Let's begin splitting the FlexFormattingContext layout algorithm into separate functions to make it more manageable.
2021-10-13 19:57:26 +02:00
}
};
// https://www.w3.org/TR/css-flexbox-1/#flex-items
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
void FlexFormattingContext::generate_anonymous_flex_items()
LibWeb: Split out FFC's "generate anonymous flex items" to a function Let's begin splitting the FlexFormattingContext layout algorithm into separate functions to make it more manageable.
2021-10-13 19:57:26 +02:00
{
// 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.
LibWeb: Implement the flex order CSS property Adds support for the flex order property and a test page for it on the browser welcome page.
2022-03-31 22:11:38 +02:00
HashMap<int, Vector<FlexItem>> order_item_bucket;
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
flex_container().for_each_child_of_type<Box>([&](Box& child_box) {
LibWeb: Split out FFC's "generate anonymous flex items" to a function Let's begin splitting the FlexFormattingContext layout algorithm into separate functions to make it more manageable.
2021-10-13 19:57:26 +02:00
// Skip anonymous text runs that are only whitespace.
if (child_box.is_anonymous() && !child_box.first_child_of_type<BlockContainer>()) {
bool contains_only_white_space = true;
LibWeb: Don't treat inline-level children of flex items as whitespace This was causing us to collapse some children of flex items as if they were useless whitespace text nodes.
2022-03-18 22:39:48 +01:00
child_box.for_each_in_subtree([&](auto const& node) {
if (!is<TextNode>(node) || !static_cast<TextNode const&>(node).dom_node().data().is_whitespace()) {
LibWeb: Split out FFC's "generate anonymous flex items" to a function Let's begin splitting the FlexFormattingContext layout algorithm into separate functions to make it more manageable.
2021-10-13 19:57:26 +02:00
contains_only_white_space = false;
return IterationDecision::Break;
}
return IterationDecision::Continue;
});
if (contains_only_white_space)
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 flex_item = { child_box };
populate_specified_margins(flex_item, m_flex_direction);
LibWeb: Implement the flex order CSS property Adds support for the flex order property and a test page for it on the browser welcome page.
2022-03-31 22:11:38 +02:00
auto& order_bucket = order_item_bucket.ensure(child_box.computed_values().order());
order_bucket.append(move(flex_item));
LibWeb: Split out FFC's "generate anonymous flex items" to a function Let's begin splitting the FlexFormattingContext layout algorithm into separate functions to make it more manageable.
2021-10-13 19:57:26 +02:00
return IterationDecision::Continue;
});
LibWeb: Implement the flex order CSS property Adds support for the flex order property and a test page for it on the browser welcome page.
2022-03-31 22:11:38 +02:00
auto keys = order_item_bucket.keys();
LibWeb: Implement flex reverse layouts This builds on the work done by implementing the flex order CSS property and implements flex reverse layouts by just reversing the order and the items within each order bucket.
2022-04-02 11:29:55 +02:00
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; });
}
LibWeb: Implement the flex order CSS property Adds support for the flex order property and a test page for it on the browser welcome page.
2022-03-31 22:11:38 +02:00
for (auto key : keys) {
auto order_bucket = order_item_bucket.get(key);
if (order_bucket.has_value()) {
LibWeb: Implement flex reverse layouts This builds on the work done by implementing the flex order CSS property and implements flex reverse layouts by just reversing the order and the items within each order bucket.
2022-04-02 11:29:55 +02:00
auto items = order_bucket.value();
if (is_direction_reverse()) {
for (auto flex_item : items.in_reverse()) {
m_flex_items.append(move(flex_item));
}
} else {
for (auto flex_item : items) {
m_flex_items.append(move(flex_item));
}
LibWeb: Implement the flex order CSS property Adds support for the flex order property and a test page for it on the browser welcome page.
2022-03-31 22:11:38 +02:00
}
}
}
LibWeb: Split out FFC's "generate anonymous flex items" to a function Let's begin splitting the FlexFormattingContext layout algorithm into separate functions to make it more manageable.
2021-10-13 19:57:26 +02:00
}
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
bool FlexFormattingContext::has_definite_main_size(Box const& box) const
{
return is_row_layout() ? box.has_definite_width() : box.has_definite_height();
}
float FlexFormattingContext::specified_main_size(Box const& box) const
{
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
auto const& box_state = m_state.get(box);
return is_row_layout() ? box_state.content_width : box_state.content_height;
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
float FlexFormattingContext::specified_cross_size(Box const& box) const
{
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
auto const& box_state = m_state.get(box);
return is_row_layout() ? box_state.content_height : box_state.content_width;
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
LibWeb: Add FFC helpers for resolving definite main/cross sizes Although something has a definite size, we may still have to "resolve" it, since FFC is quite liberal in what it considers to be definite. Let's put that logic in a set of helper functions.
2022-03-12 14:11:55 +01:00
float FlexFormattingContext::resolved_definite_cross_size(Box const& box) const
{
if (is_row_layout())
VERIFY(box.has_definite_height());
else
VERIFY(box.has_definite_width());
auto const& cross_value = is_row_layout() ? box.computed_values().height() : box.computed_values().width();
LibWeb: Make sure CSS::ComputedValues has initial size values Instead of using Optional<LengthPercentage>, we now use LengthPercentage for these values. The initial values are all `auto`. This avoids having to check `has_value()` in a ton of places.
2022-07-07 12:36:02 +02:00
if (cross_value.is_length())
return cross_value.length().to_px(box);
return cross_value.resolved(box, CSS::Length::make_px(specified_cross_size(flex_container()))).to_px(box);
LibWeb: Add FFC helpers for resolving definite main/cross sizes Although something has a definite size, we may still have to "resolve" it, since FFC is quite liberal in what it considers to be definite. Let's put that logic in a set of helper functions.
2022-03-12 14:11:55 +01:00
}
float FlexFormattingContext::resolved_definite_main_size(Box const& box) const
{
if (is_row_layout())
VERIFY(box.has_definite_width());
else
VERIFY(box.has_definite_height());
auto const& cross_value = is_row_layout() ? box.computed_values().width() : box.computed_values().height();
LibWeb: Make sure CSS::ComputedValues has initial size values Instead of using Optional<LengthPercentage>, we now use LengthPercentage for these values. The initial values are all `auto`. This avoids having to check `has_value()` in a ton of places.
2022-07-07 12:36:02 +02:00
if (cross_value.is_length())
return cross_value.length().to_px(box);
return cross_value.resolved(box, CSS::Length::make_px(specified_main_size(flex_container()))).to_px(box);
LibWeb: Add FFC helpers for resolving definite main/cross sizes Although something has a definite size, we may still have to "resolve" it, since FFC is quite liberal in what it considers to be definite. Let's put that logic in a set of helper functions.
2022-03-12 14:11:55 +01:00
}
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
bool FlexFormattingContext::has_main_min_size(Box const& box) const
{
auto value = is_row_layout() ? box.computed_values().min_width() : box.computed_values().min_height();
LibWeb: Convert width/height and min-/max- versions to LengthPercentage A lot of this is quite ugly, but it should only be so until I remove Length::Type::Percentage entirely. (Which should happen later in this PR, otherwise, yell at me!) For now, a lot of things have to be resolved twice, first from a LengthPercentage to a Length, and then from a Length to a pixel one.
2022-01-19 16:19:43 +00:00
return !is_undefined_or_auto(value);
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
bool FlexFormattingContext::has_cross_min_size(Box const& box) const
{
auto value = is_row_layout() ? box.computed_values().min_height() : box.computed_values().min_width();
LibWeb: Convert width/height and min-/max- versions to LengthPercentage A lot of this is quite ugly, but it should only be so until I remove Length::Type::Percentage entirely. (Which should happen later in this PR, otherwise, yell at me!) For now, a lot of things have to be resolved twice, first from a LengthPercentage to a Length, and then from a Length to a pixel one.
2022-01-19 16:19:43 +00:00
return !is_undefined_or_auto(value);
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
bool FlexFormattingContext::has_definite_cross_size(Box const& box) const
{
LibWeb: Remove FFC::cross_size_is_absolute_or_resolved_nicely() This is now answered authoritatively by Layout::Box itself.
2022-02-27 17:15:37 +01:00
return is_row_layout() ? box.has_definite_height() : box.has_definite_width();
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
float FlexFormattingContext::specified_main_size_of_child_box(Box const& child_box) const
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
{
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
auto main_size_of_parent = specified_main_size(flex_container());
LibWeb: Use Optional instead of undefined-lengths for widths/heights
2022-02-18 15:10:11 +00:00
auto& value = is_row_layout() ? child_box.computed_values().width() : child_box.computed_values().height();
LibWeb: Make sure CSS::ComputedValues has initial size values Instead of using Optional<LengthPercentage>, we now use LengthPercentage for these values. The initial values are all `auto`. This avoids having to check `has_value()` in a ton of places.
2022-07-07 12:36:02 +02:00
return value.resolved(child_box, CSS::Length::make_px(main_size_of_parent)).to_px(child_box);
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
float FlexFormattingContext::specified_main_min_size(Box const& box) const
{
return is_row_layout()
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
? get_pixel_size(m_state, box, box.computed_values().min_width())
: get_pixel_size(m_state, box, box.computed_values().min_height());
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
float FlexFormattingContext::specified_cross_min_size(Box const& box) const
{
return is_row_layout()
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
? get_pixel_size(m_state, box, box.computed_values().min_height())
: get_pixel_size(m_state, box, box.computed_values().min_width());
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
bool FlexFormattingContext::has_main_max_size(Box const& box) const
{
return is_row_layout()
LibWeb: Convert width/height and min-/max- versions to LengthPercentage A lot of this is quite ugly, but it should only be so until I remove Length::Type::Percentage entirely. (Which should happen later in this PR, otherwise, yell at me!) For now, a lot of things have to be resolved twice, first from a LengthPercentage to a Length, and then from a Length to a pixel one.
2022-01-19 16:19:43 +00:00
? !is_undefined_or_auto(box.computed_values().max_width())
: !is_undefined_or_auto(box.computed_values().max_height());
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
bool FlexFormattingContext::has_cross_max_size(Box const& box) const
{
return is_row_layout()
LibWeb: Convert width/height and min-/max- versions to LengthPercentage A lot of this is quite ugly, but it should only be so until I remove Length::Type::Percentage entirely. (Which should happen later in this PR, otherwise, yell at me!) For now, a lot of things have to be resolved twice, first from a LengthPercentage to a Length, and then from a Length to a pixel one.
2022-01-19 16:19:43 +00:00
? !is_undefined_or_auto(box.computed_values().max_height())
: !is_undefined_or_auto(box.computed_values().max_width());
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
float FlexFormattingContext::specified_main_max_size(Box const& box) const
{
return is_row_layout()
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
? get_pixel_size(m_state, box, box.computed_values().max_width())
: get_pixel_size(m_state, box, box.computed_values().max_height());
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
float FlexFormattingContext::specified_cross_max_size(Box const& box) const
{
return is_row_layout()
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
? get_pixel_size(m_state, box, box.computed_values().max_height())
: get_pixel_size(m_state, box, box.computed_values().max_width());
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
float FlexFormattingContext::calculated_main_size(Box const& box) const
{
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
auto const& box_state = m_state.get(box);
return is_row_layout() ? box_state.content_width : box_state.content_height;
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
bool FlexFormattingContext::is_cross_auto(Box const& box) const
{
LibWeb: Use Optional instead of undefined-lengths for widths/heights
2022-02-18 15:10:11 +00:00
auto& cross_length = is_row_layout() ? box.computed_values().height() : box.computed_values().width();
LibWeb: Make sure CSS::ComputedValues has initial size values Instead of using Optional<LengthPercentage>, we now use LengthPercentage for these values. The initial values are all `auto`. This avoids having to check `has_value()` in a ton of places.
2022-07-07 12:36:02 +02:00
return cross_length.is_auto();
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
bool FlexFormattingContext::is_main_axis_margin_first_auto(Box const& box) const
{
LibWeb: Convert width/height and min-/max- versions to LengthPercentage A lot of this is quite ugly, but it should only be so until I remove Length::Type::Percentage entirely. (Which should happen later in this PR, otherwise, yell at me!) For now, a lot of things have to be resolved twice, first from a LengthPercentage to a Length, and then from a Length to a pixel one.
2022-01-19 16:19:43 +00:00
if (is_row_layout())
return box.computed_values().margin().left.is_length() && box.computed_values().margin().left.length().is_auto();
return box.computed_values().margin().top.is_length() && box.computed_values().margin().top.length().is_auto();
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
bool FlexFormattingContext::is_main_axis_margin_second_auto(Box const& box) const
{
LibWeb: Convert width/height and min-/max- versions to LengthPercentage A lot of this is quite ugly, but it should only be so until I remove Length::Type::Percentage entirely. (Which should happen later in this PR, otherwise, yell at me!) For now, a lot of things have to be resolved twice, first from a LengthPercentage to a Length, and then from a Length to a pixel one.
2022-01-19 16:19:43 +00:00
if (is_row_layout())
return box.computed_values().margin().right.is_length() && box.computed_values().margin().right.length().is_auto();
return box.computed_values().margin().bottom.is_length() && box.computed_values().margin().bottom.length().is_auto();
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
void FlexFormattingContext::set_main_size(Box const& box, float size)
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
{
if (is_row_layout())
LibWeb: Rename FormattingState::ensure() -> get_mutable() This makes it much more obvious what the difference between get() and get_mutable() is.
2022-02-21 17:42:09 +01:00
m_state.get_mutable(box).content_width = size;
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
else
LibWeb: Rename FormattingState::ensure() -> get_mutable() This makes it much more obvious what the difference between get() and get_mutable() is.
2022-02-21 17:42:09 +01:00
m_state.get_mutable(box).content_height = size;
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
void FlexFormattingContext::set_cross_size(Box const& box, float size)
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
{
if (is_row_layout())
LibWeb: Rename FormattingState::ensure() -> get_mutable() This makes it much more obvious what the difference between get() and get_mutable() is.
2022-02-21 17:42:09 +01:00
m_state.get_mutable(box).content_height = size;
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
else
LibWeb: Rename FormattingState::ensure() -> get_mutable() This makes it much more obvious what the difference between get() and get_mutable() is.
2022-02-21 17:42:09 +01:00
m_state.get_mutable(box).content_width = size;
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
void FlexFormattingContext::set_offset(Box const& box, float main_offset, float cross_offset)
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
{
if (is_row_layout())
LibWeb: Rename FormattingState::ensure() -> get_mutable() This makes it much more obvious what the difference between get() and get_mutable() is.
2022-02-21 17:42:09 +01:00
m_state.get_mutable(box).offset = Gfx::FloatPoint { main_offset, cross_offset };
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
else
LibWeb: Rename FormattingState::ensure() -> get_mutable() This makes it much more obvious what the difference between get() and get_mutable() is.
2022-02-21 17:42:09 +01:00
m_state.get_mutable(box).offset = Gfx::FloatPoint { cross_offset, main_offset };
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
LibWeb: Actually distribute free space to flex items with auto margins We were not applying the distributed space to the used offset of flex items, as we were only assigning the margins to the layout state of the box, not the internal FlexItem::margins.
2022-06-21 21:18:00 +02:00
void FlexFormattingContext::set_main_axis_first_margin(FlexItem& item, float margin)
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
{
LibWeb: Actually distribute free space to flex items with auto margins We were not applying the distributed space to the used offset of flex items, as we were only assigning the margins to the layout state of the box, not the internal FlexItem::margins.
2022-06-21 21:18:00 +02:00
item.margins.main_before = margin;
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
if (is_row_layout())
LibWeb: Actually distribute free space to flex items with auto margins We were not applying the distributed space to the used offset of flex items, as we were only assigning the margins to the layout state of the box, not the internal FlexItem::margins.
2022-06-21 21:18:00 +02:00
m_state.get_mutable(item.box).margin_left = margin;
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
else
LibWeb: Actually distribute free space to flex items with auto margins We were not applying the distributed space to the used offset of flex items, as we were only assigning the margins to the layout state of the box, not the internal FlexItem::margins.
2022-06-21 21:18:00 +02:00
m_state.get_mutable(item.box).margin_top = margin;
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
LibWeb: Actually distribute free space to flex items with auto margins We were not applying the distributed space to the used offset of flex items, as we were only assigning the margins to the layout state of the box, not the internal FlexItem::margins.
2022-06-21 21:18:00 +02:00
void FlexFormattingContext::set_main_axis_second_margin(FlexItem& item, float margin)
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
{
LibWeb: Actually distribute free space to flex items with auto margins We were not applying the distributed space to the used offset of flex items, as we were only assigning the margins to the layout state of the box, not the internal FlexItem::margins.
2022-06-21 21:18:00 +02:00
item.margins.main_after = margin;
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
if (is_row_layout())
LibWeb: Actually distribute free space to flex items with auto margins We were not applying the distributed space to the used offset of flex items, as we were only assigning the margins to the layout state of the box, not the internal FlexItem::margins.
2022-06-21 21:18:00 +02:00
m_state.get_mutable(item.box).margin_right = margin;
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
else
LibWeb: Actually distribute free space to flex items with auto margins We were not applying the distributed space to the used offset of flex items, as we were only assigning the margins to the layout state of the box, not the internal FlexItem::margins.
2022-06-21 21:18:00 +02:00
m_state.get_mutable(item.box).margin_bottom = margin;
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
float FlexFormattingContext::sum_of_margin_padding_border_in_main_axis(Box const& box) const
{
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
auto const& box_state = m_state.get(box);
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
if (is_row_layout()) {
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
return box_state.margin_left + box_state.margin_right
+ box_state.padding_left + box_state.padding_right
+ box_state.border_left + box_state.border_right;
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
} else {
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
return box_state.margin_top + box_state.margin_bottom
+ box_state.padding_top + box_state.padding_bottom
+ box_state.border_top + box_state.border_bottom;
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 21:24:00 +02:00
}
}
LibWeb: Move FFC layout algorithm step 2 into a separate function Determining the available main and cross space is now done by a separate function. The signature is a little bit hairy since this function computes some things that are used by subsequent algorithm steps. Factoring can definitely be improved further.
2021-10-13 21:41:35 +02:00
// https://www.w3.org/TR/css-flexbox-1/#algo-available
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
void FlexFormattingContext::determine_available_main_and_cross_space(bool& main_is_constrained, bool& cross_is_constrained, float& main_min_size, float& main_max_size, float& cross_min_size, float& cross_max_size)
LibWeb: Move FFC layout algorithm step 2 into a separate function Determining the available main and cross space is now done by a separate function. The signature is a little bit hairy since this function computes some things that are used by subsequent algorithm steps. Factoring can definitely be improved further.
2021-10-13 21:41:35 +02:00
{
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
auto containing_block_effective_main_size = [&](Box const& box) -> Optional<float> {
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
auto& containing_block = *box.containing_block();
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
if (has_definite_main_size(containing_block))
return resolved_definite_main_size(containing_block);
return {};
LibWeb: Move FFC layout algorithm step 2 into a separate function Determining the available main and cross space is now done by a separate function. The signature is a little bit hairy since this function computes some things that are used by subsequent algorithm steps. Factoring can definitely be improved further.
2021-10-13 21:41:35 +02:00
};
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
Optional<float> main_available_space;
LibWeb: Add spec comments to FFC layout algorithm step 2
2021-10-13 23:56:05 +02:00
main_is_constrained = false;
// For each dimension,
// if that dimension of the flex container’s content box is a definite size, use that;
// if that dimension of the flex container is being sized under a min or max-content constraint, the available space in that dimension is that constraint;
// otherwise, subtract the flex container’s margin, border, and padding from the space available to the flex container in that dimension and use that value. (This might result in an infinite value.)
LibWeb: Move FFC layout algorithm step 2 into a separate function Determining the available main and cross space is now done by a separate function. The signature is a little bit hairy since this function computes some things that are used by subsequent algorithm steps. Factoring can definitely be improved further.
2021-10-13 21:41:35 +02:00
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
if (has_definite_main_size(flex_container())) {
LibWeb: Move FFC layout algorithm step 2 into a separate function Determining the available main and cross space is now done by a separate function. The signature is a little bit hairy since this function computes some things that are used by subsequent algorithm steps. Factoring can definitely be improved further.
2021-10-13 21:41:35 +02:00
main_is_constrained = true;
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
main_available_space = specified_main_size(flex_container());
LibWeb: Move FFC layout algorithm step 2 into a separate function Determining the available main and cross space is now done by a separate function. The signature is a little bit hairy since this function computes some things that are used by subsequent algorithm steps. Factoring can definitely be improved further.
2021-10-13 21:41:35 +02:00
} else {
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
if (has_main_max_size(flex_container())) {
main_max_size = specified_main_max_size(flex_container());
LibWeb: Move FFC layout algorithm step 2 into a separate function Determining the available main and cross space is now done by a separate function. The signature is a little bit hairy since this function computes some things that are used by subsequent algorithm steps. Factoring can definitely be improved further.
2021-10-13 21:41:35 +02:00
main_available_space = main_max_size;
main_is_constrained = true;
}
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
if (has_main_min_size(flex_container())) {
main_min_size = specified_main_min_size(flex_container());
LibWeb: Move FFC layout algorithm step 2 into a separate function Determining the available main and cross space is now done by a separate function. The signature is a little bit hairy since this function computes some things that are used by subsequent algorithm steps. Factoring can definitely be improved further.
2021-10-13 21:41:35 +02:00
main_is_constrained = true;
}
if (!main_is_constrained) {
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
auto available_main_size = containing_block_effective_main_size(flex_container());
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
main_available_space = available_main_size.value_or(NumericLimits<float>::max()) - sum_of_margin_padding_border_in_main_axis(flex_container());
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
if (flex_container().computed_values().flex_wrap() == CSS::FlexWrap::Wrap || flex_container().computed_values().flex_wrap() == CSS::FlexWrap::WrapReverse) {
main_available_space = specified_main_size(*flex_container().containing_block());
LibWeb: Move FFC layout algorithm step 2 into a separate function Determining the available main and cross space is now done by a separate function. The signature is a little bit hairy since this function computes some things that are used by subsequent algorithm steps. Factoring can definitely be improved further.
2021-10-13 21:41:35 +02:00
main_is_constrained = true;
}
}
}
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
Optional<float> cross_available_space;
LibWeb: Add spec comments to FFC layout algorithm step 2
2021-10-13 23:56:05 +02:00
cross_is_constrained = false;
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
if (has_definite_cross_size(flex_container())) {
cross_available_space = specified_cross_size(flex_container());
LibWeb: Move FFC layout algorithm step 2 into a separate function Determining the available main and cross space is now done by a separate function. The signature is a little bit hairy since this function computes some things that are used by subsequent algorithm steps. Factoring can definitely be improved further.
2021-10-13 21:41:35 +02:00
} else {
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
if (has_cross_max_size(flex_container())) {
cross_max_size = specified_cross_max_size(flex_container());
LibWeb: Move FFC layout algorithm step 2 into a separate function Determining the available main and cross space is now done by a separate function. The signature is a little bit hairy since this function computes some things that are used by subsequent algorithm steps. Factoring can definitely be improved further.
2021-10-13 21:41:35 +02:00
cross_is_constrained = true;
}
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
if (has_cross_min_size(flex_container())) {
cross_min_size = specified_cross_min_size(flex_container());
LibWeb: Move FFC layout algorithm step 2 into a separate function Determining the available main and cross space is now done by a separate function. The signature is a little bit hairy since this function computes some things that are used by subsequent algorithm steps. Factoring can definitely be improved further.
2021-10-13 21:41:35 +02:00
cross_is_constrained = true;
}
// FIXME: Is this right? Probably not.
if (!cross_is_constrained)
cross_available_space = cross_max_size;
}
LibWeb: Put available space information in an FFC member This makes it easier for each step of the flex layout algorithm to access this information.
2022-02-27 12:19:58 +01:00
m_available_space = AvailableSpace { .main = main_available_space, .cross = cross_available_space };
LibWeb: Move FFC layout algorithm step 2 into a separate function Determining the available main and cross space is now done by a separate function. The signature is a little bit hairy since this function computes some things that are used by subsequent algorithm steps. Factoring can definitely be improved further.
2021-10-13 21:41:35 +02:00
}
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
float FlexFormattingContext::calculate_indefinite_main_size(FlexItem const& item)
LibWeb: Move FFC layout algorithm step 3 to a separate function
2021-10-13 21:49:28 +02:00
{
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
VERIFY(!has_definite_main_size(item.box));
LibWeb: Use max-content main size for flex items w/ definite cross size If the main size is indefinite, that is.
2022-07-09 21:35:03 +02:00
if (has_definite_cross_size(item.box))
return calculate_max_content_main_size(item);
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
// Item has indefinite cross size, layout with "fit-content"
// If we're in a row layout and looking for the width, just use the fit-content width.
if (is_row_layout())
return calculate_fit_content_width(item.box, m_available_space->main);
// We're in a column layout, looking for the height. Figure out the fit-content width,
// then layout with that and see what height comes out of it.
float fit_content_cross_size = calculate_fit_content_width(item.box, m_available_space->cross);
LibWeb: Make Layout::FormattingState copies shallow Previously, each NodeState in a FormattingState was shared with the parent FormattingState, but the HashMap of NodeState had to be copied when making FormattingState copies. This patch makes copying instant by keeping a pointer to the parent FormattingState instead. When fetching immutable state via get(), we may now return a reference to a NodeState owned by a parent FormattingState. get_mutable() will copy any NodeState found in the ancestor chain before making a brand new one.
2022-03-12 16:33:11 +01:00
FormattingState throwaway_state(&m_state);
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
auto& box_state = throwaway_state.get_mutable(item.box);
// Item has definite cross size, layout with that as the used cross 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);
box_state.content_width = fit_content_cross_size;
LibWeb: Rename the LayoutMode enum values and explain them The old mode names, while mechanically accurate, didn't really reflect their relationship to the CSS specifications. This patch renames them as follows: Default => Normal AllPossibleLineBreaks => MinContent OnlyRequiredLineBreaks => MaxContent There's also now an explainer comment with the LayoutMode enum about the specific implications of layout in each mode.
2022-03-19 15:44:02 +01:00
independent_formatting_context->run(item.box, LayoutMode::Normal);
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
return BlockFormattingContext::compute_theoretical_height(throwaway_state, item.box);
LibWeb: Move FFC layout algorithm step 3 to a separate function
2021-10-13 21:49:28 +02:00
}
LibWeb: Support flex item cross sizing based on intrinsic aspect ratio This patch implements case B from the "determine the flex base size and hypothetical main size of each item" from the flexbox algorithm. https://drafts.csswg.org/css-flexbox-1/#algo-main-item
2022-07-07 12:39:24 +02:00
// https://drafts.csswg.org/css-flexbox-1/#propdef-flex-basis
CSS::FlexBasisData FlexFormattingContext::used_flex_basis_for_item(FlexItem const& item) const
{
auto flex_basis = item.box.computed_values().flex_basis();
if (flex_basis.type == CSS::FlexBasis::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.type = CSS::FlexBasis::Content;
} else {
flex_basis.type = CSS::FlexBasis::LengthPercentage;
flex_basis.length_percentage = main_size;
}
}
return flex_basis;
}
LibWeb: Move FFC layout algorithm step 3 to a separate function
2021-10-13 21:49:28 +02:00
// https://www.w3.org/TR/css-flexbox-1/#algo-main-item
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(FlexItem& flex_item)
LibWeb: Move FFC layout algorithm step 3 to a separate function
2021-10-13 21:49:28 +02:00
{
auto& child_box = flex_item.box;
LibWeb: Tidy up and add spec comments to FFC layout algorithm step 3
2021-10-13 23:26:31 +02:00
flex_item.flex_base_size = [&] {
LibWeb: Support flex item cross sizing based on intrinsic aspect ratio This patch implements case B from the "determine the flex base size and hypothetical main size of each item" from the flexbox algorithm. https://drafts.csswg.org/css-flexbox-1/#algo-main-item
2022-07-07 12:39:24 +02:00
auto used_flex_basis = used_flex_basis_for_item(flex_item);
LibWeb: Tidy up and add spec comments to FFC layout algorithm step 3
2021-10-13 23:26:31 +02:00
// A. If the item has a definite used flex basis, that’s the flex base size.
if (used_flex_basis.is_definite()) {
LibWeb: Treat "flex-basis: 0px" like any other definite basis value
2022-07-10 23:49:02 +02:00
return get_pixel_size(m_state, child_box, used_flex_basis.length_percentage.value());
LibWeb: Move FFC layout algorithm step 3 to a separate function
2021-10-13 21:49:28 +02:00
}
LibWeb: Tidy up and add spec comments to FFC layout algorithm step 3
2021-10-13 23:26:31 +02:00
// B. If the flex item has ...
// - an intrinsic aspect ratio,
// - a used flex basis of content, and
// - a definite cross size,
LibWeb: Use Box::has_intrinsic_aspect_ratio() check in FFC step 3 Now that we can ask any Box about its intrinsic aspect ratio, let's fix a FIXME in FlexFormattingContext.
2021-10-14 19:42:09 +02:00
if (flex_item.box.has_intrinsic_aspect_ratio()
LibWeb: Tidy up and add spec comments to FFC layout algorithm step 3
2021-10-13 23:26:31 +02:00
&& used_flex_basis.type == CSS::FlexBasis::Content
LibWeb: Support flex item cross sizing based on intrinsic aspect ratio This patch implements case B from the "determine the flex base size and hypothetical main size of each item" from the flexbox algorithm. https://drafts.csswg.org/css-flexbox-1/#algo-main-item
2022-07-07 12:39:24 +02:00
&& has_definite_cross_size(flex_item.box)) {
LibWeb: Tidy up and add spec comments to FFC layout algorithm step 3
2021-10-13 23:26:31 +02:00
// flex_base_size is calculated from definite cross size and intrinsic aspect ratio
LibWeb: Support flex item cross sizing based on intrinsic aspect ratio This patch implements case B from the "determine the flex base size and hypothetical main size of each item" from the flexbox algorithm. https://drafts.csswg.org/css-flexbox-1/#algo-main-item
2022-07-07 12:39:24 +02:00
return resolved_definite_cross_size(flex_item.box) * flex_item.box.intrinsic_aspect_ratio().value();
LibWeb: Tidy up and add spec comments to FFC layout algorithm step 3
2021-10-13 23:26:31 +02:00
}
// 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.
LibWeb: Implement step 9.2.3 of the flexbox layout algorithm When sizing the flex container under a min-content or a max-content constraint, flex items with a used flex basis of "content" should be sized under the same constraint.
2022-07-11 17:47:23 +02:00
auto flex_container_main_size_constraint = is_row_layout() ? m_flex_container_state.width_constraint : m_flex_container_state.height_constraint;
if (used_flex_basis.type == CSS::FlexBasis::Content && flex_container_main_size_constraint != SizeConstraint::None) {
if (flex_container_main_size_constraint == SizeConstraint::MinContent)
return calculate_min_content_main_size(flex_item);
return calculate_max_content_main_size(flex_item);
LibWeb: Tidy up and add spec comments to FFC layout algorithm step 3
2021-10-13 23:26:31 +02:00
}
// 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 (used_flex_basis.type == CSS::FlexBasis::Content
// 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.
// FIXME: This is probably too naive.
// FIXME: Care about FlexBasis::Auto
if (has_definite_main_size(child_box))
return specified_main_size_of_child_box(child_box);
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
LibWeb: Cache flex item main sizes to avoid relayout during same cycle This makes twitter.com actually load & render (although not very well.)
2022-07-06 00:21:37 +02:00
// NOTE: To avoid repeated layout work, we keep a cache of flex item main sizes on the
// root FormattingState object. It's available through a full layout cycle.
// FIXME: Make sure this cache isn't overly permissive..
auto& size_cache = m_state.m_root.flex_item_size_cache;
auto it = size_cache.find(&flex_item.box);
if (it != size_cache.end())
return it->value;
auto main_size = calculate_indefinite_main_size(flex_item);
size_cache.set(&flex_item.box, main_size);
return main_size;
LibWeb: Tidy up and add spec comments to FFC layout algorithm step 3
2021-10-13 23:26:31 +02:00
}();
// 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).
LibWeb: Implement (some of) "automatic minimum size" for flex items
2022-06-21 21:06:19 +02:00
auto clamp_min = has_main_min_size(child_box) ? specified_main_min_size(child_box) : automatic_minimum_size(flex_item);
LibWeb: Tidy up and add spec comments to FFC layout algorithm step 3
2021-10-13 23:26:31 +02:00
auto clamp_max = has_main_max_size(child_box) ? specified_main_max_size(child_box) : NumericLimits<float>::max();
LibWeb: Follow relaxed CSS clamping rules in flexbox layout AFAICT, css-values-4 tells us that clamping numbers to a range where min>max is okay. That means we can't use AK::clamp() since it will VERIFY that max>=min. This patch adds a css_clamp() helper (locally in FFC for now). This fixes an issue where a bunch of sites were crashing due to the VERIFY in AK::clamp().
2022-04-09 14:47:41 +02:00
flex_item.hypothetical_main_size = css_clamp(flex_item.flex_base_size, clamp_min, clamp_max);
LibWeb: Move FFC layout algorithm step 3 to a separate function
2021-10-13 21:49:28 +02:00
}
LibWeb: Implement (some of) "automatic minimum size" for flex items
2022-06-21 21:06:19 +02:00
// https://drafts.csswg.org/css-flexbox-1/#min-size-auto
float FlexFormattingContext::automatic_minimum_size(FlexItem const& item) const
LibWeb: Fix sizing of flex child that has flex-basis 0 Before if an element didn't have a main min size we would clamp it to a literal zero. If that element also had a flex-basis 0 it's width would end up being 0. This patch adds a determine_min_main_size_of_child function that will calculate the minimum main size for the box based on the content of the box. We use the result of that function now instead of clamping the element main min size to 0. This also adds one more box to the flex.html test page, which is the same flex: 0 0 0 box but with flex-direction: column.
2022-03-30 19:50:57 +02:00
{
LibWeb: Implement (some of) "automatic minimum size" for flex items
2022-06-21 21:06:19 +02:00
// FIXME: Deal with scroll containers.
return content_based_minimum_size(item);
}
// https://drafts.csswg.org/css-flexbox-1/#specified-size-suggestion
Optional<float> 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.box))
return specified_main_size(item.box);
return {};
}
// https://drafts.csswg.org/css-flexbox-1/#content-size-suggestion
float FlexFormattingContext::content_size_suggestion(FlexItem const& item) const
{
// FIXME: Apply clamps
LibWeb: Add FFC helpers for getting intrinsic size of flex items
2022-07-08 12:50:04 +02:00
return calculate_min_content_main_size(item);
LibWeb: Implement (some of) "automatic minimum size" for flex items
2022-06-21 21:06:19 +02:00
}
LibWeb: Implement "transferred size suggestion" for flex items
2022-06-22 18:05:28 +02:00
// https://drafts.csswg.org/css-flexbox-1/#transferred-size-suggestion
Optional<float> 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_intrinsic_aspect_ratio() && has_definite_cross_size(item.box)) {
auto aspect_ratio = item.box.intrinsic_aspect_ratio().value();
// FIXME: Clamp cross size to min/max cross size before this conversion.
return resolved_definite_cross_size(item.box) * aspect_ratio;
}
// It is otherwise undefined.
return {};
}
LibWeb: Implement (some of) "automatic minimum size" for flex items
2022-06-21 21:06:19 +02:00
// https://drafts.csswg.org/css-flexbox-1/#content-based-minimum-size
float 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));
}
LibWeb: Implement "transferred size suggestion" for flex items
2022-06-22 18:05:28 +02:00
// 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));
}
}
LibWeb: Implement (some of) "automatic minimum size" for flex items
2022-06-21 21:06:19 +02:00
// 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;
LibWeb: Fix sizing of flex child that has flex-basis 0 Before if an element didn't have a main min size we would clamp it to a literal zero. If that element also had a flex-basis 0 it's width would end up being 0. This patch adds a determine_min_main_size_of_child function that will calculate the minimum main size for the box based on the content of the box. We use the result of that function now instead of clamping the element main min size to 0. This also adds one more box to the flex.html test page, which is the same flex: 0 0 0 box but with flex-direction: column.
2022-03-30 19:50:57 +02:00
}
LibWeb: Move FFC layout algorithm step 4 to a separate function
2021-10-13 22:03:39 +02:00
// https://www.w3.org/TR/css-flexbox-1/#algo-main-container
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
void FlexFormattingContext::determine_main_size_of_flex_container(bool const main_is_constrained, float const main_min_size, float const main_max_size)
LibWeb: Move FFC layout algorithm step 4 to a separate function
2021-10-13 22:03:39 +02:00
{
LibWeb: Implement basic intrinsic sizing algorithms for flex containers This patch adds support for MinContent and MaxContent layout to FFC. This means that an FFC can now calculate intrinsic sizes for the flex container, to be used by the parent formatting context. There are some FIXME's as usual, but this already works on basic things.
2022-04-06 01:20:20 +02:00
// FIXME: This function should make use of our ability to calculate the flex container's
LibWeb: Express intrinsic size layout via size constraints Previously, we had three layout modes: - Normal: - Everything uses the computed values from CSS. - MinContent: - Containing blocks act as if they have 0 width. - All line breaking opportunities are taken. - MaxContent: - Containing blocks act as if they have infinite width. - Only forced line breaks are accepted. The above was based on a set of misunderstandings of CSS sizing. A major problem with the above was that *all* containing blocks behaved differently during intrinsic size layout, not just the relevant one. With this patch there are only two layout modes: - Normal: - Everything uses the computed values from CSS. - IntrinsicSizeDetermination: - One or more boxes have size constraints applied. There are two size constraints per layout box, set here: - FormattingState::NodeState::width_constraint - FormattingState::NodeState::height_constraint They are of type SizeConstraint and can be one of None, MinContent, or MaxContent. The default is None. When performing an IntrinsicSizeDetermination layout, we now assign a size constraint to the box we're trying to determine the intrinsic size of, which is then honored by using two new helpers to query the dimensions of containing blocks: - FormattingContext::containing_block_width_for(Box) - FormattingContext::containing_block_height_for(Box) If there's a relevant constraint in effect on the Box, the size of its containing block is adjusted accordingly. This is essentially an implementation of the "available space" constraints from CSS-SIZING-3. I'm sure some things will break from this, and we'll have to deal with that separately. Spec: https://drafts.csswg.org/css-sizing-3/#available
2022-07-09 15:17:47 +02:00
// intrinsic max-content sizes.
LibWeb: Implement basic intrinsic sizing algorithms for flex containers This patch adds support for MinContent and MaxContent layout to FFC. This means that an FFC can now calculate intrinsic sizes for the flex container, to be used by the parent formatting context. There are some FIXME's as usual, but this already works on basic things.
2022-04-06 01:20:20 +02:00
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
if (!main_is_constrained || !m_available_space->main.has_value()) {
LibWeb: Move FFC layout algorithm step 4 to a separate function
2021-10-13 22:03:39 +02:00
// Uses https://www.w3.org/TR/css-flexbox-1/#intrinsic-main-sizes
// 9.9.1
// 1.
float largest_max_content_flex_fraction = 0;
LibWeb: Make FFC line and item vectors members instead of locals This gives all member functions access to these vectors without having to pass them as arguments.
2021-10-13 22:44:54 +02:00
for (auto& flex_item : m_flex_items) {
LibWeb: Move FFC layout algorithm step 4 to a separate function
2021-10-13 22:03:39 +02:00
// FIXME: This needs some serious work.
float max_content_contribution = calculated_main_size(flex_item.box);
LibWeb: Take borders and padding into account when doing Flex layout Before this the flex layout didn't take into account the applied borders or padding while laying out the items. The child's top and left borders would get painted over the parent's borders, also due to it not taking borders into account, children with borders would overlap each other. Due to it not taking padding into account, the children would get drawn outside the parent element.
2022-03-27 16:14:18 +02:00
float max_content_flex_fraction = max_content_contribution - (flex_item.flex_base_size + flex_item.margins.main_before + flex_item.margins.main_after + flex_item.borders.main_before + flex_item.borders.main_after + flex_item.padding.main_before + flex_item.padding.main_after);
LibWeb: Move FFC layout algorithm step 4 to a separate function
2021-10-13 22:03:39 +02:00
if (max_content_flex_fraction > 0) {
LibWeb: Make computed flex-grow and flex-shrink always available These values are not allowed to be absent (auto/none/etc) so we don't need to use Optional<float> for them. This simplifies some things.
2021-10-19 15:22:08 +02:00
max_content_flex_fraction /= max(flex_item.box.computed_values().flex_grow(), 1.0f);
LibWeb: Move FFC layout algorithm step 4 to a separate function
2021-10-13 22:03:39 +02:00
} else {
LibWeb: Use the "scaled flex shrink factor" where noted by the spec
2022-07-10 23:53:40 +02:00
max_content_flex_fraction /= flex_item.scaled_flex_shrink_factor;
LibWeb: Move FFC layout algorithm step 4 to a separate function
2021-10-13 22:03:39 +02:00
}
flex_item.max_content_flex_fraction = max_content_flex_fraction;
if (max_content_flex_fraction > largest_max_content_flex_fraction)
largest_max_content_flex_fraction = max_content_flex_fraction;
}
// 2. Omitted
// 3.
float result = 0;
LibWeb: Make FFC line and item vectors members instead of locals This gives all member functions access to these vectors without having to pass them as arguments.
2021-10-13 22:44:54 +02:00
for (auto& flex_item : m_flex_items) {
LibWeb: Move FFC layout algorithm step 4 to a separate function
2021-10-13 22:03:39 +02:00
auto product = 0;
if (flex_item.max_content_flex_fraction > 0) {
LibWeb: Make computed flex-grow and flex-shrink always available These values are not allowed to be absent (auto/none/etc) so we don't need to use Optional<float> for them. This simplifies some things.
2021-10-19 15:22:08 +02:00
product = largest_max_content_flex_fraction * flex_item.box.computed_values().flex_grow();
LibWeb: Move FFC layout algorithm step 4 to a separate function
2021-10-13 22:03:39 +02:00
} else {
LibWeb: Use the "scaled flex shrink factor" where noted by the spec
2022-07-10 23:53:40 +02:00
product = largest_max_content_flex_fraction * flex_item.scaled_flex_shrink_factor;
LibWeb: Move FFC layout algorithm step 4 to a separate function
2021-10-13 22:03:39 +02:00
}
LibWeb: Take borders and padding into account when doing Flex layout Before this the flex layout didn't take into account the applied borders or padding while laying out the items. The child's top and left borders would get painted over the parent's borders, also due to it not taking borders into account, children with borders would overlap each other. Due to it not taking padding into account, the children would get drawn outside the parent element.
2022-03-27 16:14:18 +02:00
result += flex_item.flex_base_size + flex_item.margins.main_before + flex_item.margins.main_after + flex_item.borders.main_before + flex_item.borders.main_after + flex_item.padding.main_before + flex_item.padding.main_after + product;
LibWeb: Move FFC layout algorithm step 4 to a separate function
2021-10-13 22:03:39 +02:00
}
LibWeb: Follow relaxed CSS clamping rules in flexbox layout AFAICT, css-values-4 tells us that clamping numbers to a range where min>max is okay. That means we can't use AK::clamp() since it will VERIFY that max>=min. This patch adds a css_clamp() helper (locally in FFC for now). This fixes an issue where a bunch of sites were crashing due to the VERIFY in AK::clamp().
2022-04-09 14:47:41 +02:00
m_available_space->main = css_clamp(result, main_min_size, main_max_size);
LibWeb: Move FFC layout algorithm step 4 to a separate function
2021-10-13 22:03:39 +02:00
}
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
set_main_size(flex_container(), m_available_space->main.value_or(NumericLimits<float>::max()));
LibWeb: Move FFC layout algorithm step 4 to a separate function
2021-10-13 22:03:39 +02:00
}
LibWeb: Move FFC layout algorithm step 5 to a separate function
2021-10-13 22:07:55 +02:00
// https://www.w3.org/TR/css-flexbox-1/#algo-line-break
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
void FlexFormattingContext::collect_flex_items_into_flex_lines()
LibWeb: Move FFC layout algorithm step 5 to a separate function
2021-10-13 22:07:55 +02:00
{
// FIXME: Also support wrap-reverse
LibWeb: Add spec comments to FFC layout algorithm step 5
2021-10-13 23:38:04 +02:00
// If the flex container is single-line, collect all the flex items into a single flex line.
if (is_single_line()) {
LibWeb: Move FFC layout algorithm step 5 to a separate function
2021-10-13 22:07:55 +02:00
FlexLine line;
LibWeb: Make FFC line and item vectors members instead of locals This gives all member functions access to these vectors without having to pass them as arguments.
2021-10-13 22:44:54 +02:00
for (auto& flex_item : m_flex_items) {
LibWeb: Move FFC layout algorithm step 5 to a separate function
2021-10-13 22:07:55 +02:00
line.items.append(&flex_item);
}
LibWeb: Add spec comments to FFC layout algorithm step 5
2021-10-13 23:38:04 +02:00
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;
float line_main_size = 0;
for (auto& flex_item : m_flex_items) {
LibWeb: Take borders and padding into account when doing Flex layout Before this the flex layout didn't take into account the applied borders or padding while laying out the items. The child's top and left borders would get painted over the parent's borders, also due to it not taking borders into account, children with borders would overlap each other. Due to it not taking padding into account, the children would get drawn outside the parent element.
2022-03-27 16:14:18 +02:00
auto outer_hypothetical_main_size = flex_item.hypothetical_main_size + flex_item.margins.main_before + flex_item.margins.main_after + flex_item.borders.main_before + flex_item.borders.main_after + flex_item.padding.main_before + flex_item.padding.main_after;
LibWeb: Make margins in the main dimension work for flex items The spec at https://www.w3.org/TR/css-flexbox-1/ states that when calculating specific spaces and sizes inside a flex container, the outer size of a flex item needs to be taken into account. This patch adds the margins in the main dimension of a flex item to these calculations such that their margins are actually painted in a lot of common cases. It makes our Github page look marginally better.
2022-03-23 11:40:42 +01:00
if ((line_main_size + outer_hypothetical_main_size) > m_available_space->main.value_or(NumericLimits<float>::max())) {
LibWeb: Add spec comments to FFC layout algorithm step 5
2021-10-13 23:38:04 +02:00
m_flex_lines.append(move(line));
line = {};
line_main_size = 0;
LibWeb: Move FFC layout algorithm step 5 to a separate function
2021-10-13 22:07:55 +02:00
}
LibWeb: Add spec comments to FFC layout algorithm step 5
2021-10-13 23:38:04 +02:00
line.items.append(&flex_item);
LibWeb: Make margins in the main dimension work for flex items The spec at https://www.w3.org/TR/css-flexbox-1/ states that when calculating specific spaces and sizes inside a flex container, the outer size of a flex item needs to be taken into account. This patch adds the margins in the main dimension of a flex item to these calculations such that their margins are actually painted in a lot of common cases. It makes our Github page look marginally better.
2022-03-23 11:40:42 +01:00
line_main_size += outer_hypothetical_main_size;
LibWeb: Move FFC layout algorithm step 5 to a separate function
2021-10-13 22:07:55 +02:00
}
LibWeb: Add spec comments to FFC layout algorithm step 5
2021-10-13 23:38:04 +02:00
m_flex_lines.append(move(line));
LibWeb: Move FFC layout algorithm step 5 to a separate function
2021-10-13 22:07:55 +02:00
}
LibWeb: Move FFC layout algorithm step 6 to a separate function
2021-10-13 22:11:50 +02:00
// https://www.w3.org/TR/css-flexbox-1/#resolve-flexible-lengths
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
void FlexFormattingContext::resolve_flexible_lengths()
LibWeb: Move FFC layout algorithm step 6 to a separate function
2021-10-13 22:11:50 +02:00
{
enum FlexFactor {
FlexGrowFactor,
FlexShrinkFactor
};
FlexFactor used_flex_factor;
// 6.1. Determine used flex factor
LibWeb: Make FFC line and item vectors members instead of locals This gives all member functions access to these vectors without having to pass them as arguments.
2021-10-13 22:44:54 +02:00
for (auto& flex_line : m_flex_lines) {
LibWeb: Move FFC layout algorithm step 6 to a separate function
2021-10-13 22:11:50 +02:00
size_t number_of_unfrozen_items_on_line = flex_line.items.size();
float sum_of_hypothetical_main_sizes = 0;
for (auto& flex_item : flex_line.items) {
LibWeb: Take borders and padding into account when doing Flex layout Before this the flex layout didn't take into account the applied borders or padding while laying out the items. The child's top and left borders would get painted over the parent's borders, also due to it not taking borders into account, children with borders would overlap each other. Due to it not taking padding into account, the children would get drawn outside the parent element.
2022-03-27 16:14:18 +02:00
sum_of_hypothetical_main_sizes += (flex_item->hypothetical_main_size + flex_item->margins.main_before + flex_item->margins.main_after + flex_item->borders.main_before + flex_item->borders.main_after + flex_item->padding.main_before + flex_item->padding.main_after);
LibWeb: Move FFC layout algorithm step 6 to a separate function
2021-10-13 22:11:50 +02:00
}
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
if (sum_of_hypothetical_main_sizes < m_available_space->main.value_or(NumericLimits<float>::max()))
LibWeb: Move FFC layout algorithm step 6 to a separate function
2021-10-13 22:11:50 +02:00
used_flex_factor = FlexFactor::FlexGrowFactor;
else
used_flex_factor = FlexFactor::FlexShrinkFactor;
for (auto& flex_item : flex_line.items) {
if (used_flex_factor == FlexFactor::FlexGrowFactor)
LibWeb: Make computed flex-grow and flex-shrink always available These values are not allowed to be absent (auto/none/etc) so we don't need to use Optional<float> for them. This simplifies some things.
2021-10-19 15:22:08 +02:00
flex_item->flex_factor = flex_item->box.computed_values().flex_grow();
LibWeb: Move FFC layout algorithm step 6 to a separate function
2021-10-13 22:11:50 +02:00
else if (used_flex_factor == FlexFactor::FlexShrinkFactor)
LibWeb: Make computed flex-grow and flex-shrink always available These values are not allowed to be absent (auto/none/etc) so we don't need to use Optional<float> for them. This simplifies some things.
2021-10-19 15:22:08 +02:00
flex_item->flex_factor = flex_item->box.computed_values().flex_shrink();
LibWeb: Move FFC layout algorithm step 6 to a separate function
2021-10-13 22:11:50 +02:00
}
// 6.2. Size inflexible items
auto freeze_item_setting_target_main_size_to_hypothetical_main_size = [&number_of_unfrozen_items_on_line](FlexItem& item) {
item.target_main_size = item.hypothetical_main_size;
number_of_unfrozen_items_on_line--;
item.frozen = true;
};
for (auto& flex_item : flex_line.items) {
if (flex_item->flex_factor.has_value() && flex_item->flex_factor.value() == 0) {
freeze_item_setting_target_main_size_to_hypothetical_main_size(*flex_item);
} else if (used_flex_factor == FlexFactor::FlexGrowFactor) {
// FIXME: Spec doesn't include the == case, but we take a too basic approach to calculating the values used so this is appropriate
if (flex_item->flex_base_size > flex_item->hypothetical_main_size) {
freeze_item_setting_target_main_size_to_hypothetical_main_size(*flex_item);
}
} else if (used_flex_factor == FlexFactor::FlexShrinkFactor) {
if (flex_item->flex_base_size < flex_item->hypothetical_main_size) {
freeze_item_setting_target_main_size_to_hypothetical_main_size(*flex_item);
}
}
}
// 6.3. Calculate initial free space
auto calculate_free_space = [&]() {
float sum_of_items_on_line = 0;
for (auto& flex_item : flex_line.items) {
if (flex_item->frozen)
LibWeb: Take borders and padding into account when doing Flex layout Before this the flex layout didn't take into account the applied borders or padding while laying out the items. The child's top and left borders would get painted over the parent's borders, also due to it not taking borders into account, children with borders would overlap each other. Due to it not taking padding into account, the children would get drawn outside the parent element.
2022-03-27 16:14:18 +02:00
sum_of_items_on_line += flex_item->target_main_size + flex_item->margins.main_before + flex_item->margins.main_after + flex_item->borders.main_before + flex_item->borders.main_after + flex_item->padding.main_before + flex_item->padding.main_after;
LibWeb: Move FFC layout algorithm step 6 to a separate function
2021-10-13 22:11:50 +02:00
else
LibWeb: Take borders and padding into account when doing Flex layout Before this the flex layout didn't take into account the applied borders or padding while laying out the items. The child's top and left borders would get painted over the parent's borders, also due to it not taking borders into account, children with borders would overlap each other. Due to it not taking padding into account, the children would get drawn outside the parent element.
2022-03-27 16:14:18 +02:00
sum_of_items_on_line += flex_item->flex_base_size + flex_item->margins.main_before + flex_item->margins.main_after + flex_item->borders.main_before + flex_item->borders.main_after + flex_item->padding.main_before + flex_item->padding.main_after;
LibWeb: Move FFC layout algorithm step 6 to a separate function
2021-10-13 22:11:50 +02:00
}
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
return specified_main_size(flex_container()) - sum_of_items_on_line;
LibWeb: Move FFC layout algorithm step 6 to a separate function
2021-10-13 22:11:50 +02:00
};
float initial_free_space = calculate_free_space();
LibWeb: Keep the "remaining free space" across flexbox algo steps Instead of recomputing the "remaining free space" per flex line, remember it after calculating it during the "resolve flexible lengths" step so we can reuse it later.
2022-07-06 19:15:31 +02:00
flex_line.remaining_free_space = initial_free_space;
LibWeb: Move FFC layout algorithm step 6 to a separate function
2021-10-13 22:11:50 +02:00
// 6.4 Loop
auto for_each_unfrozen_item = [&flex_line](auto callback) {
for (auto& flex_item : flex_line.items) {
if (!flex_item->frozen)
callback(flex_item);
}
};
while (number_of_unfrozen_items_on_line > 0) {
// b Calculate the remaining free space
LibWeb: Keep the "remaining free space" across flexbox algo steps Instead of recomputing the "remaining free space" per flex line, remember it after calculating it during the "resolve flexible lengths" step so we can reuse it later.
2022-07-06 19:15:31 +02:00
flex_line.remaining_free_space = calculate_free_space();
LibWeb: Move FFC layout algorithm step 6 to a separate function
2021-10-13 22:11:50 +02:00
float sum_of_unfrozen_flex_items_flex_factors = 0;
for_each_unfrozen_item([&](FlexItem* item) {
sum_of_unfrozen_flex_items_flex_factors += item->flex_factor.value_or(1);
});
if (sum_of_unfrozen_flex_items_flex_factors < 1) {
auto intermediate_free_space = initial_free_space * sum_of_unfrozen_flex_items_flex_factors;
LibWeb: Keep the "remaining free space" across flexbox algo steps Instead of recomputing the "remaining free space" per flex line, remember it after calculating it during the "resolve flexible lengths" step so we can reuse it later.
2022-07-06 19:15:31 +02:00
if (AK::abs(intermediate_free_space) < AK::abs(flex_line.remaining_free_space))
flex_line.remaining_free_space = intermediate_free_space;
LibWeb: Move FFC layout algorithm step 6 to a separate function
2021-10-13 22:11:50 +02:00
}
// c Distribute free space proportional to the flex factors
LibWeb: Keep the "remaining free space" across flexbox algo steps Instead of recomputing the "remaining free space" per flex line, remember it after calculating it during the "resolve flexible lengths" step so we can reuse it later.
2022-07-06 19:15:31 +02:00
if (flex_line.remaining_free_space != 0) {
LibWeb: Move FFC layout algorithm step 6 to a separate function
2021-10-13 22:11:50 +02:00
if (used_flex_factor == FlexFactor::FlexGrowFactor) {
float sum_of_flex_grow_factor_of_unfrozen_items = sum_of_unfrozen_flex_items_flex_factors;
for_each_unfrozen_item([&](FlexItem* flex_item) {
float ratio = flex_item->flex_factor.value_or(1) / sum_of_flex_grow_factor_of_unfrozen_items;
LibWeb: Keep the "remaining free space" across flexbox algo steps Instead of recomputing the "remaining free space" per flex line, remember it after calculating it during the "resolve flexible lengths" step so we can reuse it later.
2022-07-06 19:15:31 +02:00
flex_item->target_main_size = flex_item->flex_base_size + (flex_line.remaining_free_space * ratio);
LibWeb: Move FFC layout algorithm step 6 to a separate function
2021-10-13 22:11:50 +02:00
});
} else if (used_flex_factor == FlexFactor::FlexShrinkFactor) {
float sum_of_scaled_flex_shrink_factor_of_unfrozen_items = 0;
for_each_unfrozen_item([&](FlexItem* flex_item) {
flex_item->scaled_flex_shrink_factor = flex_item->flex_factor.value_or(1) * flex_item->flex_base_size;
sum_of_scaled_flex_shrink_factor_of_unfrozen_items += flex_item->scaled_flex_shrink_factor;
});
for_each_unfrozen_item([&](FlexItem* flex_item) {
float ratio = 1.0f;
if (sum_of_scaled_flex_shrink_factor_of_unfrozen_items != 0.0f)
ratio = flex_item->scaled_flex_shrink_factor / sum_of_scaled_flex_shrink_factor_of_unfrozen_items;
LibWeb: Keep the "remaining free space" across flexbox algo steps Instead of recomputing the "remaining free space" per flex line, remember it after calculating it during the "resolve flexible lengths" step so we can reuse it later.
2022-07-06 19:15:31 +02:00
flex_item->target_main_size = flex_item->flex_base_size - (AK::abs(flex_line.remaining_free_space) * ratio);
LibWeb: Move FFC layout algorithm step 6 to a separate function
2021-10-13 22:11:50 +02:00
});
}
} else {
// This isn't spec but makes sense.
for_each_unfrozen_item([&](FlexItem* flex_item) {
flex_item->target_main_size = flex_item->flex_base_size;
});
}
// d Fix min/max violations.
float adjustments = 0.0f;
for_each_unfrozen_item([&](FlexItem* item) {
auto min_main = has_main_min_size(item->box)
? specified_main_min_size(item->box)
LibWeb: Implement (some of) "automatic minimum size" for flex items
2022-06-21 21:06:19 +02:00
: automatic_minimum_size(*item);
LibWeb: Move FFC layout algorithm step 6 to a separate function
2021-10-13 22:11:50 +02:00
auto max_main = has_main_max_size(item->box)
? specified_main_max_size(item->box)
: NumericLimits<float>::max();
float original_target_size = item->target_main_size;
if (item->target_main_size < min_main) {
item->target_main_size = min_main;
item->is_min_violation = true;
}
if (item->target_main_size > max_main) {
item->target_main_size = max_main;
item->is_max_violation = true;
}
float delta = item->target_main_size - original_target_size;
adjustments += delta;
});
// e Freeze over-flexed items
float total_violation = adjustments;
if (total_violation == 0) {
for_each_unfrozen_item([&](FlexItem* item) {
--number_of_unfrozen_items_on_line;
item->frozen = true;
});
} else if (total_violation > 0) {
for_each_unfrozen_item([&](FlexItem* item) {
if (item->is_min_violation) {
--number_of_unfrozen_items_on_line;
item->frozen = true;
}
});
} else if (total_violation < 0) {
for_each_unfrozen_item([&](FlexItem* item) {
if (item->is_max_violation) {
--number_of_unfrozen_items_on_line;
item->frozen = true;
}
});
}
}
// 6.5.
for (auto& flex_item : flex_line.items) {
flex_item->main_size = flex_item->target_main_size;
}
}
}
LibWeb: Improve FFC step 7 (hypothetical cross size) - Avoid performing inside layout on definite-size flex items (since their computed size can be used as-is.) - Use FormattingState::clone() to generate a throwaway layout instead of mutating the tree in-place. - Update spec link & comments based on current CSSWG draft. The latest version is quite a bit clearer on how this should work.
2022-02-27 13:39:38 +01:00
// https://drafts.csswg.org/css-flexbox-1/#algo-cross-item
void FlexFormattingContext::determine_hypothetical_cross_size_of_item(FlexItem& item)
LibWeb: Move FFC layout algorithm step 7 to a separate function
2021-10-13 22:15:16 +02:00
{
LibWeb: Improve FFC step 7 (hypothetical cross size) - Avoid performing inside layout on definite-size flex items (since their computed size can be used as-is.) - Use FormattingState::clone() to generate a throwaway layout instead of mutating the tree in-place. - Update spec link & comments based on current CSSWG draft. The latest version is quite a bit clearer on how this should work.
2022-02-27 13:39:38 +01:00
// 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.
// 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.box)) {
LibWeb: Always apply min/max cross size constraints to flex items We were neglecting to apply min-size and max-size constraints in the fast path for flex items with a definite cross size.
2022-07-04 22:20:09 +02:00
auto clamp_min = has_cross_min_size(item.box) ? specified_cross_min_size(item.box) : 0;
auto clamp_max = has_cross_max_size(item.box) ? specified_cross_max_size(item.box) : NumericLimits<float>::max();
item.hypothetical_cross_size = css_clamp(resolved_definite_cross_size(item.box), clamp_min, clamp_max);
LibWeb: Improve FFC step 7 (hypothetical cross size) - Avoid performing inside layout on definite-size flex items (since their computed size can be used as-is.) - Use FormattingState::clone() to generate a throwaway layout instead of mutating the tree in-place. - Update spec link & comments based on current CSSWG draft. The latest version is quite a bit clearer on how this should work.
2022-02-27 13:39:38 +01:00
return;
LibWeb: Move FFC layout algorithm step 7 to a separate function
2021-10-13 22:15:16 +02:00
}
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
if (has_definite_main_size(item.box)) {
// For indefinite cross sizes, we perform a throwaway layout and then measure it.
LibWeb: Make Layout::FormattingState copies shallow Previously, each NodeState in a FormattingState was shared with the parent FormattingState, but the HashMap of NodeState had to be copied when making FormattingState copies. This patch makes copying instant by keeping a pointer to the parent FormattingState instead. When fetching immutable state via get(), we may now return a reference to a NodeState owned by a parent FormattingState. get_mutable() will copy any NodeState found in the ancestor chain before making a brand new one.
2022-03-12 16:33:11 +01:00
FormattingState throwaway_state(&m_state);
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
auto& box_state = throwaway_state.get_mutable(item.box);
// 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);
LibWeb: Move FFC layout algorithm step 7 to a separate function
2021-10-13 22:15:16 +02:00
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
if (is_row_layout()) {
box_state.content_width = resolved_definite_main_size(item.box);
} else {
box_state.content_height = resolved_definite_main_size(item.box);
}
LibWeb: Rename the LayoutMode enum values and explain them The old mode names, while mechanically accurate, didn't really reflect their relationship to the CSS specifications. This patch renames them as follows: Default => Normal AllPossibleLineBreaks => MinContent OnlyRequiredLineBreaks => MaxContent There's also now an explainer comment with the LayoutMode enum about the specific implications of layout in each mode.
2022-03-19 15:44:02 +01:00
independent_formatting_context->run(item.box, LayoutMode::Normal);
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
if (is_row_layout())
item.hypothetical_cross_size = BlockFormattingContext::compute_theoretical_height(throwaway_state, item.box);
else
item.hypothetical_cross_size = box_state.content_width;
LibWeb: Improve FFC step 7 (hypothetical cross size) - Avoid performing inside layout on definite-size flex items (since their computed size can be used as-is.) - Use FormattingState::clone() to generate a throwaway layout instead of mutating the tree in-place. - Update spec link & comments based on current CSSWG draft. The latest version is quite a bit clearer on how this should work.
2022-02-27 13:39:38 +01:00
} else {
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
// Item has indefinite main size, layout with "fit-content"
LibWeb: Fix calculation of hypothetical cross size in column flex layout Simplify automatic cross sizing of items in flex-direction:column by using the fit-content width directly. There's obviously a lot more nuance to this, but for now this makes flex items with both width:auto and height:auto actually get some height in column flex layouts.
2022-03-12 19:36:04 +01:00
// If we're in a column layout and looking for the width, just use the fit-content width.
if (!is_row_layout()) {
item.hypothetical_cross_size = calculate_fit_content_width(item.box, m_available_space->cross);
return;
}
// We're in a row layout, looking for the height. Figure out the fit-content width,
// then layout with that and see what height comes out of it.
float fit_content_main_size = calculate_fit_content_width(item.box, m_available_space->main);
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
LibWeb: Make Layout::FormattingState copies shallow Previously, each NodeState in a FormattingState was shared with the parent FormattingState, but the HashMap of NodeState had to be copied when making FormattingState copies. This patch makes copying instant by keeping a pointer to the parent FormattingState instead. When fetching immutable state via get(), we may now return a reference to a NodeState owned by a parent FormattingState. get_mutable() will copy any NodeState found in the ancestor chain before making a brand new one.
2022-03-12 16:33:11 +01:00
FormattingState throwaway_state(&m_state);
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
auto& box_state = throwaway_state.get_mutable(item.box);
auto independent_formatting_context = create_independent_formatting_context_if_needed(throwaway_state, item.box);
LibWeb: Improve FFC step 7 (hypothetical cross size) - Avoid performing inside layout on definite-size flex items (since their computed size can be used as-is.) - Use FormattingState::clone() to generate a throwaway layout instead of mutating the tree in-place. - Update spec link & comments based on current CSSWG draft. The latest version is quite a bit clearer on how this should work.
2022-02-27 13:39:38 +01:00
// NOTE: Flex items should always create an independent formatting context!
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
VERIFY(independent_formatting_context);
LibWeb: Move FFC layout algorithm step 7 to a separate function
2021-10-13 22:15:16 +02:00
LibWeb: Fix calculation of hypothetical cross size in column flex layout Simplify automatic cross sizing of items in flex-direction:column by using the fit-content width directly. There's obviously a lot more nuance to this, but for now this makes flex items with both width:auto and height:auto actually get some height in column flex layouts.
2022-03-12 19:36:04 +01:00
box_state.content_width = fit_content_main_size;
LibWeb: Rename the LayoutMode enum values and explain them The old mode names, while mechanically accurate, didn't really reflect their relationship to the CSS specifications. This patch renames them as follows: Default => Normal AllPossibleLineBreaks => MinContent OnlyRequiredLineBreaks => MaxContent There's also now an explainer comment with the LayoutMode enum about the specific implications of layout in each mode.
2022-03-19 15:44:02 +01:00
independent_formatting_context->run(item.box, LayoutMode::Normal);
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
LibWeb: Fix calculation of hypothetical cross size in column flex layout Simplify automatic cross sizing of items in flex-direction:column by using the fit-content width directly. There's obviously a lot more nuance to this, but for now this makes flex items with both width:auto and height:auto actually get some height in column flex layouts.
2022-03-12 19:36:04 +01:00
item.hypothetical_cross_size = BlockFormattingContext::compute_theoretical_height(throwaway_state, item.box);
LibWeb: Improve FFC step 7 (hypothetical cross size) - Avoid performing inside layout on definite-size flex items (since their computed size can be used as-is.) - Use FormattingState::clone() to generate a throwaway layout instead of mutating the tree in-place. - Update spec link & comments based on current CSSWG draft. The latest version is quite a bit clearer on how this should work.
2022-02-27 13:39:38 +01:00
}
LibWeb: Move FFC layout algorithm step 8 to a separate function
2021-10-13 22:17:33 +02:00
}
// https://www.w3.org/TR/css-flexbox-1/#algo-cross-line
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
void FlexFormattingContext::calculate_cross_size_of_each_flex_line(float const cross_min_size, float const cross_max_size)
LibWeb: Move FFC layout algorithm step 8 to a separate function
2021-10-13 22:17:33 +02:00
{
LibWeb: Use is_single_line() and add spec comments to FFC step 8
2021-10-18 18:37:43 +02:00
// 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(flex_container())) {
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
m_flex_lines[0].cross_size = specified_cross_size(flex_container());
LibWeb: Use is_single_line() and add spec comments to FFC step 8
2021-10-18 18:37:43 +02:00
return;
}
LibWeb: Move FFC layout algorithm step 8 to a separate function
2021-10-13 22:17:33 +02:00
LibWeb: Use is_single_line() and add spec comments to FFC step 8
2021-10-18 18:37:43 +02:00
// 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.
// FIXME: This isn't spec but makes sense here
if (has_definite_cross_size(flex_container()) && flex_container().computed_values().align_items() == CSS::AlignItems::Stretch) {
flex_line.cross_size = specified_cross_size(flex_container()) / m_flex_lines.size();
continue;
LibWeb: Move FFC layout algorithm step 8 to a separate function
2021-10-13 22:17:33 +02:00
}
LibWeb: Use is_single_line() and add spec comments to FFC step 8
2021-10-18 18:37:43 +02:00
// 2. Among all the items not collected by the previous step, find the largest outer hypothetical cross size.
float largest_hypothetical_cross_size = 0;
for (auto& flex_item : flex_line.items) {
if (largest_hypothetical_cross_size < flex_item->hypothetical_cross_size_with_margins())
largest_hypothetical_cross_size = flex_item->hypothetical_cross_size_with_margins();
LibWeb: Move FFC layout algorithm step 8 to a separate function
2021-10-13 22:17:33 +02:00
}
LibWeb: Use is_single_line() and add spec comments to FFC step 8
2021-10-18 18:37:43 +02:00
// 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(0.0f, largest_hypothetical_cross_size);
LibWeb: Move FFC layout algorithm step 8 to a separate function
2021-10-13 22:17:33 +02:00
}
LibWeb: Use is_single_line() and add spec comments to FFC step 8
2021-10-18 18:37:43 +02:00
// 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.
if (is_single_line())
LibWeb: Follow relaxed CSS clamping rules in flexbox layout AFAICT, css-values-4 tells us that clamping numbers to a range where min>max is okay. That means we can't use AK::clamp() since it will VERIFY that max>=min. This patch adds a css_clamp() helper (locally in FFC for now). This fixes an issue where a bunch of sites were crashing due to the VERIFY in AK::clamp().
2022-04-09 14:47:41 +02:00
css_clamp(m_flex_lines[0].cross_size, cross_min_size, cross_max_size);
LibWeb: Move FFC layout algorithm step 8 to a separate function
2021-10-13 22:17:33 +02:00
}
LibWeb: Move FFC layout algorithm step 7 to a separate function
2021-10-13 22:15:16 +02:00
LibWeb: Move FFC layout algorithm step 11 to a separate function
2021-10-13 22:19:17 +02:00
// https://www.w3.org/TR/css-flexbox-1/#algo-stretch
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
void FlexFormattingContext::determine_used_cross_size_of_each_flex_item()
LibWeb: Move FFC layout algorithm step 11 to a separate function
2021-10-13 22:19:17 +02:00
{
LibWeb: Make FFC line and item vectors members instead of locals This gives all member functions access to these vectors without having to pass them as arguments.
2021-10-13 22:44:54 +02:00
for (auto& flex_line : m_flex_lines) {
LibWeb: Move FFC layout algorithm step 11 to a separate function
2021-10-13 22:19:17 +02:00
for (auto& flex_item : flex_line.items) {
LibWeb: Don't include flex line margins in inner flex item cross sizes In cases where flex item cross size is based on the flex line cross size, the spec specifically says to transfer the *outer* cross size of the line. We were ignoring the "outer" part. This patch fixes that by subtracting the cross margins from the size.
2022-07-07 11:44:35 +02:00
// 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.
LibWeb: Honor `align-self` over `align-items` when non-auto on flex item
2022-07-11 23:52:36 +02:00
if (alignment_for_item(*flex_item) == CSS::AlignItems::Stretch
LibWeb: Don't include flex line margins in inner flex item cross sizes In cases where flex item cross size is based on the flex line cross size, the spec specifically says to transfer the *outer* cross size of the line. We were ignoring the "outer" part. This patch fixes that by subtracting the cross margins from the size.
2022-07-07 11:44:35 +02:00
&& is_cross_auto(flex_item->box)
&& !flex_item->margins.cross_before_is_auto
&& !flex_item->margins.cross_after_is_auto) {
// FIXME: Clamp to the item's used min and max cross sizes.
flex_item->cross_size = flex_line.cross_size - flex_item->margins.cross_before - flex_item->margins.cross_after;
LibWeb: Move FFC layout algorithm step 11 to a separate function
2021-10-13 22:19:17 +02:00
} else {
LibWeb: Don't include flex line margins in inner flex item cross sizes In cases where flex item cross size is based on the flex line cross size, the spec specifically says to transfer the *outer* cross size of the line. We were ignoring the "outer" part. This patch fixes that by subtracting the cross margins from the size.
2022-07-07 11:44:35 +02:00
// Otherwise, the used cross size is the item’s hypothetical cross size.
LibWeb: Move FFC layout algorithm step 11 to a separate function
2021-10-13 22:19:17 +02:00
flex_item->cross_size = flex_item->hypothetical_cross_size;
}
}
}
}
LibWeb: Move FFC layout algorithm step 12 to a separate function
2021-10-13 22:20:55 +02:00
// https://www.w3.org/TR/css-flexbox-1/#algo-main-align
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
void FlexFormattingContext::distribute_any_remaining_free_space()
LibWeb: Move FFC layout algorithm step 12 to a separate function
2021-10-13 22:20:55 +02:00
{
LibWeb: Make FFC line and item vectors members instead of locals This gives all member functions access to these vectors without having to pass them as arguments.
2021-10-13 22:44:54 +02:00
for (auto& flex_line : m_flex_lines) {
LibWeb: Move FFC layout algorithm step 12 to a separate function
2021-10-13 22:20:55 +02:00
// 12.1.
float used_main_space = 0;
size_t auto_margins = 0;
for (auto& flex_item : flex_line.items) {
used_main_space += flex_item->main_size;
if (is_main_axis_margin_first_auto(flex_item->box))
++auto_margins;
LibWeb: Make margins in the main dimension work for flex items The spec at https://www.w3.org/TR/css-flexbox-1/ states that when calculating specific spaces and sizes inside a flex container, the outer size of a flex item needs to be taken into account. This patch adds the margins in the main dimension of a flex item to these calculations such that their margins are actually painted in a lot of common cases. It makes our Github page look marginally better.
2022-03-23 11:40:42 +01:00
LibWeb: Move FFC layout algorithm step 12 to a separate function
2021-10-13 22:20:55 +02:00
if (is_main_axis_margin_second_auto(flex_item->box))
++auto_margins;
LibWeb: Take margin box into account when justifying flex items Before this patch, we were justifying based on the content box only, which led to misalignments along the main axis when items had non-zero padding, borders or margins.
2022-07-12 00:17:13 +02:00
used_main_space += flex_item->margins.main_before + flex_item->margins.main_after
+ flex_item->borders.main_before + flex_item->borders.main_after
+ flex_item->padding.main_before + flex_item->padding.main_after;
LibWeb: Move FFC layout algorithm step 12 to a separate function
2021-10-13 22:20:55 +02:00
}
LibWeb: Keep the "remaining free space" across flexbox algo steps Instead of recomputing the "remaining free space" per flex line, remember it after calculating it during the "resolve flexible lengths" step so we can reuse it later.
2022-07-06 19:15:31 +02:00
if (flex_line.remaining_free_space > 0) {
float size_per_auto_margin = flex_line.remaining_free_space / (float)auto_margins;
LibWeb: Move FFC layout algorithm step 12 to a separate function
2021-10-13 22:20:55 +02:00
for (auto& flex_item : flex_line.items) {
if (is_main_axis_margin_first_auto(flex_item->box))
LibWeb: Actually distribute free space to flex items with auto margins We were not applying the distributed space to the used offset of flex items, as we were only assigning the margins to the layout state of the box, not the internal FlexItem::margins.
2022-06-21 21:18:00 +02:00
set_main_axis_first_margin(*flex_item, size_per_auto_margin);
LibWeb: Move FFC layout algorithm step 12 to a separate function
2021-10-13 22:20:55 +02:00
if (is_main_axis_margin_second_auto(flex_item->box))
LibWeb: Actually distribute free space to flex items with auto margins We were not applying the distributed space to the used offset of flex items, as we were only assigning the margins to the layout state of the box, not the internal FlexItem::margins.
2022-06-21 21:18:00 +02:00
set_main_axis_second_margin(*flex_item, size_per_auto_margin);
LibWeb: Move FFC layout algorithm step 12 to a separate function
2021-10-13 22:20:55 +02:00
}
} else {
for (auto& flex_item : flex_line.items) {
if (is_main_axis_margin_first_auto(flex_item->box))
LibWeb: Actually distribute free space to flex items with auto margins We were not applying the distributed space to the used offset of flex items, as we were only assigning the margins to the layout state of the box, not the internal FlexItem::margins.
2022-06-21 21:18:00 +02:00
set_main_axis_first_margin(*flex_item, 0);
LibWeb: Move FFC layout algorithm step 12 to a separate function
2021-10-13 22:20:55 +02:00
if (is_main_axis_margin_second_auto(flex_item->box))
LibWeb: Actually distribute free space to flex items with auto margins We were not applying the distributed space to the used offset of flex items, as we were only assigning the margins to the layout state of the box, not the internal FlexItem::margins.
2022-06-21 21:18:00 +02:00
set_main_axis_second_margin(*flex_item, 0);
LibWeb: Move FFC layout algorithm step 12 to a separate function
2021-10-13 22:20:55 +02:00
}
}
// 12.2.
float space_between_items = 0;
float space_before_first_item = 0;
auto number_of_items = flex_line.items.size();
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
switch (flex_container().computed_values().justify_content()) {
LibWeb: Move FFC layout algorithm step 12 to a separate function
2021-10-13 22:20:55 +02:00
case CSS::JustifyContent::FlexStart:
LibWeb: Improve support for flex-start/end with reversed flex-direction We now pass the "flex-direction" test from the CSSWG flexbox test suite.
2022-07-06 22:11:48 +02:00
if (is_direction_reverse())
space_before_first_item = m_available_space->main.value_or(NumericLimits<float>::max());
else
space_before_first_item = 0;
LibWeb: Move FFC layout algorithm step 12 to a separate function
2021-10-13 22:20:55 +02:00
break;
case CSS::JustifyContent::FlexEnd:
LibWeb: Improve support for flex-start/end with reversed flex-direction We now pass the "flex-direction" test from the CSSWG flexbox test suite.
2022-07-06 22:11:48 +02:00
if (is_direction_reverse())
space_before_first_item = 0;
else
space_before_first_item = m_available_space->main.value_or(NumericLimits<float>::max());
LibWeb: Move FFC layout algorithm step 12 to a separate function
2021-10-13 22:20:55 +02:00
break;
case CSS::JustifyContent::Center:
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 14:40:13 +01:00
space_before_first_item = (m_available_space->main.value_or(NumericLimits<float>::max()) - used_main_space) / 2.0f;
LibWeb: Move FFC layout algorithm step 12 to a separate function
2021-10-13 22:20:55 +02:00
break;
case CSS::JustifyContent::SpaceBetween:
LibWeb: Keep the "remaining free space" across flexbox algo steps Instead of recomputing the "remaining free space" per flex line, remember it after calculating it during the "resolve flexible lengths" step so we can reuse it later.
2022-07-06 19:15:31 +02:00
space_between_items = flex_line.remaining_free_space / (number_of_items - 1);
LibWeb: Move FFC layout algorithm step 12 to a separate function
2021-10-13 22:20:55 +02:00
break;
case CSS::JustifyContent::SpaceAround:
LibWeb: Keep the "remaining free space" across flexbox algo steps Instead of recomputing the "remaining free space" per flex line, remember it after calculating it during the "resolve flexible lengths" step so we can reuse it later.
2022-07-06 19:15:31 +02:00
space_between_items = flex_line.remaining_free_space / number_of_items;
LibWeb: Move FFC layout algorithm step 12 to a separate function
2021-10-13 22:20:55 +02:00
space_before_first_item = space_between_items / 2.0f;
break;
}
// FIXME: Support reverse
float main_offset = space_before_first_item;
LibWeb: Improve support for flex-start/end with reversed flex-direction We now pass the "flex-direction" test from the CSSWG flexbox test suite.
2022-07-06 22:11:48 +02:00
auto place_item = [&](FlexItem& item) {
auto amount_of_main_size_used = item.main_size
+ 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()) {
item.main_offset = main_offset - item.main_size - item.margins.main_after - item.borders.main_after - item.padding.main_after;
main_offset -= amount_of_main_size_used;
} else {
item.main_offset = main_offset + item.margins.main_before + item.borders.main_before + item.padding.main_before;
main_offset += amount_of_main_size_used;
}
};
if (is_direction_reverse()) {
for (auto& item : flex_line.items.in_reverse()) {
place_item(*item);
}
} else {
for (auto& item : flex_line.items) {
place_item(*item);
}
LibWeb: Move FFC layout algorithm step 12 to a separate function
2021-10-13 22:20:55 +02:00
}
}
}
LibWeb: Add a debug helper to dump current state of an FFC
2022-03-13 00:03:59 +01:00
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, item.cross_size);
}
}
}
LibWeb: Honor `align-self` over `align-items` when non-auto on flex item
2022-07-11 23:52:36 +02:00
CSS::AlignItems FlexFormattingContext::alignment_for_item(FlexItem const& item) const
{
switch (item.box.computed_values().align_self()) {
case CSS::AlignSelf::Auto:
return flex_container().computed_values().align_items();
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::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();
}
}
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
void FlexFormattingContext::align_all_flex_items_along_the_cross_axis()
LibWeb: Move FFC layout algorithm step 14 to a separate function
2021-10-13 22:22:30 +02:00
{
// FIXME: Take better care of margins
float line_cross_offset = 0;
LibWeb: Make FFC line and item vectors members instead of locals This gives all member functions access to these vectors without having to pass them as arguments.
2021-10-13 22:44:54 +02:00
for (auto& flex_line : m_flex_lines) {
LibWeb: Move FFC layout algorithm step 14 to a separate function
2021-10-13 22:22:30 +02:00
for (auto* flex_item : flex_line.items) {
LibWeb: Honor `align-self` over `align-items` when non-auto on flex item
2022-07-11 23:52:36 +02:00
switch (alignment_for_item(*flex_item)) {
LibWeb: Move FFC layout algorithm step 14 to a separate function
2021-10-13 22:22:30 +02:00
case CSS::AlignItems::Baseline:
// FIXME: Implement this
// Fallthrough
case CSS::AlignItems::FlexStart:
case CSS::AlignItems::Stretch:
LibWeb: Take borders and padding into account when doing Flex layout Before this the flex layout didn't take into account the applied borders or padding while laying out the items. The child's top and left borders would get painted over the parent's borders, also due to it not taking borders into account, children with borders would overlap each other. Due to it not taking padding into account, the children would get drawn outside the parent element.
2022-03-27 16:14:18 +02:00
flex_item->cross_offset = line_cross_offset + flex_item->margins.cross_before + flex_item->borders.cross_before + flex_item->padding.cross_before;
LibWeb: Move FFC layout algorithm step 14 to a separate function
2021-10-13 22:22:30 +02:00
break;
case CSS::AlignItems::FlexEnd:
flex_item->cross_offset = line_cross_offset + flex_line.cross_size - flex_item->cross_size;
break;
case CSS::AlignItems::Center:
flex_item->cross_offset = line_cross_offset + (flex_line.cross_size / 2.0f) - (flex_item->cross_size / 2.0f);
break;
default:
break;
}
}
line_cross_offset += flex_line.cross_size;
}
}
LibWeb: Move FFC layout algorithm step 15 to a separate function
2021-10-13 22:24:09 +02:00
// https://www.w3.org/TR/css-flexbox-1/#algo-cross-container
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
void FlexFormattingContext::determine_flex_container_used_cross_size(float const cross_min_size, float const cross_max_size)
LibWeb: Move FFC layout algorithm step 15 to a separate function
2021-10-13 22:24:09 +02:00
{
LibWeb: Support indefinite flex container cross sizes Instead of assuming that any indefinite cross size must be "auto", check what is actually is, and resolve it accordingly.
2022-02-28 00:02:00 +01:00
float cross_size = 0;
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 22:52:50 +02:00
if (has_definite_cross_size(flex_container())) {
LibWeb: Support indefinite flex container cross sizes Instead of assuming that any indefinite cross size must be "auto", check what is actually is, and resolve it accordingly.
2022-02-28 00:02:00 +01:00
// Flex container has definite cross size: easy-peasy.
cross_size = specified_cross_size(flex_container());
LibWeb: Move FFC layout algorithm step 15 to a separate function
2021-10-13 22:24:09 +02:00
} else {
LibWeb: Support indefinite flex container cross sizes Instead of assuming that any indefinite cross size must be "auto", check what is actually is, and resolve it accordingly.
2022-02-28 00:02:00 +01:00
// Flex container has indefinite cross size.
auto cross_size_value = is_row_layout() ? flex_container().computed_values().height() : flex_container().computed_values().width();
LibWeb: Make sure CSS::ComputedValues has initial size values Instead of using Optional<LengthPercentage>, we now use LengthPercentage for these values. The initial values are all `auto`. This avoids having to check `has_value()` in a ton of places.
2022-07-07 12:36:02 +02:00
if (cross_size_value.is_auto() || cross_size_value.is_percentage()) {
LibWeb: Support indefinite flex container cross sizes Instead of assuming that any indefinite cross size must be "auto", check what is actually is, and resolve it accordingly.
2022-02-28 00:02:00 +01:00
// If a content-based cross size is needed, use the sum of the flex lines' cross sizes.
float 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;
LibWeb: Give flex containers with percentage cross size some dimensions Instead of making them zero-sized on the cross axis, just treat percentage sizes like auto for now. Better to have *some* size than none at all.
2022-03-13 00:02:03 +01:00
LibWeb: Make sure CSS::ComputedValues has initial size values Instead of using Optional<LengthPercentage>, we now use LengthPercentage for these values. The initial values are all `auto`. This avoids having to check `has_value()` in a ton of places.
2022-07-07 12:36:02 +02:00
if (cross_size_value.is_percentage()) {
LibWeb: Give flex containers with percentage cross size some dimensions Instead of making them zero-sized on the cross axis, just treat percentage sizes like auto for now. Better to have *some* size than none at all.
2022-03-13 00:02:03 +01:00
// FIXME: Handle percentage values here! Right now we're just treating them as "auto"
}
LibWeb: Support indefinite flex container cross sizes Instead of assuming that any indefinite cross size must be "auto", check what is actually is, and resolve it accordingly.
2022-02-28 00:02:00 +01:00
} else {
// Otherwise, resolve the indefinite size at this point.
LibWeb: Make sure CSS::ComputedValues has initial size values Instead of using Optional<LengthPercentage>, we now use LengthPercentage for these values. The initial values are all `auto`. This avoids having to check `has_value()` in a ton of places.
2022-07-07 12:36:02 +02:00
cross_size = cross_size_value.resolved(flex_container(), CSS::Length::make_px(specified_cross_size(*flex_container().containing_block()))).to_px(flex_container());
LibWeb: Move FFC layout algorithm step 15 to a separate function
2021-10-13 22:24:09 +02:00
}
}
LibWeb: Follow relaxed CSS clamping rules in flexbox layout AFAICT, css-values-4 tells us that clamping numbers to a range where min>max is okay. That means we can't use AK::clamp() since it will VERIFY that max>=min. This patch adds a css_clamp() helper (locally in FFC for now). This fixes an issue where a bunch of sites were crashing due to the VERIFY in AK::clamp().
2022-04-09 14:47:41 +02:00
set_cross_size(flex_container(), css_clamp(cross_size, cross_min_size, cross_max_size));
LibWeb: Move FFC layout algorithm step 15 to a separate function
2021-10-13 22:24:09 +02:00
}
LibWeb: Move FFC layout algorithm step 16 to a separate function
2021-10-13 22:25:39 +02:00
// https://www.w3.org/TR/css-flexbox-1/#algo-line-align
LibWeb: Make FFC line and item vectors members instead of locals This gives all member functions access to these vectors without having to pass them as arguments.
2021-10-13 22:44:54 +02:00
void FlexFormattingContext::align_all_flex_lines()
LibWeb: Move FFC layout algorithm step 16 to a separate function
2021-10-13 22:25:39 +02:00
{
// FIXME: Support reverse
LibWeb: Fix flex line alignment in single-line flex containers For single-line flex containers, center the only flex line along the cross axis. Alignment of multi-line flex containers are left as a FIXME. This patch also moves out the assignment of final metrics to the FormattingState from align_all_flex_lines() to a separate function.
2022-02-27 23:58:54 +01:00
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];
float cross_size_of_flex_container = specified_cross_size(flex_container());
for (auto* flex_item : flex_line.items)
flex_item->cross_offset += (cross_size_of_flex_container / 2.0f) - (flex_line.cross_size / 2.0f);
} else {
// FIXME: Support align-content
LibWeb: Move FFC layout algorithm step 16 to a separate function
2021-10-13 22:25:39 +02:00
}
}
LibWeb: Fix flex line alignment in single-line flex containers For single-line flex containers, center the only flex line along the cross axis. Alignment of multi-line flex containers are left as a FIXME. This patch also moves out the assignment of final metrics to the FormattingState from align_all_flex_lines() to a separate function.
2022-02-27 23:58:54 +01:00
void FlexFormattingContext::copy_dimensions_from_flex_items_to_boxes()
{
for (auto& flex_item : m_flex_items) {
LibWeb: Transfer flex item box model metrics to paintable Until now, flex items has 0/0/0 margin/border/padding values.
2022-03-26 01:30:08 +01:00
auto const& box = flex_item.box;
auto& box_state = m_state.get_mutable(box);
box_state.padding_left = box.computed_values().padding().left.resolved(box, CSS::Length::make_px(m_flex_container_state.content_width)).to_px(box);
box_state.padding_right = box.computed_values().padding().right.resolved(box, CSS::Length::make_px(m_flex_container_state.content_width)).to_px(box);
box_state.padding_top = box.computed_values().padding().top.resolved(box, CSS::Length::make_px(m_flex_container_state.content_width)).to_px(box);
box_state.padding_bottom = box.computed_values().padding().bottom.resolved(box, CSS::Length::make_px(m_flex_container_state.content_width)).to_px(box);
box_state.margin_left = box.computed_values().margin().left.resolved(box, CSS::Length::make_px(m_flex_container_state.content_width)).to_px(box);
box_state.margin_right = box.computed_values().margin().right.resolved(box, CSS::Length::make_px(m_flex_container_state.content_width)).to_px(box);
box_state.margin_top = box.computed_values().margin().top.resolved(box, CSS::Length::make_px(m_flex_container_state.content_width)).to_px(box);
box_state.margin_bottom = box.computed_values().margin().bottom.resolved(box, CSS::Length::make_px(m_flex_container_state.content_width)).to_px(box);
box_state.border_left = box.computed_values().border_left().width;
box_state.border_right = box.computed_values().border_right().width;
box_state.border_top = box.computed_values().border_top().width;
box_state.border_bottom = box.computed_values().border_bottom().width;
set_main_size(box, flex_item.main_size);
set_cross_size(box, flex_item.cross_size);
set_offset(box, flex_item.main_offset, flex_item.cross_offset);
LibWeb: Fix flex line alignment in single-line flex containers For single-line flex containers, center the only flex line along the cross axis. Alignment of multi-line flex containers are left as a FIXME. This patch also moves out the assignment of final metrics to the FormattingState from align_all_flex_lines() to a separate function.
2022-02-27 23:58:54 +01:00
}
}
LibWeb: Implement basic intrinsic sizing algorithms for flex containers This patch adds support for MinContent and MaxContent layout to FFC. This means that an FFC can now calculate intrinsic sizes for the flex container, to be used by the parent formatting context. There are some FIXME's as usual, but this already works on basic things.
2022-04-06 01:20:20 +02:00
// https://drafts.csswg.org/css-flexbox-1/#intrinsic-sizes
void FlexFormattingContext::determine_intrinsic_size_of_flex_container(LayoutMode layout_mode)
{
VERIFY(layout_mode != LayoutMode::Normal);
float main_size = calculate_intrinsic_main_size_of_flex_container(layout_mode);
float cross_size = calculate_intrinsic_cross_size_of_flex_container(layout_mode);
if (is_row_layout()) {
m_flex_container_state.content_width = main_size;
m_flex_container_state.content_height = cross_size;
} else {
m_flex_container_state.content_height = main_size;
m_flex_container_state.content_width = cross_size;
}
}
// https://drafts.csswg.org/css-flexbox-1/#intrinsic-main-sizes
float FlexFormattingContext::calculate_intrinsic_main_size_of_flex_container(LayoutMode layout_mode)
{
VERIFY(layout_mode != LayoutMode::Normal);
// 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.
LibWeb: Express intrinsic size layout via size constraints Previously, we had three layout modes: - Normal: - Everything uses the computed values from CSS. - MinContent: - Containing blocks act as if they have 0 width. - All line breaking opportunities are taken. - MaxContent: - Containing blocks act as if they have infinite width. - Only forced line breaks are accepted. The above was based on a set of misunderstandings of CSS sizing. A major problem with the above was that *all* containing blocks behaved differently during intrinsic size layout, not just the relevant one. With this patch there are only two layout modes: - Normal: - Everything uses the computed values from CSS. - IntrinsicSizeDetermination: - One or more boxes have size constraints applied. There are two size constraints per layout box, set here: - FormattingState::NodeState::width_constraint - FormattingState::NodeState::height_constraint They are of type SizeConstraint and can be one of None, MinContent, or MaxContent. The default is None. When performing an IntrinsicSizeDetermination layout, we now assign a size constraint to the box we're trying to determine the intrinsic size of, which is then honored by using two new helpers to query the dimensions of containing blocks: - FormattingContext::containing_block_width_for(Box) - FormattingContext::containing_block_height_for(Box) If there's a relevant constraint in effect on the Box, the size of its containing block is adjusted accordingly. This is essentially an implementation of the "available space" constraints from CSS-SIZING-3. I'm sure some things will break from this, and we'll have to deal with that separately. Spec: https://drafts.csswg.org/css-sizing-3/#available
2022-07-09 15:17:47 +02:00
if (!is_single_line() && (m_flex_container_state.width_constraint == SizeConstraint::MinContent || m_flex_container_state.height_constraint == SizeConstraint::MinContent)) {
LibWeb: Implement basic intrinsic sizing algorithms for flex containers This patch adds support for MinContent and MaxContent layout to FFC. This means that an FFC can now calculate intrinsic sizes for the flex container, to be used by the parent formatting context. There are some FIXME's as usual, but this already works on basic things.
2022-04-06 01:20:20 +02:00
float largest_contribution = 0;
for (auto const& flex_item : m_flex_items) {
// FIXME: Skip collapsed flex items.
largest_contribution = max(largest_contribution, calculate_main_min_content_contribution(flex_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 by its flex grow factor floored at 1;
// if negative, divide by its scaled flex shrink factor having floored the flex shrink factor at 1.
// This is the item’s max-content flex fraction.
for (auto& flex_item : m_flex_items) {
float contribution;
LibWeb: Express intrinsic size layout via size constraints Previously, we had three layout modes: - Normal: - Everything uses the computed values from CSS. - MinContent: - Containing blocks act as if they have 0 width. - All line breaking opportunities are taken. - MaxContent: - Containing blocks act as if they have infinite width. - Only forced line breaks are accepted. The above was based on a set of misunderstandings of CSS sizing. A major problem with the above was that *all* containing blocks behaved differently during intrinsic size layout, not just the relevant one. With this patch there are only two layout modes: - Normal: - Everything uses the computed values from CSS. - IntrinsicSizeDetermination: - One or more boxes have size constraints applied. There are two size constraints per layout box, set here: - FormattingState::NodeState::width_constraint - FormattingState::NodeState::height_constraint They are of type SizeConstraint and can be one of None, MinContent, or MaxContent. The default is None. When performing an IntrinsicSizeDetermination layout, we now assign a size constraint to the box we're trying to determine the intrinsic size of, which is then honored by using two new helpers to query the dimensions of containing blocks: - FormattingContext::containing_block_width_for(Box) - FormattingContext::containing_block_height_for(Box) If there's a relevant constraint in effect on the Box, the size of its containing block is adjusted accordingly. This is essentially an implementation of the "available space" constraints from CSS-SIZING-3. I'm sure some things will break from this, and we'll have to deal with that separately. Spec: https://drafts.csswg.org/css-sizing-3/#available
2022-07-09 15:17:47 +02:00
if (m_flex_container_state.width_constraint == SizeConstraint::MinContent || m_flex_container_state.height_constraint == SizeConstraint::MinContent)
LibWeb: Implement basic intrinsic sizing algorithms for flex containers This patch adds support for MinContent and MaxContent layout to FFC. This means that an FFC can now calculate intrinsic sizes for the flex container, to be used by the parent formatting context. There are some FIXME's as usual, but this already works on basic things.
2022-04-06 01:20:20 +02:00
contribution = calculate_main_min_content_contribution(flex_item);
else
contribution = calculate_main_max_content_contribution(flex_item);
LibWeb: Use the *outer* flex base size in intrinsic size calculation
2022-07-10 23:54:06 +02:00
float flex_fraction = contribution - (flex_item.flex_base_size + flex_item.margins.main_before + flex_item.margins.main_after + flex_item.borders.main_before + flex_item.borders.main_after + flex_item.padding.main_before + flex_item.padding.main_after);
LibWeb: Implement basic intrinsic sizing algorithms for flex containers This patch adds support for MinContent and MaxContent layout to FFC. This means that an FFC can now calculate intrinsic sizes for the flex container, to be used by the parent formatting context. There are some FIXME's as usual, but this already works on basic things.
2022-04-06 01:20:20 +02:00
if (flex_fraction >= 0)
flex_fraction /= max(flex_item.box.computed_values().flex_grow(), 1.0f);
else
LibWeb: Floor scaled flex shrink factor at 1 when spec asks us to
2022-07-12 02:16:01 +02:00
flex_fraction /= max(flex_item.scaled_flex_shrink_factor, 1.0f);
LibWeb: Implement basic intrinsic sizing algorithms for flex containers This patch adds support for MinContent and MaxContent layout to FFC. This means that an FFC can now calculate intrinsic sizes for the flex container, to be used by the parent formatting context. There are some FIXME's as usual, but this already works on basic things.
2022-04-06 01:20:20 +02:00
// FIXME: The name max_content_flex_fraction here is misleading, since we also use this code path for min-content sizing.
flex_item.max_content_flex_fraction = flex_fraction;
}
// 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& flex_item : m_flex_items) {
// FIXME: Honor breaking requests.
m_flex_lines.last().items.append(&flex_item);
}
// 3. Within each line, find the largest max-content flex fraction among all the flex items.
// Add each item’s flex base size to the product of its flex grow factor
// (or scaled flex shrink factor, if the chosen max-content flex fraction was negative)
// and the chosen max-content flex fraction, then clamp that result by the max main size floored by the min main size.
float largest_sum = 0;
for (auto& flex_line : m_flex_lines) {
float largest_flex_fraction = 0;
for (auto& flex_item : flex_line.items) {
// FIXME: The name max_content_flex_fraction here is misleading, since we also use this code path for min-content sizing.
largest_flex_fraction = max(largest_flex_fraction, flex_item->max_content_flex_fraction);
}
float sum = 0;
for (auto& flex_item : flex_line.items) {
auto product = 0;
if (flex_item->max_content_flex_fraction >= 0) {
product = largest_flex_fraction * flex_item->box.computed_values().flex_grow();
} else {
LibWeb: Use the "scaled flex shrink factor" where noted by the spec
2022-07-10 23:53:40 +02:00
product = largest_flex_fraction * flex_item->scaled_flex_shrink_factor;
LibWeb: Implement basic intrinsic sizing algorithms for flex containers This patch adds support for MinContent and MaxContent layout to FFC. This means that an FFC can now calculate intrinsic sizes for the flex container, to be used by the parent formatting context. There are some FIXME's as usual, but this already works on basic things.
2022-04-06 01:20:20 +02:00
}
sum += flex_item->flex_base_size + flex_item->margins.main_before + flex_item->margins.main_after + flex_item->borders.main_before + flex_item->borders.main_after + flex_item->padding.main_before + flex_item->padding.main_after + product;
}
largest_sum = max(largest_sum, sum);
}
// 4. The flex container’s max-content size is the largest sum of the afore-calculated sizes of all items within a single line.
return largest_sum;
}
// https://drafts.csswg.org/css-flexbox-1/#intrinsic-cross-sizes
float FlexFormattingContext::calculate_intrinsic_cross_size_of_flex_container(LayoutMode layout_mode)
{
VERIFY(layout_mode != LayoutMode::Normal);
// 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()) {
float largest_contribution = 0;
for (auto& flex_item : m_flex_items) {
float contribution;
LibWeb: Express intrinsic size layout via size constraints Previously, we had three layout modes: - Normal: - Everything uses the computed values from CSS. - MinContent: - Containing blocks act as if they have 0 width. - All line breaking opportunities are taken. - MaxContent: - Containing blocks act as if they have infinite width. - Only forced line breaks are accepted. The above was based on a set of misunderstandings of CSS sizing. A major problem with the above was that *all* containing blocks behaved differently during intrinsic size layout, not just the relevant one. With this patch there are only two layout modes: - Normal: - Everything uses the computed values from CSS. - IntrinsicSizeDetermination: - One or more boxes have size constraints applied. There are two size constraints per layout box, set here: - FormattingState::NodeState::width_constraint - FormattingState::NodeState::height_constraint They are of type SizeConstraint and can be one of None, MinContent, or MaxContent. The default is None. When performing an IntrinsicSizeDetermination layout, we now assign a size constraint to the box we're trying to determine the intrinsic size of, which is then honored by using two new helpers to query the dimensions of containing blocks: - FormattingContext::containing_block_width_for(Box) - FormattingContext::containing_block_height_for(Box) If there's a relevant constraint in effect on the Box, the size of its containing block is adjusted accordingly. This is essentially an implementation of the "available space" constraints from CSS-SIZING-3. I'm sure some things will break from this, and we'll have to deal with that separately. Spec: https://drafts.csswg.org/css-sizing-3/#available
2022-07-09 15:17:47 +02:00
if (m_flex_container_state.width_constraint == SizeConstraint::MinContent || m_flex_container_state.height_constraint == SizeConstraint::MinContent)
LibWeb: Implement basic intrinsic sizing algorithms for flex containers This patch adds support for MinContent and MaxContent layout to FFC. This means that an FFC can now calculate intrinsic sizes for the flex container, to be used by the parent formatting context. There are some FIXME's as usual, but this already works on basic things.
2022-04-06 01:20:20 +02:00
contribution = calculate_cross_min_content_contribution(flex_item);
LibWeb: Express intrinsic size layout via size constraints Previously, we had three layout modes: - Normal: - Everything uses the computed values from CSS. - MinContent: - Containing blocks act as if they have 0 width. - All line breaking opportunities are taken. - MaxContent: - Containing blocks act as if they have infinite width. - Only forced line breaks are accepted. The above was based on a set of misunderstandings of CSS sizing. A major problem with the above was that *all* containing blocks behaved differently during intrinsic size layout, not just the relevant one. With this patch there are only two layout modes: - Normal: - Everything uses the computed values from CSS. - IntrinsicSizeDetermination: - One or more boxes have size constraints applied. There are two size constraints per layout box, set here: - FormattingState::NodeState::width_constraint - FormattingState::NodeState::height_constraint They are of type SizeConstraint and can be one of None, MinContent, or MaxContent. The default is None. When performing an IntrinsicSizeDetermination layout, we now assign a size constraint to the box we're trying to determine the intrinsic size of, which is then honored by using two new helpers to query the dimensions of containing blocks: - FormattingContext::containing_block_width_for(Box) - FormattingContext::containing_block_height_for(Box) If there's a relevant constraint in effect on the Box, the size of its containing block is adjusted accordingly. This is essentially an implementation of the "available space" constraints from CSS-SIZING-3. I'm sure some things will break from this, and we'll have to deal with that separately. Spec: https://drafts.csswg.org/css-sizing-3/#available
2022-07-09 15:17:47 +02:00
else if (m_flex_container_state.width_constraint == SizeConstraint::MaxContent || m_flex_container_state.height_constraint == SizeConstraint::MaxContent)
LibWeb: Implement basic intrinsic sizing algorithms for flex containers This patch adds support for MinContent and MaxContent layout to FFC. This means that an FFC can now calculate intrinsic sizes for the flex container, to be used by the parent formatting context. There are some FIXME's as usual, but this already works on basic things.
2022-04-06 01:20:20 +02:00
contribution = calculate_cross_max_content_contribution(flex_item);
largest_contribution = max(largest_contribution, contribution);
}
return largest_contribution;
}
// For a multi-line flex container, 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).
// FIXME: However, if the flex container is flex-flow: column wrap;, then it’s sized by first finding the largest
// min-content/max-content cross-size contribution among the flex items (respectively), then using that size
// as the available space in the cross axis for each of the flex items during layout.
float sum_of_flex_line_cross_sizes = 0;
for (auto& flex_line : m_flex_lines) {
sum_of_flex_line_cross_sizes += flex_line.cross_size;
}
return sum_of_flex_line_cross_sizes;
}
LibWeb: Clamp intrinsic flex item main size contributions to min/max
2022-07-07 15:31:53 +02:00
// https://drafts.csswg.org/css-flexbox-1/#intrinsic-item-contributions
float FlexFormattingContext::calculate_main_min_content_contribution(FlexItem const& item) const
LibWeb: Implement basic intrinsic sizing algorithms for flex containers This patch adds support for MinContent and MaxContent layout to FFC. This means that an FFC can now calculate intrinsic sizes for the flex container, to be used by the parent formatting context. There are some FIXME's as usual, but this already works on basic things.
2022-04-06 01:20:20 +02:00
{
LibWeb: Clamp intrinsic flex item main size contributions to min/max
2022-07-07 15:31:53 +02:00
// 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 outer_min_content_size = [&]() -> float {
LibWeb: Add FFC helpers for getting intrinsic size of flex items
2022-07-08 12:50:04 +02:00
auto inner_main_size = calculate_min_content_main_size(item);
LibWeb: Clamp intrinsic flex item main size contributions to min/max
2022-07-07 15:31:53 +02:00
auto outer_main_size = inner_main_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;
return outer_main_size;
}();
if (!has_definite_main_size(item.box)) {
return outer_min_content_size;
}
auto clamp_min = has_main_min_size(item.box) ? specified_main_min_size(item.box) : 0;
auto clamp_max = has_main_max_size(item.box) ? specified_main_max_size(item.box) : NumericLimits<float>::max();
auto unclamped_preferred_size = resolved_definite_main_size(item.box);
auto clamped_preferred_size = css_clamp(unclamped_preferred_size, clamp_min, clamp_max);
return max(outer_min_content_size, clamped_preferred_size);
LibWeb: Implement basic intrinsic sizing algorithms for flex containers This patch adds support for MinContent and MaxContent layout to FFC. This means that an FFC can now calculate intrinsic sizes for the flex container, to be used by the parent formatting context. There are some FIXME's as usual, but this already works on basic things.
2022-04-06 01:20:20 +02:00
}
LibWeb: Clamp intrinsic flex item main size contributions to min/max
2022-07-07 15:31:53 +02:00
// https://drafts.csswg.org/css-flexbox-1/#intrinsic-item-contributions
float FlexFormattingContext::calculate_main_max_content_contribution(FlexItem const& item) const
LibWeb: Implement basic intrinsic sizing algorithms for flex containers This patch adds support for MinContent and MaxContent layout to FFC. This means that an FFC can now calculate intrinsic sizes for the flex container, to be used by the parent formatting context. There are some FIXME's as usual, but this already works on basic things.
2022-04-06 01:20:20 +02:00
{
LibWeb: Clamp intrinsic flex item main size contributions to min/max
2022-07-07 15:31:53 +02:00
// 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 outer_max_content_size = [&]() -> float {
LibWeb: Add FFC helpers for getting intrinsic size of flex items
2022-07-08 12:50:04 +02:00
auto inner_main_size = calculate_max_content_main_size(item);
LibWeb: Clamp intrinsic flex item main size contributions to min/max
2022-07-07 15:31:53 +02:00
auto outer_main_size = inner_main_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;
return outer_main_size;
}();
if (!has_definite_main_size(item.box)) {
return outer_max_content_size;
}
auto clamp_min = has_main_min_size(item.box) ? specified_main_min_size(item.box) : 0;
auto clamp_max = has_main_max_size(item.box) ? specified_main_max_size(item.box) : NumericLimits<float>::max();
auto unclamped_preferred_size = resolved_definite_main_size(item.box);
auto clamped_preferred_size = css_clamp(unclamped_preferred_size, clamp_min, clamp_max);
return max(outer_max_content_size, clamped_preferred_size);
LibWeb: Implement basic intrinsic sizing algorithms for flex containers This patch adds support for MinContent and MaxContent layout to FFC. This means that an FFC can now calculate intrinsic sizes for the flex container, to be used by the parent formatting context. There are some FIXME's as usual, but this already works on basic things.
2022-04-06 01:20:20 +02:00
}
float FlexFormattingContext::calculate_cross_min_content_contribution(FlexItem const& flex_item) const
{
LibWeb: Honor preferred size as intrinsic cross size of flex items I'm not 100% sure this is on-spec, but it seems to me that flex items that have a specified non-auto cross size should honor that value in its min-content and max-contribution.
2022-07-11 18:50:05 +02:00
auto outer_min_cross_size = [&] {
auto inner_cross_size = calculate_min_content_cross_size(flex_item);
auto outer_cross_size = inner_cross_size
+ flex_item.margins.cross_before + flex_item.margins.cross_after
+ flex_item.borders.cross_before + flex_item.borders.cross_after
+ flex_item.padding.cross_before + flex_item.padding.cross_after;
return outer_cross_size;
}();
if (!has_definite_cross_size(flex_item.box)) {
return outer_min_cross_size;
}
auto clamp_min = has_cross_min_size(flex_item.box) ? specified_cross_min_size(flex_item.box) : 0;
auto clamp_max = has_cross_max_size(flex_item.box) ? specified_cross_max_size(flex_item.box) : NumericLimits<float>::max();
auto unclamped_preferred_size = resolved_definite_cross_size(flex_item.box);
auto clamped_preferred_size = css_clamp(unclamped_preferred_size, clamp_min, clamp_max);
return max(outer_min_cross_size, clamped_preferred_size);
LibWeb: Implement basic intrinsic sizing algorithms for flex containers This patch adds support for MinContent and MaxContent layout to FFC. This means that an FFC can now calculate intrinsic sizes for the flex container, to be used by the parent formatting context. There are some FIXME's as usual, but this already works on basic things.
2022-04-06 01:20:20 +02:00
}
float FlexFormattingContext::calculate_cross_max_content_contribution(FlexItem const& flex_item) const
{
LibWeb: Honor preferred size as intrinsic cross size of flex items I'm not 100% sure this is on-spec, but it seems to me that flex items that have a specified non-auto cross size should honor that value in its min-content and max-contribution.
2022-07-11 18:50:05 +02:00
auto outer_max_content_size = [&] {
auto inner_cross_size = calculate_max_content_cross_size(flex_item);
auto outer_cross_size = inner_cross_size
+ flex_item.margins.cross_before + flex_item.margins.cross_after
+ flex_item.borders.cross_before + flex_item.borders.cross_after
+ flex_item.padding.cross_before + flex_item.padding.cross_after;
return outer_cross_size;
}();
if (!has_definite_cross_size(flex_item.box)) {
return outer_max_content_size;
}
auto clamp_min = has_cross_min_size(flex_item.box) ? specified_cross_min_size(flex_item.box) : 0;
auto clamp_max = has_cross_max_size(flex_item.box) ? specified_cross_max_size(flex_item.box) : NumericLimits<float>::max();
auto unclamped_preferred_size = resolved_definite_cross_size(flex_item.box);
auto clamped_preferred_size = css_clamp(unclamped_preferred_size, clamp_min, clamp_max);
return max(outer_max_content_size, clamped_preferred_size);
LibWeb: Implement basic intrinsic sizing algorithms for flex containers This patch adds support for MinContent and MaxContent layout to FFC. This means that an FFC can now calculate intrinsic sizes for the flex container, to be used by the parent formatting context. There are some FIXME's as usual, but this already works on basic things.
2022-04-06 01:20:20 +02:00
}
LibWeb: Add FFC helpers for getting intrinsic size of flex items
2022-07-08 12:50:04 +02:00
float FlexFormattingContext::calculate_min_content_main_size(FlexItem const& item) const
{
return is_row_layout() ? calculate_min_content_width(item.box) : calculate_min_content_height(item.box);
}
LibWeb: Express intrinsic size layout via size constraints Previously, we had three layout modes: - Normal: - Everything uses the computed values from CSS. - MinContent: - Containing blocks act as if they have 0 width. - All line breaking opportunities are taken. - MaxContent: - Containing blocks act as if they have infinite width. - Only forced line breaks are accepted. The above was based on a set of misunderstandings of CSS sizing. A major problem with the above was that *all* containing blocks behaved differently during intrinsic size layout, not just the relevant one. With this patch there are only two layout modes: - Normal: - Everything uses the computed values from CSS. - IntrinsicSizeDetermination: - One or more boxes have size constraints applied. There are two size constraints per layout box, set here: - FormattingState::NodeState::width_constraint - FormattingState::NodeState::height_constraint They are of type SizeConstraint and can be one of None, MinContent, or MaxContent. The default is None. When performing an IntrinsicSizeDetermination layout, we now assign a size constraint to the box we're trying to determine the intrinsic size of, which is then honored by using two new helpers to query the dimensions of containing blocks: - FormattingContext::containing_block_width_for(Box) - FormattingContext::containing_block_height_for(Box) If there's a relevant constraint in effect on the Box, the size of its containing block is adjusted accordingly. This is essentially an implementation of the "available space" constraints from CSS-SIZING-3. I'm sure some things will break from this, and we'll have to deal with that separately. Spec: https://drafts.csswg.org/css-sizing-3/#available
2022-07-09 15:17:47 +02:00
float FlexFormattingContext::calculate_fit_content_main_size(FlexItem const& item) const
{
return is_row_layout() ? calculate_fit_content_width(item.box, m_available_space->main) : calculate_fit_content_height(item.box, m_available_space->main);
}
float FlexFormattingContext::calculate_fit_content_cross_size(FlexItem const& item) const
{
return is_row_layout() ? calculate_fit_content_height(item.box, m_available_space->cross) : calculate_fit_content_width(item.box, m_available_space->cross);
}
LibWeb: Add FFC helpers for getting intrinsic size of flex items
2022-07-08 12:50:04 +02:00
float FlexFormattingContext::calculate_max_content_main_size(FlexItem const& item) const
{
return is_row_layout() ? calculate_max_content_width(item.box) : calculate_max_content_height(item.box);
}
float FlexFormattingContext::calculate_min_content_cross_size(FlexItem const& item) const
{
return is_row_layout() ? calculate_min_content_height(item.box) : calculate_min_content_width(item.box);
}
float FlexFormattingContext::calculate_max_content_cross_size(FlexItem const& item) const
{
return is_row_layout() ? calculate_max_content_height(item.box) : calculate_max_content_width(item.box);
}
LibWeb: Add a very naive Layout::FlexFormattingContext :^) This is very dumb and only lays out its child boxes on a horizontal line with their shrink-to-fit widths. You have to start somewhere! :^)
2021-01-18 17:33:46 +01:00
}
Reference in a new issue Copy permalink