Stowage/ladybird
2
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-10-19 15:43:20 +00:00
Code Issues Projects Releases Packages Wiki Activity
ladybird/Libraries/LibWeb/Layout/FlexFormattingContext.h

247 lines
11 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: Avoid computing automatic minimum size for some flex items There's a specific (and thankfully very common!) scenario where we can actually skip calculating the automatic minimum size for flex items. In single-line (no wrapping) flex containers, if the sum of all item flex base sizes is <= the flex container's main size, we know that none of the items will be shrunk by the layout algorithm. And so for any flex item with definite main size AND automatic minimum main size, we can treat the automatic minimum size as 0.
2025-04-21 18:27:47 +02:00
* Copyright (c) 2021-2025, Andreas Kling <andreas@ladybird.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
*/
#pragma once
LibWeb: Add missing headers
2021-10-10 15:56:29 +02:00
#include <LibWeb/Layout/Box.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/FormattingContext.h>
namespace Web::Layout {
class FlexFormattingContext final : public FormattingContext {
public:
LibWeb: Save layout mode inside formatting context object FormattingContext::run() does not allow reentrancy, so it's safe to save and access layout mode from FC object. This avoids need to drill it through methods of a formatting context and makes it clear that this value could never be changed after FC construction.
2024-09-11 01:03:02 +02:00
FlexFormattingContext(LayoutState&, LayoutMode, Box const& flex_container, FormattingContext* parent);
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
~FlexFormattingContext();
LibWeb: Implement "out-of-flow" property of Layout Box In some situations, a layout box should not participate in the standard layout process, for example when set to `position: absolute`.
2021-09-15 12:19:42 +01:00
virtual bool inhibits_floating() const override { return true; }
LibWeb: Save layout mode inside formatting context object FormattingContext::run() does not allow reentrancy, so it's safe to save and access layout mode from FC object. This avoids need to drill it through methods of a formatting context and makes it clear that this value could never be changed after FC construction.
2024-09-11 01:03:02 +02:00
virtual void run(AvailableSpace const&) override;
LibWeb: Let FormattingContext decide the automatic width of its root Instead of special-casing FlexFormattingContext in the intrinsic sizing layout helpers, add FormattingContext::automatic_content_width() and let each context subclass decide what that means. No behavior change here, just moving this responsibility.
2023-03-19 09:57:31 +01:00
virtual CSSPixels automatic_content_width() const override;
LibWeb: Convert FormattingContext to new pixel units Just FormattingContext and AvailableSpace, and the minor adjustments to make everything else work.
2022-11-23 17:46:10 +00:00
virtual CSSPixels automatic_content_height() const override;
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: 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
Box const& flex_container() const { return context_box(); }
LibWeb: Define static position calculation separately for each FC Static position of a box is defined by formatting context type it belongs to, so let's define this algorithm separately for each FC instead of assuming FormattingContext::calculate_static_position_rect() understands how to handle all of them. Also with this change calculate_static_position_rect() is no longer virtual function.
2024-10-05 22:18:53 +02:00
StaticPositionRect calculate_static_position_rect(Box const&) const;
LibWeb: Implement static position for abspos children of flex container
2022-10-24 23:17:36 +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
private:
LibWeb: Use preferred flex item sizes as min/max-content contribution When a flex item has a specific preferred size, that size should be its contribution to the containers intrinsic sizes. This fixes an issue on Patreon where the logo would cover the entire viewport since the SVG had a large intrinsic size but the flex item containing it had a small specified size in CSS.
2022-11-05 11:38:28 +01:00
[[nodiscard]] bool should_treat_main_size_as_auto(Box const&) const;
[[nodiscard]] bool should_treat_cross_size_as_auto(Box const&) const;
LibWeb: Treat flex item cross axis max-size as "none" in more cases There are a bunch of situations where we need to treat cross axis max-size properties as "none", notably percentage values when the reference containing block size is an intrinsic sizing constraint. This fixes an issue where flex items with definite width would get shrunk to 0px by "max-width: 100%" in case the item itself is an SVG with no natural width or height. For consistency, we now use the should_treat_max_width/height_as_none helpers throughout FFC. This makes the search/account/cart icons show up in the top right on https://twinings.co.uk :^)
2024-01-15 10:16:43 +01:00
[[nodiscard]] bool should_treat_main_max_size_as_none(Box const&) const;
[[nodiscard]] bool should_treat_cross_max_size_as_none(Box const&) const;
LibWeb: Adjust flex item main size through aspect ratio if needed If there are min or max size constraints in the cross axis for a flex item that has a desired aspect ratio, we may need to adjust the main size *after* applying the cross size constraints. All the steps to achieving this aren't mentioned in the spec, but it seems that all other browsers behave this way, so we should too.
2023-05-10 10:09:29 +02:00
[[nodiscard]] CSSPixels adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(Box const&, CSSPixels main_size, CSS::Size const& min_cross_size, CSS::Size const& max_cross_size) const;
LibWeb: Adjust flex item intrinsic contributions through aspect ratio When determining the intrinsic cross size contribution of a flex item with a preferred aspect ratio, we have to account for any min/max constraints in the main axis.
2024-08-21 12:41:45 +02:00
[[nodiscard]] CSSPixels adjust_cross_size_through_aspect_ratio_for_main_size_min_max_constraints(Box const&, CSSPixels cross_size, CSS::Size const& min_main_size, CSS::Size const& max_main_size) const;
LibWeb: Use `CSSPixelFraction` to represent aspect ratios This allows us to retain perfect precision for aspect ratios derived from either the intrinsic sizes of replaced elements, or the `aspect-ratio` CSS property.
2023-09-03 17:33:58 -05:00
[[nodiscard]] CSSPixels calculate_main_size_from_cross_size_and_aspect_ratio(CSSPixels cross_size, CSSPixelFraction aspect_ratio) const;
[[nodiscard]] CSSPixels calculate_cross_size_from_main_size_and_aspect_ratio(CSSPixels main_size, CSSPixelFraction aspect_ratio) const;
LibWeb: Adjust flex item main size through aspect ratio if needed If there are min or max size constraints in the cross axis for a flex item that has a desired aspect ratio, we may need to adjust the main size *after* applying the cross size constraints. All the steps to achieving this aren't mentioned in the spec, but it seems that all other browsers behave this way, so we should too.
2023-05-10 10:09:29 +02:00
LibWeb: Add a debug helper to dump current state of an FFC
2022-03-13 00:03:59 +01:00
void dump_items() const;
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
struct DirectionAgnosticMargins {
LibWeb: Convert FlexFormattingContext to new pixel units
2022-11-03 17:10:17 +00:00
CSSPixels main_before { 0 };
CSSPixels main_after { 0 };
CSSPixels cross_before { 0 };
CSSPixels cross_after { 0 };
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
bool main_before_is_auto { false };
bool main_after_is_auto { false };
bool cross_before_is_auto { false };
bool cross_after_is_auto { false };
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
};
struct FlexItem {
LibGC+Everywhere: Factor out a LibGC from LibJS Resulting in a massive rename across almost everywhere! Alongside the namespace change, we now have the following names: * JS::NonnullGCPtr -> GC::Ref * JS::GCPtr -> GC::Ptr * JS::HeapFunction -> GC::Function * JS::CellImpl -> GC::Cell * JS::Handle -> GC::Root
2024-11-15 04:01:23 +13:00
GC::Ref<Box> box;
LibWeb: Cache pointer to UsedValues for each FlexItem This avoids expensive repeated LayoutState hash lookups.
2024-01-23 21:11:02 +01:00
LayoutState::UsedValues& used_values;
LibWeb: Modernize handling of the CSS flex-basis property Instead of a custom struct, use an AK::Variant for flex-basis. A flex-basis is either `content` or a CSS size value, so we don't need anything custom for that. By using a CSS size, we also avoid having to convert in and out of size in various places, simplifying the code. This finally gets rid of the "Unsupported main size for flex-basis" debug spam. :^)
2023-06-21 19:39:07 +02:00
Optional<CSS::FlexBasis> used_flex_basis {};
LibWeb: Actually check if percentage used flex basis is definite Previously, we considered all LengthPercentage values for used flex basis to be definite. This is not accurate, as percentages should only be considered definite if the reference value they resolve against is a definite size. Fix this by checking the flex container's main definite size flag.
2022-07-19 13:34:21 +02:00
bool used_flex_basis_is_definite { false };
LibWeb: Convert FlexFormattingContext to new pixel units
2022-11-03 17:10:17 +00:00
CSSPixels flex_base_size { 0 };
CSSPixels hypothetical_main_size { 0 };
CSSPixels hypothetical_cross_size { 0 };
CSSPixels hypothetical_cross_size_with_margins() { return hypothetical_cross_size + margins.cross_before + margins.cross_after + borders.cross_after + borders.cross_before + padding.cross_after + padding.cross_before; }
CSSPixels target_main_size { 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
bool frozen { false };
LibWeb: Make CSSPixels and Length use 64-bit (double) floating point This fixes a plethora of rounding problems on many websites. In the future, we may want to replace this with fixed-point arithmetic (bug #18566) for performance (and consistency with other engines), but in the meantime this makes the web look a bit better. :^) There's a lot more things that could be converted to doubles, which would reduce the amount of casting necessary in this patch. We can do that incrementally, however.
2023-05-24 10:50:57 +02:00
Optional<double> flex_factor {};
double scaled_flex_shrink_factor { 0 };
double desired_flex_fraction { 0 };
LibWeb: Store flex item used sizes as Optional<CSSPixels> This will allow us to tell whether values have been assigned by the flex layout algorithm yet.
2023-01-07 19:28:06 +01:00
LibWeb: Rewrite FFC "resolve flexible lengths" algorithm from draft spec The draft CSS-FLEXBOX-1 spec had a more detailed description of this algorithm, so let's use that as our basis for the implementation. Test by Aliaksandr. :^)
2023-03-08 21:18:35 +01:00
CSSPixels outer_hypothetical_main_size() const
{
return hypothetical_main_size + margins.main_before + margins.main_after + borders.main_before + borders.main_after + padding.main_before + padding.main_after;
}
CSSPixels outer_target_main_size() const
{
return target_main_size + margins.main_before + margins.main_after + borders.main_before + borders.main_after + padding.main_before + padding.main_after;
}
CSSPixels outer_flex_base_size() const
{
return flex_base_size + margins.main_before + margins.main_after + borders.main_before + borders.main_after + padding.main_before + padding.main_after;
}
LibWeb: Store flex item used sizes as Optional<CSSPixels> This will allow us to tell whether values have been assigned by the flex layout algorithm yet.
2023-01-07 19:28:06 +01:00
// The used main size of this flex item. Empty until determined.
Optional<CSSPixels> main_size {};
// The used cross size of this flex item. Empty until determined.
Optional<CSSPixels> cross_size {};
LibWeb: Convert FlexFormattingContext to new pixel units
2022-11-03 17:10:17 +00:00
CSSPixels main_offset { 0 };
CSSPixels 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
DirectionAgnosticMargins margins {};
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
DirectionAgnosticMargins borders {};
DirectionAgnosticMargins padding {};
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
bool is_min_violation { false };
bool is_max_violation { false };
LibWeb: Add helpers for adding margin box to flex item's content size
2022-07-25 15:02:23 +02:00
LibWeb: Convert FlexFormattingContext to new pixel units
2022-11-03 17:10:17 +00:00
CSSPixels add_main_margin_box_sizes(CSSPixels content_size) const
LibWeb: Add helpers for adding margin box to flex item's content size
2022-07-25 15:02:23 +02:00
{
return content_size + margins.main_before + margins.main_after + borders.main_before + borders.main_after + padding.main_before + padding.main_after;
}
LibWeb: Convert FlexFormattingContext to new pixel units
2022-11-03 17:10:17 +00:00
CSSPixels add_cross_margin_box_sizes(CSSPixels content_size) const
LibWeb: Add helpers for adding margin box to flex item's content size
2022-07-25 15:02:23 +02:00
{
return content_size + margins.cross_before + margins.cross_after + borders.cross_before + borders.cross_after + padding.cross_before + padding.cross_after;
}
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
};
struct FlexLine {
LibWeb: Use `FlexItem& item` consistenly in FlexFormattingContext There was a pointless mix of `FlexItem*` vs `FlexItem&` as well as `flex_item` vs `item`. Let's pick one and be consistent.
2023-03-08 17:24:35 +01:00
Vector<FlexItem&> items;
LibWeb: Convert FlexFormattingContext to new pixel units
2022-11-03 17:10:17 +00:00
CSSPixels cross_size { 0 };
LibWeb: Avoid leaking infinite remaining_free_space in FFC calculation After switching to fixed-point arithmetic in CSSPixels, it no longer supports representing infinite values, which was previously the case for remaining_free_space in FFC. Using Optional that is not empty only when value is finite to store remaining_free_space ensures that infinity is avoided in layout calculations.
2023-07-25 22:18:08 +02:00
Optional<CSSPixels> remaining_free_space;
LibWeb: Make CSSPixels and Length use 64-bit (double) floating point This fixes a plethora of rounding problems on many websites. In the future, we may want to replace this with fixed-point arithmetic (bug #18566) for performance (and consistency with other engines), but in the meantime this makes the web look a bit better. :^) There's a lot more things that could be converted to doubles, which would reduce the amount of casting necessary in this patch. We can do that incrementally, however.
2023-05-24 10:50:57 +02:00
double chosen_flex_fraction { 0 };
LibWeb: Rewrite FFC "resolve flexible lengths" algorithm from draft spec The draft CSS-FLEXBOX-1 spec had a more detailed description of this algorithm, so let's use that as our basis for the implementation. Test by Aliaksandr. :^)
2023-03-08 21:18:35 +01:00
LibWeb: Make CSSPixels and Length use 64-bit (double) floating point This fixes a plethora of rounding problems on many websites. In the future, we may want to replace this with fixed-point arithmetic (bug #18566) for performance (and consistency with other engines), but in the meantime this makes the web look a bit better. :^) There's a lot more things that could be converted to doubles, which would reduce the amount of casting necessary in this patch. We can do that incrementally, however.
2023-05-24 10:50:57 +02:00
double sum_of_flex_factor_of_unfrozen_items() const;
double sum_of_scaled_flex_shrink_factor_of_unfrozen_items() const;
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
};
LibWeb: Honor column-gap and row-gap CSS properties in flex layout This isn't actually part of CSS-FLEXBOX-1, but all major engines honor these properties in flex layout, and it's widely used on the web. There's a bug open against the flexbox spec where fantasai says the algorithm will be updated in CSS-FLEXBOX-2: https://github.com/w3c/csswg-drafts/issues/2336 I've added comments to all the places where we adjust calculations for gaps with "CSS-FLEXBOX-2" so we can find them easily. When that spec becomes available, we can add proper spec links.
2023-04-14 10:35:26 +02:00
CSSPixels main_gap() const;
CSSPixels cross_gap() const;
LibWeb: Cache pointer to UsedValues for each FlexItem This avoids expensive repeated LayoutState hash lookups.
2024-01-23 21:11:02 +01:00
[[nodiscard]] bool has_definite_main_size(LayoutState::UsedValues const&) const;
[[nodiscard]] bool has_definite_cross_size(LayoutState::UsedValues const&) const;
[[nodiscard]] bool has_definite_main_size(FlexItem const& item) const { return has_definite_main_size(item.used_values); }
[[nodiscard]] bool has_definite_cross_size(FlexItem const& item) const { return has_definite_cross_size(item.used_values); }
[[nodiscard]] CSSPixels inner_main_size(LayoutState::UsedValues const&) const;
[[nodiscard]] CSSPixels inner_cross_size(LayoutState::UsedValues const&) const;
[[nodiscard]] CSSPixels inner_main_size(FlexItem const& item) const { return inner_main_size(item.used_values); }
[[nodiscard]] CSSPixels inner_cross_size(FlexItem const& item) const { return inner_cross_size(item.used_values); }
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 has_main_min_size(Box const&) const;
bool has_cross_min_size(Box const&) const;
LibWeb: Make more FlexFormattingContext functions take FlexItem ...instead of taking the Layout::Box. This will allow us to make more nuanced decisions in those functions by having access to flex layout internal state.
2025-09-29 10:46:32 +02:00
CSSPixels specified_main_max_size(FlexItem const&) const;
CSSPixels specified_cross_max_size(FlexItem const&) 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
bool is_cross_auto(Box const&) const;
LibWeb: Make more FlexFormattingContext functions take FlexItem ...instead of taking the Layout::Box. This will allow us to make more nuanced decisions in those functions by having access to flex layout internal state.
2025-09-29 10:46:32 +02:00
CSSPixels specified_main_min_size(FlexItem const&) const;
CSSPixels specified_cross_min_size(FlexItem const&) const;
CSSPixels calculate_inner_flex_container_cross_min_size() const;
CSSPixels calculate_inner_flex_container_cross_max_size() 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
bool has_main_max_size(Box const&) const;
bool has_cross_max_size(Box const&) const;
LibWeb: Convert FlexFormattingContext to new pixel units
2022-11-03 17:10:17 +00:00
CSSPixels automatic_minimum_size(FlexItem const&) const;
CSSPixels content_based_minimum_size(FlexItem const&) const;
Optional<CSSPixels> specified_size_suggestion(FlexItem const&) const;
Optional<CSSPixels> transferred_size_suggestion(FlexItem const&) const;
CSSPixels content_size_suggestion(FlexItem const&) const;
LibWeb: Use CSS::Size for computed size and max-size values This patch changes the *computed* representation of the following CSS properties to use CSS::Size: - width, min-width, max-width - height, min-height, max-height A few things had to change in order for things to keep working, but I tried to keep the diff to a minimum. The main trouble was that `min-width` and `max-width` can't actually be `auto`, but they *can* be `none`. We previously treated `auto` as a valid value (and it behaved mostly like `none`).
2022-09-25 15:48:23 +02:00
CSS::Size const& computed_main_size(Box const&) const;
CSS::Size const& computed_main_min_size(Box const&) const;
CSS::Size const& computed_main_max_size(Box const&) const;
CSS::Size const& computed_cross_size(Box const&) const;
CSS::Size const& computed_cross_min_size(Box const&) const;
CSS::Size const& computed_cross_max_size(Box const&) const;
LibWeb: Make more FlexFormattingContext functions take FlexItem ...instead of taking the Layout::Box. This will allow us to make more nuanced decisions in those functions by having access to flex layout internal state.
2025-09-29 10:46:32 +02:00
CSSPixels get_pixel_width(FlexItem const&, CSS::Size const&) const;
CSSPixels get_pixel_height(FlexItem const&, CSS::Size const&) const;
LibWeb: Move get_pixel_{width,height} helpers into FFC class
2022-07-21 00:26:46 +02:00
LibWeb: Mark flex item cross sizes as definite when spec asks us to The CSS-FLEXBOX-1 spec gives us two situations in which flex item cross sizes should be considered definite. Both of them happen *during* flex layout, which is super finicky but it is what it is.
2022-07-20 19:06:47 +02:00
bool flex_item_is_stretched(FlexItem const&) const;
LibWeb: Convert FlexFormattingContext to new pixel units
2022-11-03 17:10:17 +00:00
void set_main_size(Box const&, CSSPixels size);
void set_cross_size(Box const&, CSSPixels size);
LibWeb: Use cached UsedValues pointer in FlexFormattingContext more
2025-02-11 14:25:13 +01:00
void set_main_size(FlexItem&, CSSPixels size);
void set_cross_size(FlexItem&, CSSPixels size);
void set_offset(FlexItem&, CSSPixels main_offset, CSSPixels cross_offset);
LibWeb: Convert FlexFormattingContext to new pixel units
2022-11-03 17:10:17 +00:00
void set_main_axis_first_margin(FlexItem&, CSSPixels margin);
void set_main_axis_second_margin(FlexItem&, CSSPixels 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: Make flexbox special definite size cases explicit The CSS-FLEXBOX-1 spec has a bunch of special cases where sizes are considered definite after reaching a specific point of the layout algorithm. Before this change, we were relying on set_content_width/height also implicitly marking those content sizes as definite. To prepare for that implicit behavior going away, this patch makes the special cases explicit.
2024-01-29 15:52:35 +01:00
void set_has_definite_main_size(FlexItem&);
void set_has_definite_cross_size(FlexItem&);
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 copy_dimensions_from_flex_items_to_boxes();
LibWeb: Move unrelated things out of FFC step 1 Setting some initial width and height on the flex container is totally unrelated to the "generate anonymous flex items" step.
2022-02-27 09:50:09 +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
void 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
LibWeb: Reorganize layout algorithms around available space This is a big and messy change, and here's the gist: - AvaliableSpace is now 2x AvailableSize (width and height) - Layout algorithms are redesigned around the idea of available space - When doing layout across nested formatting contexts, the parent context tells the child context how much space is available for the child's root box in both axes. - "Available space" replaces "containing block width" in most places. - The width and height in a box's UsedValues are considered to be definite after they're assigned to. Marking something as having definite size is no longer a separate step, This probably introduces various regressions, but the big win here is that our layout system now works with available space, just like the specs are written. Fixing issues will be much easier going forward, since you don't need to do nearly as much conversion from "spec logic" to "LibWeb logic" as you previously did.
2022-09-27 15:29:17 +02:00
void determine_available_space_for_items(AvailableSpace const&);
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: Avoid computing automatic minimum size for some flex items There's a specific (and thankfully very common!) scenario where we can actually skip calculating the automatic minimum size for flex items. In single-line (no wrapping) flex containers, if the sum of all item flex base sizes is <= the flex container's main size, we know that none of the items will be shrunk by the layout algorithm. And so for any flex item with definite main size AND automatic minimum main size, we can treat the automatic minimum size as 0.
2025-04-21 18:27:47 +02:00
void determine_flex_base_size(FlexItem&);
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
void 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
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 resolve_flexible_lengths();
LibWeb: Rename FFC::specified_axis_size() to inner_axis_size() "Specified" means something else in CSS, so let's not use this overloaded word here. These helpers return the inner main/cross size of a given box, so let's say "inner" instead.
2023-03-08 17:36:32 +01:00
void resolve_flexible_lengths_for_line(FlexLine&);
LibWeb: Move FFC layout algorithm step 6 to a separate function
2021-10-13 22:11:50 +02:00
LibWeb: Resolve cross-axis flex item margins in the common case
2022-09-28 17:23:22 +02:00
void resolve_cross_axis_auto_margins();
LibWeb: Make two passes in FFC where to support percentage min/max sizes Percentage sizes of flex items are relative to the flex container, but even when the flex container is automatically sized, we still have to support them. To make this work, we first do a pass where percentage sizes are ignored (treated as "auto", basically) in order to get a "reference" value. Then we do a second pass where percentages can be resolved against this reference value.
2022-07-22 22:02:02 +02:00
void determine_hypothetical_cross_size_of_item(FlexItem&, bool resolve_percentage_min_max_sizes);
LibWeb: Move FFC layout algorithm step 7 to a separate function
2021-10-13 22:15:16 +02:00
LibWeb: Treat cross min/max sizes better in flexbox layout For percentage cross min/max sizes that resolve against indefinite available space, we now essentially ignore them instead of resolving them to 0 at the start of layout.
2022-10-07 13:58:18 +02:00
void calculate_cross_size_of_each_flex_line();
LibWeb: Move FFC layout algorithm step 8 to a separate function
2021-10-13 22:17:33 +02:00
LibWeb: Implement basic support for align-content in flex layout This property tells us how to lay out multi-line flex containers. I implemented all modes except `space-between` and `space-around`. Those are left as FIXMEs.
2022-10-14 13:50:40 +02:00
void handle_align_content_stretch();
LibWeb: Implement static position for abspos children of flex container
2022-10-24 23:17:36 +02:00
CSS::AlignItems alignment_for_item(Box const&) const;
LibWeb: Honor `align-self` over `align-items` when non-auto on flex item
2022-07-11 23:52:36 +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
void 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: 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 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: 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 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
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 align_all_flex_lines();
LibWeb: Move FFC layout algorithm step 16 to a separate function
2021-10-13 22:25:39 +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
bool is_row_layout() const { return m_flex_direction == CSS::FlexDirection::Row || m_flex_direction == CSS::FlexDirection::RowReverse; }
LibWeb: Add spec comments to FFC layout algorithm step 5
2021-10-13 23:38:04 +02:00
bool is_single_line() const { return flex_container().computed_values().flex_wrap() == CSS::FlexWrap::Nowrap; }
LibWeb: Use reverse direction on flex containers with `rtl` direction If a flex container has `direction: rtl` set, reverse the row direction.
2024-08-10 23:13:26 +01:00
bool is_direction_reverse() const;
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 populate_specified_margins(FlexItem&, CSS::FlexDirection) const;
LibWeb: Reorganize layout algorithms around available space This is a big and messy change, and here's the gist: - AvaliableSpace is now 2x AvailableSize (width and height) - Layout algorithms are redesigned around the idea of available space - When doing layout across nested formatting contexts, the parent context tells the child context how much space is available for the child's root box in both axes. - "Available space" replaces "containing block width" in most places. - The width and height in a box's UsedValues are considered to be definite after they're assigned to. Marking something as having definite size is no longer a separate step, This probably introduces various regressions, but the big win here is that our layout system now works with available space, just like the specs are written. Fixing issues will be much easier going forward, since you don't need to do nearly as much conversion from "spec logic" to "LibWeb logic" as you previously did.
2022-09-27 15:29:17 +02:00
void determine_intrinsic_size_of_flex_container();
LibWeb: Convert FlexFormattingContext to new pixel units
2022-11-03 17:10:17 +00:00
[[nodiscard]] CSSPixels calculate_intrinsic_main_size_of_flex_container();
[[nodiscard]] CSSPixels calculate_intrinsic_cross_size_of_flex_container();
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: Convert FlexFormattingContext to new pixel units
2022-11-03 17:10:17 +00:00
[[nodiscard]] CSSPixels calculate_cross_min_content_contribution(FlexItem const&, bool resolve_percentage_min_max_sizes) const;
[[nodiscard]] CSSPixels calculate_cross_max_content_contribution(FlexItem const&, bool resolve_percentage_min_max_sizes) const;
[[nodiscard]] CSSPixels calculate_main_min_content_contribution(FlexItem const&) const;
[[nodiscard]] CSSPixels calculate_main_max_content_contribution(FlexItem const&) 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: Convert FlexFormattingContext to new pixel units
2022-11-03 17:10:17 +00:00
[[nodiscard]] CSSPixels calculate_min_content_main_size(FlexItem const&) const;
[[nodiscard]] CSSPixels calculate_max_content_main_size(FlexItem const&) const;
[[nodiscard]] CSSPixels calculate_min_content_cross_size(FlexItem const&) const;
[[nodiscard]] CSSPixels calculate_max_content_cross_size(FlexItem const&) const;
LibWeb: Add FFC helpers for getting intrinsic size of flex items
2022-07-08 12:50:04 +02:00
LibWeb: Convert FlexFormattingContext to new pixel units
2022-11-03 17:10:17 +00:00
[[nodiscard]] CSSPixels calculate_fit_content_main_size(FlexItem const&) const;
[[nodiscard]] CSSPixels calculate_fit_content_cross_size(FlexItem const&) const;
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
LibWeb: Support more kinds of indefinite widths on flex column items This stuff is pretty hairy since the specifications don't give any guidance on which widths to use when calculating the intrinsic height of flex items in a column layout. However, our old behavior of "treat anything indefinite as fit-content" was definitely not good enough, so this patch improves the situation by considering values like `min-content`, `max-content` and `fit-content` separately from `auto`, and making the whole flex layout pipeline aware of them (in the cross axis context).
2023-08-05 09:11:57 +02:00
[[nodiscard]] CSSPixels calculate_width_to_use_when_determining_intrinsic_height_of_item(FlexItem const&) const;
LibWeb: Clamp fit-content widths in flex layout to min/max-width In situations where we need a width to calculate the intrinsic height of a flex item, we use the fit-content width as a stand-in. However, we also need to clamp it to any min-width and max-width properties present.
2023-03-28 18:29:12 +02:00
LibWeb: Position abspos children of flex container after parent layout If we wait until after the parent context has laid out the flex container, abspos children are able to use the final results of the parent sizing the flex container. This makes `height:auto` work on abspos children of a flex container.
2022-07-22 16:36:17 +02:00
virtual void parent_context_did_dimension_child_root_box() override;
LibWeb: Modernize handling of the CSS flex-basis property Instead of a custom struct, use an AK::Variant for flex-basis. A flex-basis is either `content` or a CSS size value, so we don't need anything custom for that. By using a CSS size, we also avoid having to convert in and out of size in various places, simplifying the code. This finally gets rid of the "Unsupported main size for flex-basis" debug spam. :^)
2023-06-21 19:39:07 +02:00
CSS::FlexBasis used_flex_basis_for_item(FlexItem const&) const;
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
LibWeb: Rename LayoutState::NodeState => LayoutState::UsedValues This object contains all the CSS "used values" as seen during the layout process, so calling it "used values" seems appropriate. :^)
2022-07-16 23:43:48 +02:00
LayoutState::UsedValues& m_flex_container_state;
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
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
Vector<FlexLine> m_flex_lines;
Vector<FlexItem> m_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
CSS::FlexDirection m_flex_direction {};
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
LibWeb: Reorganize layout algorithms around available space This is a big and messy change, and here's the gist: - AvaliableSpace is now 2x AvailableSize (width and height) - Layout algorithms are redesigned around the idea of available space - When doing layout across nested formatting contexts, the parent context tells the child context how much space is available for the child's root box in both axes. - "Available space" replaces "containing block width" in most places. - The width and height in a box's UsedValues are considered to be definite after they're assigned to. Marking something as having definite size is no longer a separate step, This probably introduces various regressions, but the big win here is that our layout system now works with available space, just like the specs are written. Fixing issues will be much easier going forward, since you don't need to do nearly as much conversion from "spec logic" to "LibWeb logic" as you previously did.
2022-09-27 15:29:17 +02:00
struct AxisAgnosticAvailableSpace {
AvailableSize main;
AvailableSize cross;
LibWeb: Make intrinsic heights dependent on available width After speaking with fantasai at CSSWG about this, it turns out I had misunderstood intrinsic heights. I originally believed all intrinsic sizes had to be computed with no influence from the surrounding context. As it turns out, intrinsic heights *are* influenced by the available width, since it's needed to determine where lines break. The APIs for calculating min-content and max-content heights now take the available width as inputs. This instantly improves layout in many cases where we'd previously make things way too wide.
2022-10-03 23:37:38 +02:00
AvailableSpace space;
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
};
LibWeb: Reorganize layout algorithms around available space This is a big and messy change, and here's the gist: - AvaliableSpace is now 2x AvailableSize (width and height) - Layout algorithms are redesigned around the idea of available space - When doing layout across nested formatting contexts, the parent context tells the child context how much space is available for the child's root box in both axes. - "Available space" replaces "containing block width" in most places. - The width and height in a box's UsedValues are considered to be definite after they're assigned to. Marking something as having definite size is no longer a separate step, This probably introduces various regressions, but the big win here is that our layout system now works with available space, just like the specs are written. Fixing issues will be much easier going forward, since you don't need to do nearly as much conversion from "spec logic" to "LibWeb logic" as you previously did.
2022-09-27 15:29:17 +02:00
Optional<AxisAgnosticAvailableSpace> m_available_space_for_items;
LibWeb: Use available space to resolve sizes in FFC If available space is definite it should always match the size of the containing block. Therefore, there is no need to do containing block node lookup.
2024-11-09 20:42:53 +01:00
Optional<AvailableSpace> m_available_space;
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