Commit graph

233 commits

Author SHA1 Message Date
Tobias Christiansen
9aa720e83e LibWeb: Flexbox: Assume container size before layouting children
Before layouting the children of a flex container we now either assume
the parent's size or the specified size of the container.
2021-10-11 20:16:53 +02:00
Tobias Christiansen
01a716d529 LibWeb: Flexbox: Use right margins when direction is column
Previously both branches of the if were the same which is obviously not
correct.
2021-10-11 19:29:10 +02:00
Andreas Kling
f73aa8e2bd LibWeb: Move line boxes from Layout::Box to BlockContainer
Per the spec, only a BlockContainer" can have line boxes, so let's not
clutter up every Layout::Box with line boxes.

This also allows us to establish an invariant that BFC and IFC always
operate on a Layout::BlockContainer.

Note that if BlockContainer has all block-level children, its line boxes
are not used for anything. They are only used in the all inline-level
children scenario.
2021-10-06 21:53:25 +02:00
Andreas Kling
c4826eae4f 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:10:36 +02:00
Tobias Christiansen
0c0951d2ce LibWeb: Flexbox: Don't outgrow parent in main axis when using wrap 2021-10-04 18:54:52 +02:00
Tobias Christiansen
6102a486ee LibWeb: Flexbox: Collect empty inline-block flex children
A flex-child that was display:inline-block but also had no text inside
of it was previously skipped.
2021-10-04 18:54:52 +02:00
Tobias Christiansen
873e95cb6a LibWeb: Flexbox: Care more about cross-axis margins
Auto margins are still not supported at all, but this is a good start
into supporting margins on flex items.
The way cross-before (top for row, left for column) is handled is very
naive.
2021-10-04 13:59:28 +02:00
Tobias Christiansen
9af85881f5 LibWeb: Flexbox: Take parents' specified main size into account
Previously, if the parent of the container had a definite main size, it
would've been disregarded when calculating the main size of the
container if it had no definite size and neither min- nor max-main-size
constraints.
This patch fixes that behavior by additionally checking whether the main
size is not only not constrained but also infinite.
2021-10-04 13:35:36 +02:00
Tobias Christiansen
1496ad0605 LibWeb: Flexbox: Catch zero flex-basis and use width instead
A flex-basis of zero doesn't actually mean that the preferred size of
the particular Box is 0. It means that the Box should take the least
amount of space possible while still accomodating the content inside.

We catch and circumvent this now right when the flex-basis property gets
read for the FlexFormattingContext.

This isn't mentioned anywhere in the seemingly relevant portions of the
spec, however thanks to this answer https://stackoverflow.com/a/47579078
(which is not entirely correct about width either) lead to the behavior
that is wanted and used by other Browsers.
2021-10-01 20:16:58 +02:00
Tobias Christiansen
33a9f908a6 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:52:41 +02:00
Tobias Christiansen
4560a8b83f 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 17:48:11 +02:00
Tobias Christiansen
79c2762a0d LibWeb: Flexbox: Use maximum size of container as available size
This previously wouldn't work well with flex-grow.
2021-09-19 13:07:53 +02:00
Tobias Christiansen
d104885757 LibWeb: Flexbox: Assume Block when finding max main size of flex-column
This is a hack, but it seems to do quite okay.

What we should do is to find the largest size the Box could want in its
main axis. To do that we have to layout the Box according to the needed
LayoutMode. For flex-rows we do as requested and try to make the Box as
wide as we want.
However, for flex-columns we simply assume the Box is a Block and we
calculate their height according to this.
2021-09-18 15:50:47 +02:00
Tobias Christiansen
2f891fd4b8 LibWeb: Flexbox: Take parent's width in the flex container for layouting
If our parent in the FlexFormattingContext also was a flex-container, we
didn't give our children any meaningful width to play with into
layout_inside(), which resulted in way too narrow layouting.
Now the width of the parent gets borrowed if the own width isn't
specified.
2021-09-17 23:51:03 +02:00
Tobias Christiansen
6c15eeb367 LibWeb: Flexbox: Somewhat suppport "align-items"
There probably are a lot of edge cases missing but this moves us forward
at least a bit.
2021-09-15 22:28:28 +02:00
Tobias Christiansen
67bf553fad LibWeb: Flexbox: Make step 11 of the layout algorithm more align aware 2021-09-15 22:28:28 +02:00
Sam Atkins
ee671a20cc LibWeb: Make flex-box ignore out-of-flow child boxes
Previously, out-of-flow children still took up space inside a flex-box
container, leaving an odd gap. Now they don't! :^)
2021-09-15 13:55:25 +02:00
Tobias Christiansen
fad825e94e LibWeb: Flexbox: Avoid division by zero
This is not a good thing, one should not divide by zero! :^)
2021-09-14 22:52:48 +02:00
Tobias Christiansen
85af2ac450 LibWeb: Flexbox: Change the name of a variable to correspond to spec
The spec used two different names for the same thing, and it was
confusing to read the spec on the one side and have the other name in
the code.
2021-09-14 22:52:48 +02:00
Tobias Christiansen
15b61ce143 LibWeb: Flexbox: Resolve relative size of flex-items more correctly
This is still very much not the right thing to do, but at least
relatively sized flex-items get the right size.
2021-09-14 22:52:48 +02:00
Tobias Christiansen
416559414c LibWeb: Use right dimension when positioning flex-items
Previously the cross-size was used to determine the position along the
main axis which is obviously wrong.
2021-09-13 21:20:35 +01:00
Tobias Christiansen
1d47ec380f LibWeb: FlexBox: Use correct source when querying for the main size
This was an error in understanding what calculated_values are and that
those are not what is wanted when getting the main available size of the
box in the FlexFormattingContext.
The calculation around the size calculation is still a bit wonky, but
this is definietly better.
2021-09-13 21:37:16 +02:00
Andreas Kling
e91edcaa28 LibWeb: Rename InitialContainingBlockBox => InitialContainingBlock
The "Box" suffix added nothing here.
2021-09-08 11:27:46 +02:00
Tobias Christiansen
2a77abf85e Everywhere: Use tobyase@serenityos.org for my copyright headers 2021-08-09 21:43:05 +02:00
Tobias Christiansen
833936f3ec LibWeb: Add auto as a recognized argument of flex-basis
There isn't actually any special treatment of this over 'content' in
the FlexFormattingContext, for now both are treated the same.
This fixes #9225
2021-08-07 15:21:34 +02:00
Tobias Christiansen
14640692b7 LibWeb: Use Length::resolved() in FlexFormattingContext
It brew it's own tea resolving undefined and percentages. Let's use the
API already in place rather to keep it flexible.
2021-07-24 03:02:07 +04:30
Tobias Christiansen
439d955471 LibWeb: Implement justify-content for the FlexFormattingContext
This patch implements the algorithm for placing flex-items on a line
according to the specified justify-content property.
2021-07-19 18:47:09 +04:30
Daniel Bertalan
c6fafd3e90 AK+Userland: Add generic AK::abs() function and use it
Previously, in LibGFX's `Point` class, calculated distances were passed
to the integer `abs` function, even if the stored type was a float. This
caused the value to unexpectedly be truncated. Luckily, this API was not
used with floating point types, but that can change in the future, so
why not fix it now :^)

Since we are in C++, we can use function overloading to make things
easy, and to automatically use the right version.

This is even better than the LibC/LibM functions, as using a bit of
hackery, they are able to be constant-evaluated. They use compiler
intrinsics, so they do not depend on external code and the compiler can
emit the most optimized code by default.

Since we aren't using the C++ standard library's trick of importing
everything into the `AK` namespace, this `abs` function cannot be
exported to the global namespace, as the names would clash.
2021-07-08 10:11:00 +02:00
Tobias Christiansen
31534055e4 LibWeb: Implement FlexBox Layout Algorithm 2021-06-06 01:46:06 +04:30
Tobias Christiansen
7f81c8fba2 LibWeb: LayoutNodes know whether they are flex-items
This is useful for debugging when dumping the layout tree.
2021-06-06 01:46:06 +04:30
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
93831ef456 LibWeb: Very basic support for CSS flex-direction
The FFC now supports both vertical and horizontal flex layout, based on
the flex-direction property. It's still extremely naive, but at least
now you can be naive in two directions! :^)

This implementation of flexbox is going to take a lot of work, but at
least now we've gotten started.
2021-01-18 20:20:24 +01: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