Commit graph

626 commits

Author SHA1 Message Date
Jelle Raaijmakers
c8d24d4966 LibWeb: Correctly position absolute inline boxes in last line
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
If we were calculating the static position for an absolutely positioned
inline box that resides in the last line of its containing block, we
would not have yet provided the fragments in that line with their
final positions. Additionally, we would always move the box beneath the
fragment, which was incorrect.

Fixes #5867.
2025-08-28 13:45:37 +02:00
Jelle Raaijmakers
349fdd9f47 LibWeb: Explicitly update LineBuilder's last line at end of IFC run
Currently we're relying on LineBuilder's destructor to handle updating
the last line, if required. In order to fix an issue with our absolute
positioning code, we need to be able to update the last line earlier
than that. Remove the destructor and replace it with an explicit call to
LineBuilder::update_last_line().

No functional changes.
2025-08-28 13:45:37 +02:00
Jelle Raaijmakers
90bc805cb0 LibWeb: Simplify UsedValues::static_position()
No functional changes.
2025-08-28 13:45:37 +02:00
Tim Ledbetter
a87a9156d5 LibWeb/CSS: Parse the paint-order property 2025-08-28 10:31:09 +01:00
Callum Law
1052ee20b0 LibWeb: Move snap_a_length_as_a_border_width to StyleComputer.cpp
All users are in this file so it makes more sense to have it here
2025-08-28 09:29:46 +01:00
Callum Law
0ce6cc38b7 LibWeb: Store outline-width in computed form in ComputedProperties
We now also store `outline-width` in ComputedValues as a `CSSPixels`
since we know it's an absolute length at `apply_style` time - this saves
us some work in converting to CSSPixels during layout.

Gains us 46 new passes since we now interpolate keywords (thick, thin,
etc) correctly.

Also loses us 4 WPT tests as we longer clamp negative values produced by
interpolation from the point of view of getComputedStyle (although the
'used' value is still clamped).
2025-08-28 09:29:46 +01:00
Callum Law
6eae92511f LibWeb: Store border-*-width in computed form in ComputedProperties
Gains us 112 new passes since we now interpolate keywords (thick, thin,
etc) correctly.

Also loses us 4 WPT tests as we longer clamp negative values produced by
interpolation from the point of view of getComputedStyle (although the
'used' value is still clamped).
2025-08-28 09:29:46 +01:00
Jelle Raaijmakers
2585f2da0d LibWeb: Apply nested inline margin box sizes to inline layout nodes
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Push notes / build (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
When committing the layout state, we now take nested inlines' margin,
border and padding sizes into account.

Fixes #3491.
2025-08-28 00:05:28 +02:00
Jelle Raaijmakers
22ccae7e68 LibWeb: Make node argument to UsedValues::set_node() const
No functional changes.
2025-08-28 00:05:28 +02:00
Tim Ledbetter
cb1a1a5cb5 LibWeb: Replace is<T>() with as_if<T>() where possible
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
2025-08-25 18:45:00 +02:00
Andreas Kling
3d97251da3 LibWeb: Wrap out-of-flow table children in anonymous table cells
This fixes an issue where floating children of a table box would not get
laid out at all if they were surrounded by nothing but whitespace.
2025-08-25 14:55:19 +02:00
norbiros
92b560edce LibWeb/CSS: Fix basic absolute positioning inside grid containers
Now elements with position `absolute` properly resolve their position
inside parent elements with `grid`. I also imported some WPT tests
related to that topic.

Part 2 of resolving issues on https://hack4krak.pl
2025-08-25 14:09:12 +02:00
Andreas Kling
0d2800e411 LibWeb: Don't relocate fragments across atomic inline boundary
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Push notes / build (push) Waiting to run
All fragments inside an atomic inline box should stay within that box,
otherwise we'll screw up the paint order and paint them behind things
that they're supposed to be on top of.

This fixes an issue with inline-block content not appearing on sites
like Google Docs and Reddit, among others.
2025-08-24 21:00:08 +02:00
ayeteadoe
3df8e00d91 LibWeb: Enable EXPLICIT_SYMBOL_EXPORT 2025-08-23 16:04:36 -06:00
Aliaksandr Kalenik
025011d8e0 LibWeb: Fix algorithm that distributes space beyond limits [GFC]
Fixes bug when we didn't use `tracks_to_grow_beyond_limits` and instead
distributed extra space to all affected tracks. Also implements missing
"when accommodating max-content" part.
2025-08-23 23:16:18 +02:00
Tim Ledbetter
aadd563592 LibWeb: Replace usages of dynamic_cast with as and as_if
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
2025-08-22 20:26:09 +02:00
Timothy Flynn
047f521c4c LibGfx+LibWeb: Add some extra fields to glyph run data
We currently have a mixup in LibWeb between code unit offset and glyph
offset during hit testing. These extra fields will allow us to correct
this discrepency.
2025-08-22 14:06:46 +02:00
Jelle Raaijmakers
a83815360c LibWeb: Use unchecked appends and simplify code in GFC track handling
No functional changes.
2025-08-19 21:53:46 +02:00
Jelle Raaijmakers
9e29d0c040 LibWeb: Make button layout wrappers inherit styles correctly
There are some nuances to creating these wrappers, such as manually
propagating certain text styles that are not inherited by default. We
already have the logic for this in
`NodeWithStyle::create_anonymous_wrapper()`, so reuse that method in our
implementation of the button layout.

Fixes applying certain text styles (such as `text-decoration`) to the
text of a `<button>`.
2025-08-19 11:12:23 +02:00
Tim Ledbetter
1d745884be LibWeb: Parse the shape-rendering property 2025-08-19 09:47:28 +01:00
Aliaksandr Kalenik
d94b33e205 LibWeb: Handle correctly case when abspos and relpos GFC is interleaved
...by another GFC. When searching for grid item that contains an
abspos box positioned relative to GFC, it's incorrect to assume that the
closest ancestor box whose parent establishes GFC is always the one we
are looking for, because there may be non-positioned GFC in between.

Fixes regression introduced in 80c8e78.
2025-08-19 09:28:45 +02:00
Tim Ledbetter
b81d3e813c LibWeb: Eagerly create stacking context if will-change set for property
If `will-change` is set to a property value where that property could
create a stacking context, then we create a stacking context regardless
of the current value of that property.
2025-08-18 12:36:37 +01:00
Tim Ledbetter
4f663ca6e7 LibWeb: Parse the will-change property
This property provides a hint to the rendering engine about properties
that are likely to change in the near future, allowing for early
optimizations to be applied.
2025-08-18 12:36:37 +01:00
Timothy Flynn
0e4fb9ae73 LibWeb: Ensure up/down arrow navigation is grapheme-aware
Previously, it was possible for an up/down arrow press to place the
cursor in the middle of a multi-code point grapheme cluster. We want to
prevent this in a way that matches the behavior of other browsers.

Both Chrome and Firefox will map the starting position to a visually
equivalent position in the target line with harfbuzz and ICU segmenters.
The need for this is explained in a code comment. The result is a much
more natural feeling of text navigation.
2025-08-18 13:17:28 +02:00
Jelle Raaijmakers
087601832a LibWeb: Set fit-content width for buttons in used values, not computed
For button layouts, we were overriding the computed `width` value with
`fit-content` in `TreeBuilder::wrap_in_button_layout_if_needed()`. But
the spec asks us to set the _used value_ instead, so we now actually
calculate the fit-content width and set the box' content width to it.

Fixes #2516.
2025-08-18 11:04:34 +01:00
Jelle Raaijmakers
ff5f80a196 LibWeb: Add HTMLElement::uses_button_layout()
This suits the spec a bit better, and exposes the fact that we were
allowing `::ImageButton` to use the button layout although it is never
specified that it should do so. Tests were rebaselined for this.
2025-08-18 11:04:34 +01:00
Callum Law
027c9f53be LibWeb: Handle text-overflow: ellipsis with trailing whitespace
We should calculate whether we need to truncate text with an ellipsis
exclusive of any trailing collapsible whitespace.

This was causing issues where an inline element was automatically sized
(e.g. min-content) as we would calculate available width exclusive of
trailing collapsible whitespace and then our text chunk would be wider,
always inserting an ellipsis.

Fixes the visual element of #4048 but we still are incorrect in how we
collapse whitespace more generally
2025-08-18 11:00:26 +01:00
Aliaksandr Kalenik
80c8e787a8 LibWeb: Fix abspos layout when box is contained by grid area
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
Before this change, `layout_absolutely_positioned_element()` in GFC
had an assumption that all contained by grid container abspos boxes were
also direct children of the grid container. This change adds handling
for the cases when it's not true and, in order to identify grid area
abspos box belongs to, we have to find ancestor grid item.
2025-08-17 17:58:16 +02:00
Tim Ledbetter
ad06ac0d58 LibWeb: Implement the color-interpolation property for SVG gradients
This changes the operating color space for gradient `<linearGradient>`
and `<radialGradient>` elements.
2025-08-17 10:51:05 +02:00
Aliaksandr Kalenik
4d223462a5 LibWeb: Fix cyclic percentage resolution in calculate_min_content_width
Brings back some code removed in 652a457, but this time with explanation
from https://www.w3.org/TR/css-sizing-3 spec.
2025-08-13 10:14:37 +01:00
Sam Atkins
7c8c05ee82 LibWeb/Layout: Support visibility:collapse on table-row elements
When a table row (or its group) is set to collapse, the row takes up no
vertical space in the layout.

We have to account for this in multiple places, so I've cached whether a
row is collapsed in the TableGrid::Row.
2025-08-11 11:07:47 +01:00
Aliaksandr Kalenik
652a457f52 LibWeb: Fix grid layout for replaced items with percentage max-width
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
CSS grid specification states that for grid items with a replaced
element and a percentage preferred size or maximum size, the percentage
should be resolved against 0 during content-based minimum size
calculation. This makes sense, as it prevents replaced items from
overshooting their grid track while intrinsic track sizes are
calculated, and allows later track size resolution steps to scale
replaced items to fit their grid track.
2025-08-10 11:07:02 +02:00
Sam Atkins
4e92ab52e3 LibWeb/CSS: Rename CSSKeywordValue -> KeywordStyleValue
The typed-om CSSKeywordValue will need to be a separate class.
2025-08-08 15:19:03 +01:00
Sam Atkins
c57975c9fd LibWeb: Move and rename CSSStyleValue to StyleValues/StyleValue.{h,cpp}
This reverts 0e3487b9ab.

Back when I made that change, I thought we could make our StyleValue
classes match the typed-om definitions directly. However, they have
different requirements. Typed-om types need to be mutable and GCed,
whereas StyleValues are immutable and ideally wouldn't require a JS VM.

While I was already making such a cataclysmic change, I've moved it into
the StyleValues directory, because it *not* being there has bothered me
for a long time. 😅
2025-08-08 15:19:03 +01:00
Aliaksandr Kalenik
564003b22a LibWeb: Mark width & height of grid item definite before inside layout
Some checks are pending
Lint Code / lint (push) Waiting to run
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
FFC expects parent formatting context to mark size as definite if that's
the case, because otherwise it cannot figure cross line size correctly.
Fixes incorrect alignment when FFC is nested in GFC.

Progress on https://web.telegram.org/a/ layout.
2025-08-07 09:34:16 +02:00
InvalidUsernameException
add3a095d8 LibWeb/CSS: Rename background-repeat related symbols to align with spec
These will be used for the mask-repeat property as well in an upcoming
commit, hence the more generic names. Also, this more closely matches
the names used in the spec.
2025-08-06 23:09:07 +01:00
Aliaksandr Kalenik
e3aa3016bf LibWeb: Correctly calculate grid item size while accommodating fr track
Implements text from grid layout specification.
Improves layout on https://cal.com/
2025-08-06 22:42:07 +02:00
Andreas Kling
28c1dd551b LibWeb: Don't let aspect-ratio influence size definiteness
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
As it turns out, we still have to let the formatting contexts do a bit
of layout work in order to correctly apply the aspect-ratio. Hence we
can't just implicitly transfer definiteness from one size to the other.

This is a revert of 1cfd8b3ac0.
2025-08-05 21:33:41 +02:00
Andreas Kling
41e8211405 LibWeb: Honor "should treat as auto" cases in aspect-ratio decisions 2025-08-05 21:33:41 +02:00
Timothy Flynn
04d32deb52 LibWeb: Port SVGFormattingContext to UTF-16 2025-08-05 15:13:36 +02:00
Callum Law
a70a397501 LibWeb: Support percentages in word-spacing
Fixes crash in the created test as well as https://wpt.live/css/css-text
/word-spacing/reference/word-spacing-percent-001-ref.html. The WPT test
hasn't been imported as it passing is currently a false-positive due to
the fact that we don't yet respect `word-spacing` in most cases.
2025-08-05 11:43:55 +01:00
Callum Law
344d6199da LibWeb: Use correct colors for SVGFEFloodElement::flood_color
Previously we would always render floods as black, we now use the
computed color.

We also now support relative lengths within any `calc`s present.
2025-08-04 11:29:05 +01:00
Callum Law
3b52b1139a LibWeb: Support relative lengths in stop-color calcs 2025-08-04 11:29:05 +01:00
Callum Law
e0e00220fe LibWeb: Handle Auto resolution within Page::preferred_color_scheme
Handling this here means we don't have to it within individual callers
2025-08-04 11:29:05 +01:00
Callum Law
a19a6deaa4 LibWeb: Take a ColorResolutionContext in color_or_fallback
Taking a ColorResolutionContext directly instead of creating one from a
layout node allows us to call this from places where we don't have a
layout node.
2025-08-04 11:29:05 +01:00
Callum Law
46153910ec LibWeb: Update to_color to take ColorResolutionContext
Using a generic context argument will allow us to resolve colors in
places where we have all the required information but not in the form of
a layout node as was expected previously.
2025-08-04 11:29:05 +01:00
Jelle Raaijmakers
af8b256832 LibWeb: Avoid floats for BFC/FFC/GFCs with a definite width
Applicable FCs with an indefinite width simply shrink in their available
space as long as floats are intruding, but as soon as we have a definite
width we must push the box down until it it has enough space again.

Fixes #4136.
2025-08-01 14:26:12 +02:00
Jelle Raaijmakers
d27395cf1f LibWeb: Add spec links and text for BFC/FFC/GFC float intrusion behavior
No functional changes.
2025-08-01 14:26:12 +02:00
Aliaksandr Kalenik
61114f6d16 LibWeb: Rename PaintContext to DisplayListRecordingContext
PaintContext dates back to a time when display lists didn't exist and it
truly represented "paint context". Renaming it to better align with its
current role.
2025-08-01 05:25:56 -04:00
Andreas Kling
3b63582068 LibWeb: More thoroughly detach layout/paint trees from each other
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
Before committing a new layout (and thus building a new paint tree)
we now go through both the old paint tree and the layout tree and detach
them from each other.

This is a little extra work, but it ensures that there are no lingering
references across the trees, which we were apparently accumulating in
some cases on Discord, causing GC leaks.
2025-07-30 16:58:29 -04:00