Commit graph

90 commits

Author SHA1 Message Date
Andreas Kling
7953bd8391 LibWeb: Implement "transferred size suggestion" for flex items 2022-06-22 18:36:17 +02:00
Andreas Kling
75e8b1305d 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
Andreas Kling
99e96f951f LibWeb: Implement (some of) "automatic minimum size" for flex items 2022-06-21 21:06:19 +02:00
Andreas Kling
c8240e31a1 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 11:31:08 +02:00
Enver Balalic
747f347b75 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 19:01:14 +02:00
Enver Balalic
8b4d09932a 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 21:16:47 +02:00
Enver Balalic
4ecc695a65 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 17:43:47 +02:00
Andreas Kling
bd94f2c4c8 LibWeb: Add a debug helper to dump current state of an FFC 2022-03-13 00:04:51 +01:00
Andreas Kling
8c91e8016c 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-13 00:04:51 +01:00
Andreas Kling
e4eb6d4f1f 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-13 00:04:51 +01:00
Andreas Kling
5c8e7217f7 LibWeb: Remove ad-hoc setup step from FFC layout algorithm
This step will not be necessary when we implement indefinite size
calculations more correctly.
2022-03-13 00:04:51 +01:00
Andreas Kling
a3a10b2379 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-03-13 00:04:51 +01:00
Andreas Kling
1dfb3d555c LibWeb: Remove FFC::cross_size_is_absolute_or_resolved_nicely()
This is now answered authoritatively by Layout::Box itself.
2022-03-13 00:04:51 +01:00
Andreas Kling
1ce1af5d8b 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-03-13 00:04:51 +01:00
Andreas Kling
b904bff838 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-03-13 00:04:51 +01:00
Andreas Kling
7c5b578df9 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-03-13 00:04:51 +01:00
Andreas Kling
c9700e100e 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-21 18:35:12 +01:00
Andreas Kling
561612f219 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-21 18:35:12 +01:00
Ben Wiederhake
dee26ca5cd LibWeb: Add missing headers 2021-10-20 09:20:18 +01:00
Andreas Kling
1d0c4a07ff LibWeb: Add spec comments to FFC layout algorithm step 5 2021-10-13 23:56:26 +02:00
Andreas Kling
d37e5dc64c 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 23:56:26 +02:00
Andreas Kling
1580c59f39 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 23:56:26 +02:00
Andreas Kling
9359df4be9 LibWeb: Move FFC layout algorithm step 16 to a separate function 2021-10-13 23:56:26 +02:00
Andreas Kling
f401794d23 LibWeb: Move FFC layout algorithm step 15 to a separate function 2021-10-13 23:56:26 +02:00
Andreas Kling
6d433c99f4 LibWeb: Move FFC layout algorithm step 14 to a separate function 2021-10-13 23:56:26 +02:00
Andreas Kling
e590e17b8a LibWeb: Move FFC layout algorithm step 12 to a separate function 2021-10-13 23:56:26 +02:00
Andreas Kling
176f1ad214 LibWeb: Move FFC layout algorithm step 11 to a separate function 2021-10-13 23:56:26 +02:00
Andreas Kling
8f027b4792 LibWeb: Move FFC layout algorithm step 8 to a separate function 2021-10-13 23:56:26 +02:00
Andreas Kling
3402584646 LibWeb: Move FFC layout algorithm step 7 to a separate function 2021-10-13 23:56:26 +02:00
Andreas Kling
0c0df78030 LibWeb: Move FFC layout algorithm step 6 to a separate function 2021-10-13 23:56:26 +02:00
Andreas Kling
0fd25fcbbc LibWeb: Move FFC layout algorithm step 5 to a separate function 2021-10-13 23:56:26 +02:00
Andreas Kling
fa7bbc602d LibWeb: Move FFC layout algorithm step 4 to a separate function 2021-10-13 23:56:26 +02:00
Andreas Kling
3375953918 LibWeb: Move FFC layout algorithm step 3 to a separate function 2021-10-13 23:56:26 +02:00
Andreas Kling
c19358e157 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 23:56:26 +02:00
Andreas Kling
cd6b97ab9e LibWeb: Turn FlexFormattingContext helper lambdas into member functions
Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 23:56:26 +02:00
Andreas Kling
674b6f5385 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 23:56:26 +02:00
Andreas Kling
ca02d112a5 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 23:56:26 +02:00
Sam Atkins
2844f89a83 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 13:55:25 +02:00
Brian Gianforcaro
1682f0b760 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 11:22:27 +02:00
Andreas Kling
fd7920fa8f 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 20:20:13 +01:00