Commit graph

1786 commits

Author SHA1 Message Date
Andreas Kling
34f2cbf202 LibWeb: Honor intrinsic constraints on available space in table widths
When a table's containing block provides min-content or max-content
available space, we now size the table's width accordingly.
2024-05-01 11:13:48 +02:00
Aliaksandr Kalenik
613cd6104d LibWeb: Support masking of SVGForeignObjectPaintable 2024-04-27 07:10:20 +02:00
Aliaksandr Kalenik
7d05fe84bc LibWeb: Add layout node and paintable for SVGForeignObjectElement
Introduces separate layout and paintable type for foreign element.
It is necessary to inherit SVGForeignObjectPaintable from SVGMaskable
in upcoming changes.
2024-04-27 07:10:20 +02:00
goldenzach
65eb7699f4 LibWeb: Resolve vertical padding of inline elements 2024-04-25 12:45:39 +02:00
Aliaksandr Kalenik
d4f08fb0a1 LibWeb: Fix division by zero in solve_replaced_size_constraint()
Happened when input_width > 0 but input_height == 0.

Fixes crashing on Discord that happens after clicking on direct
messages conversation.
2024-04-23 16:21:48 +02:00
Dan Klishch
5ed7cd6e32 Everywhere: Use east const in more places
These changes are compatible with clang-format 16 and will be mandatory
when we eventually bump clang-format version. So, since there are no
real downsides, let's commit them now.
2024-04-19 06:31:19 -04:00
Aliaksandr Kalenik
7b75d0c1f0 LibWeb: Fix height distribution in "vertical-align: baseline" in TFC
This line changes padding top to align cell content to baseline:
`cell.padding_top += m_rows[cell.row_index].baseline - cell.baseline`

Which means available for distribution height `height_diff` could have
changed so it needs to be refreshed before assigning the rest of it to
padding bottom:
`cell_state.padding_bottom += height_diff;`

Fixes https://github.com/SerenityOS/serenity/issues/22032
2024-04-19 10:55:28 +02:00
Andreas Kling
f7e57881ad LibWeb: Don't limit available space during early height for inline-flex
There was no need to set an available height constraint when doing early
height calculation for inline-flex boxes. It created a situation where
the flex containers could wrongly get zero height early, and then
resolve percentages against zero instead of the real intrinsic size.

Fixes #23942
2024-04-13 14:10:10 +02:00
Andreas Kling
40a914ce1a LibWeb: Use static position for abspos box axes with auto insets
When both insets in a given axis are auto, we should use the static
position for absolutely positioned elements.

By doing this correctly, we exposed a bunch of other small bugs which
had to be fixed to compensate for new test failures. Those fixes are
included here as well:
- Don't apply margins twice.
- Compute the static position containing block chain correctly.

This makes https://brave.com/ look much better. :^)
2024-04-12 09:08:07 +02:00
Matthew Olsson
31341b280a LibWeb: Add calls to JS_{DECLARE,DEFINE}_ALLOCATOR() 2024-04-09 09:13:06 +02:00
Matthew Olsson
31c5cdcbd5 LibWeb+Assistant: Do not ref-capture stack vars in deferred lambdas 2024-04-09 09:10:44 +02:00
MacDue
d7b77d7695 LibWeb: Split SVGFormattingContext up into functions
Doing multiple `for_each_in_subtree()` passes was kind of a hack. We
can resolve everything in a single pass with a little more control over
the layout process. This also fixes a few minor issues like the sizing
of nested `<g>` elements.

More work is needed here though as this is still fairly ad-hoc.

Note: This does regress `css-namespace-tag-name-selector.html`,
previously SVG text within `<a>` elements would appear. However, this
was only because `for_each_in_subtree()` would blindly look through the
InlineNodes from the unimplemented `SVGAElement`s.
2024-04-08 14:24:35 +02:00
Matthew Olsson
8450041b52 LibWeb: Fix some GCVerifier warnings 2024-04-07 07:03:13 +02:00
Shannon Booth
c3217754f1 LibWeb: Remove a bunch of calls to to_byte_string
A bunch of this is leftover from pre porting over to new AK::String.
For example, for functions which previously took a ByteString const&
now accepting a StringView.
2024-04-05 20:01:37 -04:00
MacDue
c1b5fe61d1 LibWeb: Lay out SVG <clipPath> uses
This uses the same trick as done for masks in #23554. Each use of an
SVG `<clipPath>` becomes it's own layout subtree rooted at it's user.
This allows each use have it's own layout (which allows supporting
features such as `clipPathUnits`).
2024-03-29 21:59:56 +01:00
MacDue
03f957dc79 LibWeb: Add the clip-path property and resolve it for SVG elements 2024-03-29 21:59:56 +01:00
Andreas Kling
dd3e002ecf LibWeb: Make empty images (no bitmap, no alt text) take no layout space
This matches the behavior of other browsers.
2024-03-29 08:52:55 -04:00
Aliaksandr Kalenik
ca363f0024 LibWeb: Add basic "top layer" support
Implements the "top layer" concept from "CSS Positioned Layout Module
Level 4" specification.

- The tree builder is modified to ensure that layout nodes created by
  top layer elements are children of the viewport.
- Implements missing steps in `showModal()` to add an element top top
  layer.
- Implements missing steps in `close()` to remove an element from top
  layer.

Further steps could be:
- Add support for `::backdrop` pseudo-element.
- Implement the "inert" concept from HTML spec to block hit-testing
  when element from top layer is displayed.
2024-03-29 06:57:07 +01:00
Andreas Kling
d37c0a2cab LibWeb: Don't make flex layout responsible for flex container cross size
Although the flex algorithm as specified does say to determine the cross
size of the flex container, this is not how our layout engine works.

The parent formatting context is responsible for sizing its children,
and since that's already happening, we can simply remove the cross
sizing step from FFC.
2024-03-27 16:43:04 +01:00
Andreas Kling
ead341738e LibWeb: Don't use stretch-fit width for inline boxes with aspect ratio 2024-03-27 16:43:04 +01:00
Andreas Kling
1cfd8b3ac0 LibWeb: Retain size definiteness when transferred through aspect ratio
If a box has definite width and a preferred aspect ratio, we can
determine its height without performing layout. Hence, its height should
also be considered definite. And the other way around for width from
height as well.
2024-03-27 16:43:04 +01:00
Andreas Kling
ca53eefe11 LibWeb: Compute height early when possible for floating boxes
This is preparation for the next commit, which will make flex layout
relinquish control of the flex container cross size to the parent
formatting context.
2024-03-27 16:43:04 +01:00
Andreas Kling
aa59419529 LibWeb: Remove unnecessary check that BFC isn't clearing a flex item
A block-level box in BFC will never be a flex item. It may be a flex
container, but not an item. Hence this check was unnecessary.
2024-03-27 16:43:04 +01:00
Andreas Kling
a0ed8bdb57 LibWeb: Remove outdated comment about definite calc() sizes
We already do determine whether calc() sizes are definite, so this
comment was not necessary.
2024-03-27 16:43:04 +01:00
Andreas Kling
9af966f87d LibWeb: Avoid unnecessary Vector copying when generating line boxes
Carry the same Vector<Gfx::DrawGlyphOrEmoji> all the way from the inline
level iterator to the final line box fragment.
2024-03-25 12:39:23 +01:00
Aliaksandr Kalenik
26a516c85f LibWeb: Allow any FC type for replaced boxes in dimension_box_on_line()
If box is sized as replaced it still could be anything, not only SVG.

This fixes crashing on https://www.shopify.com/ that was caused by a
missing paintable for a box that has a layout node. This occurred
because the box was not laid out in dimension_box_on_line().
2024-03-23 20:57:05 +01:00
Tim Ledbetter
e1fbb08747 LibWeb: Avoid division by zero when calculating box aspect ratio 2024-03-23 20:56:26 +01:00
Aliaksandr Kalenik
f932d5d825 LibWeb: Look for labeled control in DOM tree instead of layout tree
...because "change" event should be dispatched on control even if it
has "display: none" style.

This change fixes selection in labels dropdown on GitHub's "new issue"
page.
2024-03-23 12:46:37 +01:00
Andreas Kling
afe6abfc09 LibWeb: Use an ancestor filter to quickly reject many CSS selectors
Given a selector like `.foo .bar #baz`, we know that elements with
the class names `foo` and `bar` must be present in the ancestor chain of
the candidate element, or the selector cannot match.

By keeping track of the current ancestor chain during style computation,
and which strings are used in tag names and attribute names, we can do
a quick check before evaluating the selector itself, to see if all the
required ancestors are present.

The way this works:

1. CSS::Selector now has a cache of up to 8 strings that must be present
   in the ancestor chain of a matching element. Note that we actually
   store string *hashes*, not the strings themselves.

2. When Document performs a recursive style update, we now push and pop
   elements to the ancestor chain stack as they are entered and exited.

3. When entering/exiting an ancestor, StyleComputer collects all the
   relevant string hashes from that ancestor element and updates a
   counting bloom filter.

4. Before evaluating a selector, we first check if any of the hashes
   required by the selector are definitely missing from the ancestor
   filter. If so, it cannot be a match, and we reject it immediately.

5. Otherwise, we carry on and evaluate the selector as usual.

I originally tried doing this with a HashMap, but we ended up losing
a huge chunk of the time saved to HashMap instead. As it turns out,
a simple counting bloom filter is way better at handling this.
The cost is a flat 8KB per StyleComputer, and since it's a bloom filter,
false positives are a thing.

This is extremely efficient, and allows us to quickly reject the
majority of selectors on many huge websites.

Some example rejection rates:
- https://amazon.com: 77%
- https://github.com/SerenityOS/serenity: 61%
- https://nytimes.com: 57%
- https://store.steampowered.com: 55%
- https://en.wikipedia.org: 45%
- https://youtube.com: 32%
- https://shopify.com: 25%

This also yields a chunky 37% speedup on StyleBench. :^)
2024-03-22 18:27:32 +01:00
Andreas Kling
34954f49b6 LibWeb: Log a FIXME when encountering an unexpected block-level box
I've seen a crash when trying to verify_cast some block-level box to a
BlockContainer when it's actually something else.

This patch adds a debug log message so we can learn more about it next
time it happens somewhere.
2024-03-22 06:43:57 +01:00
Tim Ledbetter
c1b1233575 LibWeb: Avoid duplicating SVG viewbox height calculation 2024-03-20 09:09:35 +01:00
Aliaksandr Kalenik
6fc59039c4 LibWeb: Skip cells layout in table box width calculation
There is no need to run full table layout if we are only interested in
calculating its width.

This change reduces compute_table_box_width_inside_table_wrapper()
from ~30% to ~15% in profiles of "File changed" pages on github.
2024-03-19 11:51:49 +01:00
Andreas Kling
dd8504c68d LibWeb: Store "text for rendering" in TextPaintable
Instead of TextPaintable fragments being an offset+length view into the
layout node, they are now a view into the paintable instead.

This removes an awkward time window where we'd have bogus state in text
fragments after layout invalidation but before relayout. It also makes
the code slightly nicer in general, since there's less mixing of layout
and painting concepts.
2024-03-18 13:42:16 +01:00
Andreas Kling
1987318cc2 LibWeb: Move selection state from layout tree to paint tree
Where we paint the selection is obviously paint-related information,
so let's keep it in the paint tree.
2024-03-18 13:42:16 +01:00
Andreas Kling
d18a5b904d LibWeb: Remove unused LineBoxFragment member 2024-03-18 13:42:16 +01:00
Andreas Kling
c51a4cc007 LibWeb: Detach paintables from *all* DOM nodes before committing layout
Before this change, we were not detaching paintables from DOM nodes
within shadow subtrees.

This appears to be the main reason that keyboard editing was doing
immediate forced relayout: doing a full layout invalidation meant we'd
build a new layout tree, which then hid the problem with with
still-attached paintables.

By detaching them before committing a new layout, we make it possible
for keyboard editing to just use normal relayout, instead of full forced
invalidation & relayout.
2024-03-18 13:42:16 +01:00
Tim Ledbetter
e9383b9c86 LibWeb: Avoid division by zero when calculating SVG viewbox aspect ratio 2024-03-17 12:54:02 +01:00
Andreas Kling
1cea4e6407 LibWeb: Use cached UsedValues pointer in IFC and its helper classes
This avoids expensive LayoutState lookups when we already have the
pointer sitting around anyway.
2024-03-16 14:27:59 +01:00
MacDue
163b6bb401 LibWeb: Special case SVG masks during layout
Rather than try to lay out masks normally, this updates the TreeBuilder
to create layout nodes for masks as a child of their user (i.e. the
masked element). This allows each use of a mask to be laid out
differently, which makes supporting `maskContentUnits=objectBoundingBox`
fairly easy.

The `SVGFormattingContext` is then updated to lay out masks last (as
their sizing may depend on their parent), and treats them like
viewports.

This is pretty ad-hoc, but the SVG specification does not give any
guidance on how to actually implement this.
2024-03-12 08:51:50 +01:00
MacDue
05f42efc06 LibWeb: Support preserveAspectRatio=none for SVGs
This is very easy now all transforms are computed during layout.
2024-03-12 08:51:50 +01:00
Aliaksandr Kalenik
bcdf4a375d LibWeb: Use resolve_grid_position for abspos boxes layout in GFC
Removes duplicated code that resolves position based on computed
values.

No behaviour change intended.
2024-03-11 15:20:58 +01:00
implicitfield
5da9f52b1f LibWeb: Use the parent container's y offset when finding static position
Fixes #18819.
2024-03-10 18:10:01 +01:00
implicitfield
54d8e58a68 LibWeb: Account for margin and padding of justified abspos flex items 2024-03-09 16:02:17 +01:00
implicitfield
3888a91c5b LibWeb: Account for margin and padding of aligned abspos flex items
This patch also makes FlexFormattingContext::calculate_static_position
use computed values for margins and borders, since this function may be
called before the box's state has been finalized.
2024-03-09 16:02:17 +01:00
implicitfield
e3b1d4a141 LibWeb: Compute content width before static position for abspos elements
In some scenarios, correctly computing the static position may depend on
the content width having been calculated beforehand.
2024-03-09 16:02:17 +01:00
Aliaksandr Kalenik
749dcac196 LibWeb: Add record_grid_placement() helper in GFC
When placement position is found we always want to do following:
- Mark the occupied cells in the occupation grid
- Add the item to the list of placed items

Therefore, having helper that does both is useful
2024-03-07 08:26:37 +01:00
Aliaksandr Kalenik
2a3891781c LibWeb: Delete is_auto_positioned_row{column} in GFC
Use is_auto_positioned_track() instead.
2024-03-07 08:26:37 +01:00
Aliaksandr Kalenik
1fbd9674b4 LibWeb: Use resolve_grid_position if row and column are definite in GFC
With this change we use the same code to resolve (start, end, span)
based on computed values in all cases:
- When only column is definite
- When only row is definite
- When both are definite
2024-03-07 08:26:37 +01:00
Aliaksandr Kalenik
8695a82c56 LibWeb: Extract common path in definite row/column placement in GFC
Moves the code that identifies (start, end, span) for a grid item into
a separate function. By doing so, we can eliminate the duplicated code
between the placement of grid items with definite columns and those
with definite rows.

This change omits some of the comments that reference the spec, as they
were largely irrelevant and unhelpful for making changes or diagnosing
issues.
2024-03-07 08:26:37 +01:00
implicitfield
0243278587 LibWeb: Account for absolutely positioned table wrappers
Table wrappers don't quite behave the same as most elements, in that
their computed height and width are not meant to be used for layout.
Instead, we now calculate suitable widths and heights based on the
contents of the table wrapper when performing absolute layout.

Fixes the layout of
http://wpt.live/css/css-position/position-absolute-center-007.html
2024-03-07 08:09:04 +01:00