Commit graph

241 commits

Author SHA1 Message Date
FalseHonesty
2285dfb80e LibWeb: Resolve block max-width percentage against containing block 2023-10-29 19:35:02 +01:00
Ali Mohammad Pur
aeee98b3a1 AK+Everywhere: Remove the null state of DeprecatedString
This commit removes DeprecatedString's "null" state, and replaces all
its users with one of the following:
- A normal, empty DeprecatedString
- Optional<DeprecatedString>

Note that null states of DeprecatedFlyString/StringView/etc are *not*
affected by this commit. However, DeprecatedString::empty() is now
considered equal to a null StringView.
2023-10-13 18:33:21 +03:30
Aliaksandr Kalenik
06d05b3c55 LibWeb: Boxes that establish FFC or GFC should avoid overlapping floats
Before, we only ensured that boxes establishing BFC did not overlap
with floats because that is what CSS 2.2 specification says. However,
we should also apply the same for boxes establishing FFC or GFC as this
aligns with the behavior of other browsers.

Fixes https://github.com/SerenityOS/serenity/issues/21095
2023-09-22 16:48:28 +02:00
Aliaksandr Kalenik
d1e542999c LibWeb: Ensure preceding offset is non-negative in float_box()
When calculating the edge offset of the next floating item based on the
offset of the preceding floating item, we need to ensure that the
preceding offset is always > 0. This isn't explicitly written in the
spec, but all other popular engines do that.

Fixes https://github.com/SerenityOS/serenity/issues/21023
2023-09-12 12:11:53 +02:00
Aliaksandr Kalenik
81ddad3fcf LibWeb: Allow block level boxes to be floated and have clearance
Before, we completely ignored clearance for block-level boxes if they
were floated. This was incorrect because it is valid for a block-level
box to be floated and still have clearance. However, unlike clearance
on normal flow boxes, clearance on floating boxes does not affect the
y-position of subsequent normal flow boxes. Instead, it pushes the
box's position to the very beginning of an edge.

Work towards https://github.com/SerenityOS/serenity/issues/21023
2023-09-12 12:11:53 +02:00
Aliaksandr Kalenik
a482166087 LibWeb: Bring html element height calculation closer to the spec
Previously we always set the height of the HTML element equal to the
viewport height but now this will only happen in quirks mode as it is
intended. Otherwise the html element height will be computed as auto.
2023-08-31 21:43:58 +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
Aliaksandr Kalenik
0060fe3095 LibWeb: Account for float intrusions in list marker x offset 2023-08-26 19:07:56 +02:00
Andi Gallo
b6f9f4c28c LibWeb: Fix handling of max-content containing block for floating box
Fixes layout of page toolbar on Wikipedia.
2023-08-13 14:43:41 +02:00
Andi Gallo
97ba1ff1f7 LibWeb: Remove unused variable from compute_height method 2023-08-13 14:43:41 +02:00
Aliaksandr Kalenik
041d02cbb1 LibWeb: Replace to_px() with to_px_or_zero() in BlockFormattingContext
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
Aliaksandr Kalenik
9101c8d079 LibWeb: Use available space to resolve table container width
Using avilable space directly while resolving table container width
allows to avoid assigning it to table wrapper box content width which
sometimes involves infinite (saturated) values.

Also this allows to get rid of set_max_content_width() which is a hack
that allows to bypass set_content_width() to assign infinite
(saturated) width to a box.

Closes https://github.com/SerenityOS/serenity/issues/19521
2023-08-11 19:36:19 +02:00
Aliaksandr Kalenik
5003b1a421 LibWeb: Use automatic width to resolve min/max-width for inline boxes 2023-08-10 05:10:44 +02:00
Aliaksandr Kalenik
b34b0a1cd3 LibWeb: Use root content width as automatic width if children inline
Returning greatest_child_width() from automatic_content_width() in BFC
if root box children are inline and there are min/max-width that caused
width to be changed after IFC layout while content_width should be
always set to correct value by layout_inline_children() regardless of
layout mode.
2023-08-10 05:10:44 +02:00
Aliaksandr Kalenik
d32bf4cd41 LibWeb: Set min-width for inline child boxes after inside layout
min-width for boxes with inline children can only be applied after
inside layout is done and width of box content is known.
2023-08-05 09:25:24 +02:00
Karol Kosek
5b1aa2d55e LibWeb: Don't collapse boxes with CSS clear property set
I'm not sure if this is exactly correct, the link to CSS2 spec above
says something that clearance cannot separate boxes, but I'm not sure if
I understood it correctly or if I've done it in the right place.

However, this change fixes our block-and-inline/clearfix.html test again
(was regressed in previous commit).
2023-08-02 17:35:54 +02:00
Karol Kosek
142d498f14 LibWeb: Include anonymous boxes with no lines into computing BFC height
Pseudo-elements like ::before and ::after were discarded when their
content property was an empty string (ignoring whitespace), because they
are anonymous containers with no lines.

Our previous way around it was to add an empty line box (see b062a0fb7c)
however it didn't actually work for cases described in the previous
commit.

This makes avatars and cover arts square on last.fm and "fixes" the test
css-pseudo-element-should-not-be-affected-by-presentational-hints.html.
Unfortunately, this also regresses on block-and-inline/clearfix.html,
but that hopefully will be handled in subsequent commit.
2023-08-02 17:35:54 +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
Andi Gallo
62f15f94d2 LibWeb: Better handling of floating boxes from inline formatting context
Handle the clear property for floating boxes and add tracking for
vertical clearence within an inline formatting context.
2023-08-01 07:38:19 +02:00
Andi Gallo
6a17a30e2e LibWeb: Handle overlapping floating box and left margin
Allow the left margin of a box which creates a block formatting context
to overlap with left floating boxes which are siblings in the document
tree.

Fixes #20233 and the comment layout on https://lobste.rs.
2023-07-28 12:44:09 +02:00
Andi Gallo
b12820c967 LibWeb: Handle float clearing specified on line break elements 2023-07-26 08:37:16 +02:00
Emil Militzer
bf3144fcff LibWeb: Prevent max-width expanding the width 2023-07-12 11:44:57 +02:00
Andreas Kling
c83ae729d2 LibWeb: Resolve used insets for floating elements
This makes the game carousel work on https://null.com/ :^)
2023-07-04 06:43:53 +02:00
Sebastian Zaha
553694679e LibWeb: Fix alternating-sides float positioning
The "y" check for when to reset float side positioning was comparing an
offset that included the border, while the offset of the other side does
not.
2023-07-02 18:43:20 +02:00
Andi Gallo
8b34af816e LibWeb: Report border box width for tables in a block
For the containing block, table borders are opaque and have to be
accounted when computing the table width since they use available space.
2023-06-25 08:13:04 +02:00
Luke Wilde
f4446cdf8c LibWeb: Resolve padding against 0 and not inf for indefinite width more
In particular, in BFC:
- Non-floating, non-replaced elements
- Floating, non-replaced elements
- Floating, replaced elements

The first two regressed in 1d76126abe

The third one seems to have been introduced by this regression, as it
was seemingly copied from compute_width_for_floating_box in
7f9ede07bc
2023-06-21 06:13:05 +02:00
Andi Gallo
f154446a9f LibWeb: Skip separate height computation for tables
With multi-line text cells, we don't reliably know the height would stay
the same as the one set by the independent format context run. In such
situations, we can end up with a table box which is sized inconsistently
with the grid boxes of the table due to differences in line breaks.
2023-06-18 20:55:06 +02:00
Andi Gallo
c5eeb303d8 LibWeb: Don't cap used width by available width from a constraint
In compute_table_box_width_inside_table_wrapper, we should only consider
available_width when it's valid. Values which come from {min,
max}-content constraints aren't meaningful and shouldn't be considered
for the cap.
2023-06-18 08:27:24 +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
kamp
4ac7c41483 LibWeb: Add -libweb-left and -libweb-right text-align values
These ensure that block level elements are also left and right aligned
respectively on top of the regular text alignment, matching
-libweb-center.
2023-06-16 06:55:21 +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
Andi Gallo
ce186dca70 LibWeb: Fix the x coordinate of a block after a float
The margin from the containing blocks shouldn't be included in the
amount by which we increment x after a float was places. That coordinate
should be relative to the containing block.

Fixes the comments layout on https://lobste.rs.
2023-06-14 08:30:22 +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
Andi Gallo
75e87c32f2 LibWeb: Fix table width algorithm when available space is a constraint
Handle available space more carefully when computing a table width, in
order to avoid creating a definite infinite width when available space
width is max-content, as it's the case in calculate_max_content_width.
The constraint is thus correctly propagated by the time we cache the
computed value, which was previously rejected by the hash function due
to being definite but infinite instead of max-content.
2023-06-12 17:51:00 +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
Andreas Kling
89ba00304c LibWeb: Account for negative margins when calculating float intrusion
If a box has a negative margin-left, it may have a negative effective
offset within its parent BFC root coordinate system.

We can account for this when calculating the amount of left-side float
intrusion by flooring the X offset at 0.
2023-06-04 18:14:12 +02:00
Simon Wanner
870bcd56df LibWeb: Make disclosure marker bounds square
This makes sure we actually render an equilateral triangle
inside a square.
2023-06-03 05:54:49 +02:00
Simon Wanner
293ece2292 LibWeb: Support list-style-position
This moves the ::marker inside of <summary> actually inside. :^)
2023-06-03 05:54:49 +02:00
Andreas Kling
caa491b72a LibWeb: Measure the overflow for all scroll containers
Instead of just measuring the layout viewport, we now measure overflow
in every box that is a scroll container.

This has the side effect of no longer creating paintables for layout
boxes that didn't participate in layout. (For example, empty/anonymous
boxes that were ignored by flex itemization.)

Such boxes are now marked as "(not painted)" in the layout tree dumps,
as they have no paintable to dump geometry from.
2023-06-01 13:33:35 +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
Andi Gallo
7f9ede07bc LibWeb: Set margin, padding and border for replaced boxes
Separating the paths for replaced and non-replaced floating boxes lost
the logic for margin, padding and border which was done by
compute_width_for_floating_box. Set them the same way as we do for
block-level replaced elements, per the specification.
2023-05-30 10:09:47 +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
Andi Gallo
1e526af430 LibWeb: Fix width calculation for floating replaced elements
The path for floating, replaced elements must not fall through to the
path taken for floating, non-replaced elements. The former works like
inline replaced elements, while the latter uses a completely different
algorithm which doesn't account for intrinsic ratio. Falling through
overrides the correct value computed by the former.

Fixes #19061.
2023-05-26 21:20:56 +02:00
Aliaksandr Kalenik
7cc20f4cb5 LibWeb: Reset margin collapsing state only if box indeed add clearance
This fixes the issue when margin collapsing state was always reset if
a box has clear property not equal to none even if it does not actually
introduce clearance.
2023-05-26 18:11:35 +02:00
Aliaksandr Kalenik
202b24584f LibWeb: Sum horizontal margins to calculate space used by floats
This fixes the issue where max margin is used to find offset of
floating box although horizonal margins do not collapse so they need
to be summed instead.
2023-05-24 18:58:42 +02:00