Commit Graph

253 Commits

Author SHA1 Message Date
Andreas Kling
221650f3cd LibWeb: Mark fixed-length abspos element sizes as definite
In particular, these two interesting cases:

- The containing block of an abspos box is always definite from the
  perspective of the abspos box.

- When resolving abspos box sizes from two opposing fixed insets,
  we now mark those sizes as definite (since no layout was required
  to resolve them).
2024-02-21 17:54:05 +01:00
Aliaksandr Kalenik
aee5120078 LibWeb: Fix infinite recursion when grid has "max-width: max-content"
With this change "max-width: max-content" is treated as "none" when
the available width is also "max-content". This fix prevents a stack
overflow in the grid track size maximization algorithm by avoiding
recursive calls to calculate_max_width() when determining the maximum
grid container size.
2024-02-21 10:06:19 +01:00
Aliaksandr Kalenik
c4f49e343a LibWeb: Fix division by zero in solve_replaced_size_constraint()
Fixes crashes that occur in Discord after clicking on a direct messages
conversation.
2024-02-20 20:35:34 +01:00
Andreas Kling
80ccfc51c2 LibWeb: Use UsedValues containing block pointer in many FC helpers 2024-01-17 17:25:48 +01:00
Aliaksandr Kalenik
39abd9095e LibWeb: Return CSSPixels from calculate_inner_height()
Similar to calculate_inner_width(), let's make the caller responsible
for handling "auto" instead of returning the input height as is when
when it cannot be resolved.
2024-01-07 09:03:57 +01:00
Aliaksandr Kalenik
05a1dbeb91 LibWeb: Return CSSPixels from calculate_inner_width()
Initially, this function was made to return CSS::Length because some of
its callers were expecting it to ignore "auto" width on input and
return it as is. Instead, let's just forbid using "auto" for input
width and always return CSSPixels.
2024-01-07 09:03:57 +01:00
Aliaksandr Kalenik
2cb0039a13 LibGfx+LibWeb: Produce font cascade list in CSS font matching algorithm
According to the CSS font matching algorithm specification, it is
supposed to be executed for each glyph instead of each text run, as is
currently done. This change partially implements this by having the
font matching algorithm produce a list of fonts against which each
glyph will be tested to find its suitable font.

Now, it becomes possible to have per-glyph fallback fonts: if the
needed glyph is not present in a font, we can check the subsequent
fonts in the list.
2023-12-10 17:32:04 +01:00
Aliaksandr Kalenik
4164af2ca4 LibWeb: Do not compensate padding for abspos boxes with static position
When a box does not have a top, left, bottom, or right, there is no
need to adjust the offset for positioning relative to the padding edge,
because the box remains in the normal flow.
2023-11-15 23:44:05 +01:00
Aliaksandr Kalenik
eac7916d2c LibWeb: Use inner available space to calculate auto height of abspos
By using available_inner_space_or_constraints_from(available_space), we
ensure that the available space used to calculate the min/max content
height is constrained by the width specified for the box itself
(I know that at least GFC always expects available width to be
constrained by specified width if there is any).

This change improves layout in "Recent news" block on
https://telegram.org/
2023-11-15 11:26:14 +01:00
Tobias Christiansen
6602b1ddb1 LibWeb: Rename "position" enum to "positioning"
The postitioning enum values are used by the position CSS property.
Unfortunately, the prior naming clashes with the CSS Values-4 type
named position, which will be implemented in a later commit.
2023-10-30 10:40:30 +00:00
Shannon Booth
b603e860af LibWeb: Port CharacterData from DeprecatedString to String
The existing implementation has some pre-existing issues where it is
incorrectly assumes that byte offsets are given through the IDL instead
of UTF-16 code units. While making these changes, leave some FIXMEs for
that.
2023-09-19 10:54:07 +02:00
Zaggy1024
607a398917 LibWeb: Store computed CSS font size as CSSPixels
The value is originally set using a `CSSPixels` value converted to
double, then when it is used it is always converted back to a
`CSSPixels` again. Let's just store it as that instead.
2023-09-09 13:03:11 +02:00
Andreas Kling
c24d317d8f LibWeb: Remove some unnecessary static_casts to Layout::Box&
UBSAN flagged one of these as invalid, and since it's not even necessary
to cast here anymore, let's just not.
2023-09-04 18:22:59 +02:00
Zaggy1024
e3f693ca7c LibWeb: Resolve replaced element size constraints using aspect ratios
Some replaced elements can have intrinsic aspect ratios but no
intrinsic size. In these cases, the tentative sizes are undefined, and
can therefore sometimes be zero. However, when resolving the size
constraints, we are already guaranteed to have an intrinsic aspect
ratio, so let's use that instead to calculate the resolved sizes.
2023-09-04 12:40:17 +02:00
Zaggy1024
051f357110 LibWeb: Treat replaced size constraint resolutions as mutually exclusive
Previously, we would run through all the constraints in the spec one by
one, but if we check and resolve each constraint in the order they are
defined in the spec, only the first four will ever match.

This leads me to believe that these constraints are meant to be
mutually exclusive instead, meaning that we must check the most
specific constraints first and return upon the first resolution that
matches.
2023-09-04 12:40:17 +02:00
Zaggy1024
34c5043cbe 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-04 12:40:17 +02:00
Andreas Kling
50d72f0d8c LibWeb: Handle case where abspos flex child position depends on height
There's a particularly awkward case where the static position of an
abspos child of a flex container is dependent on its height. This can
happen when `align-items: center` is in effect, as we have to adjust
the abspos child's Y position by half of its height.

This patch solves the issue by reordering operations in the abspos
height resolution algorithm, to make sure that height is resolved
before the static position is calculated.
2023-09-03 15:44:47 +02:00
Andreas Kling
f77256fcba LibWeb: Use should_height_treat_as_auto() consistently in abspos layout 2023-09-03 15:44:47 +02:00
Zaggy1024
8852561967 LibWeb: Make use of fractions in solve_replaced_size_constraint() 2023-08-30 20:36:27 +02:00
Aliaksandr Kalenik
0fb571c1c2 LibWeb: Add Length::resolved() overload for CSSPixels
Since we always pass the px value as an argument to resolved(), we can
pass it directly as CSSPixels instead of wrapping it in Length. This
approach allows us to avoid converting to a double, resulting in fewer
precision issues.
2023-08-30 20:09:15 +02:00
MacDue
71baa8c31a LibWeb: Add CSSPixels::nearest_value_for(FloatingPoint)
This is intended to annotate conversions from unknown floating-point
values to CSSPixels, and make it more obvious the fp value will be
rounded to the nearest fixed-point value.
2023-08-26 23:53:45 +02:00
MacDue
360c0eb509 LibWeb: Remove implicit conversion from float and double to CSSPixels
In general it is not safe to convert any arbitrary floating-point value
to CSSPixels. CSSPixels has a resolution of 0.015625, which for small
values (e.g. scale factors between 0 and 1), can produce bad results
if converted to CSSPixels then scaled back up. In the worst case values
can underflow to zero and produce incorrect results.
2023-08-26 23:53:45 +02:00
Andi Gallo
bab1d09d92 LibWeb: Derive baseline from rightmost descendant
Make the existing algorithm recursive, accounting for boxes which
contain line boxes indirectly. Fixes some button alignment issues on
Wikipedia.
2023-08-23 05:24:55 +02:00
Andreas Kling
27ddfa84fa LibWeb: Accept height: {min,max,fit}-content
And treat them as "auto" for now, per CSS-SIZING-3, with a FIXME about
supporting more layout directions.

This fixes an issue on MDN where `height: max-content` was not
overriding height from non-CSS presentational hints.
2023-08-20 19:37:50 +02:00
Aliaksandr Kalenik
37bd216c52 LibWeb: Ignore % max-width if box is sized under max-content constraint
When a box is sized under max-content constraint, any percentage value
set for max-width should be considered as if it were infinite. In other
words, it should have no effect on restricting the box's width.
2023-08-18 05:08:52 +02:00
Aliaksandr Kalenik
e9a718ff88 LibWeb/Layout: Replace INFINITY with CSSPixels::min() or max() 2023-08-17 20:03:13 +02:00
Aliaksandr Kalenik
f2a15ecea7 LibWeb/Layout: Replace isfinite() with might_be_saturated()
Since we switched to using fixed-point math for CSSPixels, it cannot
represent infinite values, so we need to check if the value is
saturated instead.
2023-08-17 20:03:13 +02:00
Andreas Kling
88949b10d8 LibWeb: Make containing_block_{width,height}_for(...) take non-box nodes
There's no reason for this API to require a Layout::Box as input.
Any node that can have layout state is welcome, so this patch makes it
take NodeWithStyleAndBoxModelMetrics.
2023-08-15 16:37:11 +02:00
Aliaksandr Kalenik
4646867a9f LibWeb: Replace to_px() with to_px_or_zero() in FormattingContext
to_px() usage should be avoided because it might leak saturated
(infinite) values into layout calculations.
2023-08-12 20:06:01 +02:00
Aliaksandr Kalenik
e25b1f76e1 LibWeb: Forbid usage of indefinite width in calculate_min{max}_height
Changing `calculate_min_content_heigh()` and
`calculate_min_content_heigh()` to accept width as `CSSPixels`, instead
of `AvailableSize` that might be indefinite, makes it more explicit
that width is supposed to be known by the time height is measured.

This change has a bit of collateral damage which is rows height
calculation regression in `table/inline-table-width` that worked before
by accident.
2023-08-12 16:26:08 +02:00
Andi Gallo
3e70c1b6a3 LibWeb: Improve precision when computing size of replaced elements
Change associativity in computing of replaced element size to improve
precision of division.

Fixes vertically squashed image from Mozilla splash page MDN example.
2023-08-04 13:36:29 +02:00
Aliaksandr Kalenik
1f28fdacf0 LibWeb: Set max-width for inline child boxes after inside layout
max-width for boxes with inline children can only be applied after
inside layout is done and width of box content is known.

Fixes https://github.com/SerenityOS/serenity/issues/20235
2023-08-02 05:27:56 +02:00
Christophe Naud-Dulude
4f9f21e8fe LibWeb: Only derive baseline from children with a non-empty line box
If none of the box children have a baseline set, the bottom margin
edge of the box is used as the baseline.
2023-07-28 17:02:33 +02:00
Andreas Kling
ccf35a973f LibWeb: Derive box baseline from last child *with line boxes*
Before this change, we always derived a box's baseline from its last
child, even if the last child didn't have any line boxes inside.

This caused baselines to slip further down vertically than expected.

There are more baseline alignment issues to fix, but this one was
responsible for a fair chunk of trouble. :^)
2023-07-25 13:42:32 +02:00
Andreas Kling
ac124fbaae LibWeb: Resolve flex item percentages against used flex container sizes
Once we've resolved the used flex item width & height, we should allow
percentage flex item sizes to resolve against them instead of forcing
flex items to always treat percentages as auto while doing intrinsic
sizing layout.

Regressed in 8dd489da61.
2023-07-18 06:04:55 +02:00
Andreas Kling
db5bde01dc LibWeb: Resolve % top and bottom insets against containing block height
This makes cookie banner buttons show up on Linktree again. :^)

Regressed in fd37ad3a84
2023-07-08 10:51:12 +02:00
Sebastian Zaha
fd37ad3a84 LibWeb: Fix absolute positioning issues
Make sure the insets and margins calculated according to the spec are
not later ignored and ad-hoc recomputed in
layout_absolutely_positioned_element.

Use the static position calculation in a couple of places where the
spec (and comment) was indicating it should be used.

Fixes #19362
2023-07-08 06:13:56 +02:00
Sebastian Zaha
61fe7c230f LibWeb: Implement abspos for replaced elements
Added implementation and spec comments for sections 10.3.8 and 10.6.5,
with an implementation similar to the existing ones for non-replaced
elements.
2023-07-08 06:13:56 +02:00
Andreas Kling
3f022f4040 LibWeb: Treat non-finite containing block width as zero for percentages
Fixes an assertion when loading https://bun.sh/
2023-07-01 09:06:49 +02:00
Andreas Kling
c808f6c637 LibWeb: Don't use BFC auto height for non-BFC abspos elements
While CSS 2.2 does tell us to use the "auto height for BFC roots"
calculation when resolving auto heights for abspos elements, that
doesn't make sense for other formatting context roots, e.g flex.

In lieu of implementing the entire new absolute positioning model from
CSS-POSITION-3, this patch borrows one small nugget from it: using
fit-content height as the auto height for non-BFC-root abspos elements.
2023-06-20 13:42:31 +02:00
Aliaksandr Kalenik
ca0c2339f4 LibWeb: Use padding box of containing block to resolve % height size
From CSS-POSITION-3 <https://www.w3.org/TR/css-position-3/#def-cb>

"..the containing block is formed by the padding edge of the ancestor.."

Fixes crash on Acid2 test.
2023-06-18 20:29:40 +02:00
Andreas Kling
c374541711 LibWeb: Use correct reference for abspos elements with % height sizes
Absolutely positioned elements should have their percentage sizes
resolved against the padding box of the containing block, not the
content box.

From CSS-POSITION-3 <https://www.w3.org/TR/css-position-3/#def-cb>

"..the containing block is formed by the padding edge of the ancestor.."
2023-06-17 20:35:19 +02:00
Andreas Kling
a988241f3f LibWeb: Resolve % min-sizes against 0 while under min-content constraint
When resolving a percentage min-width or min-height size against a
containing block currently under a min-content constraint, we should act
as if the containing block has zero size in that axis.
2023-06-16 14:39:03 +02:00
Andreas Kling
3a11b55286 LibWeb: Treat % max-width as none when containing block size indefinite
This is technically "undefined behavior" per CSS 2.2, but it seems
sensible to mirror the behavior of max-height in the same situation.
It also appears to match how other engines behave.

Fixes #19242
2023-06-14 20:12:02 +02:00
Andreas Kling
43e1343abf LibWeb: Treat % max-height as none when containing block size indefinite
Fixes #19371
2023-06-14 17:08:15 +02:00
Andreas Kling
b6f3369b66 LibWeb: Fix spelling of non_anonymous_containing_block() 2023-06-14 17:08:15 +02:00
Andreas Kling
41da9a4231 LibWeb: Resolve auto margins on abspos elements in more cases
Specifically, we now handle cases where all three of `left`, `width`
and `right` are non-`auto`.
2023-06-13 17:47:50 +02:00
Andreas Kling
434df52b91 LibWeb: Make stretch-fit return 0 when the available size is indefinite
The spec says the result of this algorithm is undefined in such cases,
and it appears that other engines yield a zero size.

More importantly, this prevents us from leaking a non-finite value into
the layout tree.
2023-06-13 16:14:45 +02:00
Aliaksandr Kalenik
147c3b3d97 LibWeb+WebContent: Forbid access to underlying type of CSSPixels
Although DistinctNumeric, which is supposed to abstract the underlying
type, was used to represent CSSPixels, we have a whole bunch of places
in the layout code that assume CSSPixels::value() returns a
floating-point type. This assumption makes it difficult to replace the
underlying type in CSSPixels with a non-floating type.

To make it easier to transition CSSPixels to fixed-point math, one step
we can take is to prevent access to the underlying type using value()
and instead use explicit conversions with the to_float(), to_double(),
and to_int() methods.
2023-06-13 06:08:27 +02:00
Sam Atkins
1051624084 LibWeb: Obey CSS aspect-ratio property during layout
Calculate a "preferred aspect ratio" based on the value of
`aspect-ratio` and the presence of a natural aspect ratio, and use that
in layout.

This is by no means complete or perfect, but we do now apply the given
aspect-ratio to things.

The spec is a bit vague, just saying to calculate sizes for
aspect-ratio'ed boxes the same as you would for replaced elements. My
naive solution here is to find everywhere we were checking for a
ReplacedBox, and then also accept a regular Box with a preferred aspect
ratio. This gets us pretty far. :^)

https://www.w3.org/TR/css-sizing-4/#aspect-ratio-minimum is not at all
implemented.
2023-06-09 20:37:51 +02:00