Commit graph

226 commits

Author SHA1 Message Date
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
Sam Atkins
84e7216603 LibWeb: Move "natural size" concept into Layout::Box
Having this here instead of in ReplacedBox means we can access it when
figuring out what the "preferred aspect ratio" is.

There's some inconsistency between specs about what this is called, but
they're moving towards referring to this as "natural width/height/
aspect-ratio", so let's copy that terminology.
2023-06-09 20:37:51 +02:00
Andreas Kling
3365a1e034 LibWeb: Resolve cyclic % against 0 when available size is min-content
This fixes an issue where replaced elements with cyclic percentage width
would make an oversized min-content contribution to its container.
2023-06-08 13:54:11 +02:00
Andreas Kling
c197fb4037 LibWeb: Take box-sizing into account when sizing replaced elements
This fixes an issue where images with padding and/or border did not have
their size adjusted for `border-box`, thereby becoming larger than
intended by the author.
2023-06-05 09:00:00 +02:00
Andreas Kling
4fed7beb7b LibWeb: Make solve_replaced_size_constraint() into FormattingContext 2023-05-31 11:38:05 +02:00
Andreas Kling
42470d837e LibWeb: Move layout box rect helpers into FormattingContext
These are only used during layout, and always within formatting context
code, so we might as well put them in FormattingContext and avoid having
to pass the LayoutState around all the time.
2023-05-31 11:38:05 +02:00
Andreas Kling
4f08fcde29 LibWeb: Remove unnecessary static formatting context functions
At one point in the past, we had some functions that were called across
different formatting context types, which necessitated making them
static and taking the LayoutState as a parameter.

In all cases, those functions were used to do incorrect hacks, all of
which we've replaced with more correct solutions. :^)
2023-05-31 11:38:05 +02:00
Aliaksandr Kalenik
787f2d2a10 LibWeb: Remove Layout::TableCellBox
Special box types for inner table boxes might conflict with special
types for <button>, <input> or <label>.
2023-05-29 21:36:17 +02:00
Andreas Kling
af004ff0ef LibWeb: Support min-content for width, min-width and max-width
We're gonna need to handle this in many more places, this patch only
adds it to calculate_inner_width().
2023-05-29 21:29:25 +02:00
Andreas Kling
97c510329c LibWeb: Support max-content for width, min-width and max-width
We're gonna need to handle this in many more places, this patch only
adds it to calculate_inner_width().
2023-05-29 21:29:25 +02:00
Aliaksandr Kalenik
258f3ea952 LibWeb: Remove Layout::TableBox
Solves conflict in layout tree "type system" when elements <label> (or
<button>) can't have `display: table` because Box can't be
Layout::Label (or Layout::ButtonBox) and Layout::TableBox at the same
time.
2023-05-29 14:12:29 +02:00
Andreas Kling
1bb4e5c428 LibWeb: Support fit-content width for block-level boxes 2023-05-27 05:47:54 +02:00
Andreas Kling
299775345d LibWeb: Allow calculating intrinsic sizes of non-FC-roots
In order to support intrinsic size keywords (such as fit-content), we
need to be able to calculate the intrinsic sizes of any element, not
just those that form their own formatting context.

When a non-FC-root element is passed to calculate_some_intrinsic_size(),
we now create a synthetic BFC to handle sizing of them.
2023-05-27 05:47:54 +02:00
Andi Gallo
5cec517153 LibWeb: Get reference height from closest non-anonymous ancestor
Ignore anonymous block boxes when resolving percentage weights that
would refer to them, per the CSS 2 visual formatting model
specification. This fixes the case when we create an anonymous block
between an image which uses a percentage height relative to a parent
which specifies a definite height.

Fixes #19052.
2023-05-26 14:53:53 +02:00
Andreas Kling
655d9d1462 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 14:40:35 +02:00
Jelle Raaijmakers
f391ccfe53 LibGfx+Everywhere: Change Gfx::Rect to be endpoint exclusive
Previously, calling `.right()` on a `Gfx::Rect` would return the last
column's coordinate still inside the rectangle, or `left + width - 1`.
This is called 'endpoint inclusive' and does not make a lot of sense for
`Gfx::Rect<float>` where a rectangle of width 5 at position (0, 0) would
return 4 as its right side. This same problem exists for `.bottom()`.

This changes `Gfx::Rect` to be endpoint exclusive, which gives us the
nice property that `width = right - left` and `height = bottom - top`.
It enables us to treat `Gfx::Rect<int>` and `Gfx::Rect<float>` exactly
the same.

All users of `Gfx::Rect` have been updated accordingly.
2023-05-23 12:35:42 +02:00
Andreas Kling
f0560fd087 LibWeb: Support <svg> elements with display: block
There are a couple of things that went into this:

- We now calculate the intrinsic width/height and aspect ratio of <svg>
  elements based on the spec algorithm instead of our previous ad-hoc
  guesswork solution.

- Replaced elements with automatic size and intrinsic aspect ratio but
  no intrinsic dimensions are now sized with the stretch-fit width
  formula.

- We take care to assign both used width and used height to <svg>
  elements before running their SVG formatting contexts. This ensures
  that the inside SVG content is laid out with knowledge of its
  viewport geometry.

- We avoid infinite recursion in tentative_height_for_replaced_element()
  by using the already-calculated used width instead of calling the
  function that calculates the used width (since that may call us right
  back again).
2023-05-20 08:49:42 +02:00
Andi Gallo
9a6a635e51 LibWeb: Fix for absolutely positioned elements with specified height
Use inner height since the paintable adds padding back.

Fixes #18842.
2023-05-16 14:34:53 +02:00
MacDue
1012947a30 LibWeb: Use .to_px_or_zero() in tentative_height_for_replaced_element()
If just .to_px() is used the height can end up as the float `inf` or
`nan`. This caused an OOM when loading Polygon as this `inf` would
become a `nan` and propagate to the SVG painting, which then attempts
to draw a path with nan control points, which would make the
Gfx::Painter infinitely split the path till it OOM'd.
2023-05-12 05:37:44 +02:00
Andreas Kling
197efc8985 LibWeb: Improve handling of min/max constraint violations on images
Instead of bailing after resolving one violated constraint, we have to
continue down the list of remaining constraints.

We now also call the constraint solver for all replaced elements with
"auto" for both width and height.

Co-authored-by: 0GreenClover0 <clovers02123@gmail.com>
2023-05-09 12:11:28 +02:00
Andreas Kling
90b21890c5 LibWeb: Remove dead code in compute_width_for_replaced_element() 2023-05-09 12:11:28 +02:00
Andreas Kling
fc3c3aef22 LibWeb: Enforce min/max height constraints on abspos replaced boxes
Fixes #18658
2023-05-07 06:28:47 +02:00
Andreas Kling
6ccb77a9b8 LibWeb: Stop using weird Length::resolved() in {Block,}FormattingContext 2023-05-06 21:14:38 +02:00
Andreas Kling
07815dacf8 LibWeb: Don't use weird resolved() when calculating abspos box height 2023-05-06 21:14:38 +02:00
Andreas Kling
7eb9e730e0 LibWeb: Remove unused variable in FormattingContext 2023-05-06 21:14:38 +02:00
Andreas Kling
4699365a64 LibWeb: Stop using weird resolved() in calculate_inner_{width,height}() 2023-05-06 21:14:38 +02:00
Andreas Kling
452a527ff3 LibWeb: Don't use weird resolved() for insets in FormattingContext 2023-05-06 21:14:38 +02:00
Andreas Kling
ca1fa5f748 LibWeb: Use the new to_px() helpers in CSS, SVG and layout code
There should be no behavior change from this, only slightly less
verbosity. :^)
2023-05-06 18:41:34 +02:00