Add memory reporter integration for the fragment and box trees that are
persisted in the layout thread.
Testing: Looked at the numbers for https://servo.org and
https://html.spec.whatwg.org/. The former was very small, but the latter
was 700mb.
---------
Signed-off-by: Josh Matthews <josh@joshmatthews.net>
Start storing a link to laid-out `Fragment`s in `LayoutBoxBase`, so that
these are accessible for queries and eventually for incremental layout.
Some box tree data structures lacked a `LayoutBoxBase`, such as table
tracks and table track groups[^1].
In addition, start using these `Fragment`s for queries instead of
walking the entire `Fragment` tree. Currently, this isn't possible for
most queries as `Fragment`s do not cache their absolute offsets (which
are often necessary). This change uses the new box tree `Fragment`s for
most resolved style queries.
[^1]: Note that only rows and row groups store `Fragment`s as columsn
and
colgroups do not produce any.
Testing: This is covered by existing tests.
Fixes: This is part of #36525.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This is a follow-up to #36518, which only addressed inline formatting
contexts. However, flex formatting contexts had the same problem, so it
seems safer to address it in general.
Testing: this makes a WPT test pass
Fixes: #36570
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
`::before` and `::after` pseudo-elements can have their own `::marker`
pseudo-element. Since this case wasn't taken into account, they were
being stored in main element's `::marker` `BoxSlot`. This could cause
problems where two layout boxes would try to use the same `BoxSlot`. For
now, just don't store the nested version of the marker. Later, we'll
need to figure out how to store these layout objects without causing too
much memory usage.
Testing: This is covered by `/css/css-lists/nested-marker-styling.html`.
In
addition, we also made a test case that always causes this crash, but
since it
had to create 100000 `<div>`s it's probably not appropriate for a test
suite.
Fixes: #36551
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
It's typically a given that the min-content size can't exceed the
max-content size. However, it was possible to break that assumption when
an inline formatting context had contents with a negative outer size
(due to margins). This could lead to assert failures.
This patch avoids the problem by flooring the max-content size to not be
smaller than the min-content size. Note there is no interoperability:
https://github.com/w3c/csswg-drafts/issues/12076
Testing: adding new reftest and crashtest
Fixes: #36481
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
`LayoutBoxBase` will soon contain laid out `Fragment`s of a box tree
node in order to facilitate incremental layout and also layout queries.
This is currently missing for inline boxes, so this change adds a
`LayoutBoxBase` to them.
Testing: This should not change any observable behavior, so existing
WPT suites should suffice for testing.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
When laying out tables, store the boxes of non-anonymous table parts in
their respective DOM objects. This is going to be important for
incremental layout, but also for mapping from the DOM to the box tree
(and eventually the fragment tree).
For now, anonymous table parts are still lost to time and space, but
in a followup change we hope to store them somewhere.
Testing: This has no visible change to web rendering, so is covered by
existing
WPT.
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This reduces the size of `BoxFragment` by around 20 bytes.
Testing: This just changes the layout of a data structure, so is
covered by existing WPT tests.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This is a duplicate of the style stored on the marker's `LayoutBoxBase`.
Testing: This is covered by existings WPT tests.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This PR addresses a crash in text input element due to a hack to prevent
text input being trimmed.
The updated behavior will only add `zero width space` unicode character
to the node if there's no text content instead of adding it constantly.
Also by adding the same `zero width space` unicode character to text
area when there's no text content within will allow text area element to
properly display caret.
<img width="197" alt="截圖 2025-04-11 中午12 51 00"
src="https://github.com/user-attachments/assets/10bc7314-9aa3-49df-baac-ef26d39a96d8"
/>
This PR also addresses issues with multiple glyph runs:
https://github.com/user-attachments/assets/658db56f-b166-47ec-bc77-c6c13114d669
Testing: This PR is tested using:
- `./mach run -d 'data:text/html,<input id="input_element"
value="xxxxxxxxxxxxxxxxxxxx">'`
- `./mach run -d 'data:text/html,<textarea id="input_element"
value="xxxxxxxxxxxxxxxxxxxx">'`
without causing crashes, while the results should be covered by WPT
tests
Fixes: https://github.com/servo/servo/issues/36449
---------
Signed-off-by: DK Liao <dklassic@gmail.com>
This PR introduces an initial, straightforward implementation for
displaying text selection and the caret.
This is achieved by passing the selection range and insertion point
index down to `TextFragment`, along with the starting offset of each
`TextFragment` to determine the proper range for displaying the caret
and text selection. Additionally, the `selected_style` was passed into
`TextFragment` to specify the background color.
During the final build phase, although whitespace is typically ignored
when constructing glyphs, we still need to retrieve it to render both
the caret and text selection at the correct location. This ensures that
whitespace is not overlooked when the `TextFragment` contains an
insertion point or selection range.
There are several improvements yet to be made, including:
- The caret is static and does not flash.
- The caret is not rendered when the input field is empty. (I suppose
there should be an easy fix somewhere but I haven't found it yet)
**Working Examples**
macOS
https://github.com/user-attachments/assets/f3622cbe-9fa6-40c0-b2d8-b3a8f9842c28
Windows
https://github.com/user-attachments/assets/9b008a0d-0011-4c76-a2e2-0e35869a216c
Linux
[Screencast from 03-07-2025 11_05_41
AM.webm](https://github.com/user-attachments/assets/09a311ad-f975-4450-a66c-b20be525a5ed)
---
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] These changes fix part of #33237 (But the cursor isn't blinking
yet)
- [x] These changes do not require tests because there's no behavior
change
Signed-off-by: DK Liao <dklassic@gmail.com>
Use `is_zero()` instead of comparing with `Au::Zero()` for zero checks.
Testing: This change does not cause behaviour change, a test is not
necessary.
Fixes: #36300
---------
Signed-off-by: Barigbue <barigbuenbira@gmail.com>
This starts to enable the fragment cache for all layout modes, except
grid. The main tricky bit here is that update points are absolutes and
these need to be laid out again in their containing blocks. We punt a
little bit on this, by forcing ancestors of update points to rebuild
their Fragments. This is just the first step.
Testing: We do not currently have layout performance tests, but will try
to run some tests manually later. Behavior is covered by the WPT.
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This change adds support for the `::marker` pseudo-element and ensure
that
markers are cached into the box tree. This is only initial support,
there are a few
things missing such as animations, transitions, and support the
`content` CSS
property.
Testing: There are WPT tests for this change.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
These two traits both exposed different parts of the compositing API,
but now that the compositor doesn't depend directly on `script` any
longer and the `script_traits` crate has been split into the
`constellation_traits` crate, this can be finally be cleaned up without
causing circular dependencies. In addition, some unit tests for the
`IOPCompositor`'s scroll node tree are also moved into
`compositing_traits` as well.
Testing: This just combines two crates, so no new tests are necessary.
Fixes: #35984.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
We were allowing `align-self: stretch` to stretch flex items whose cross
size behaves as `auto`, including cyclic percentages.
However, https://github.com/w3c/csswg-drafts/issues/4525 resolved that
stretching should only happen when the cross size computes to `auto`.
So this patch exposes this information in `ContentBoxSizesAndPBM`, and
refactors the flexbox stretching logic.
Fixes: #36285
Testing:
- `/css/css-flexbox/quirks-auto-block-size-with-percentage-item.html`
- `/css/css-flexbox/stretch-requires-computed-auto-size.html`
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
According to CSS2, the bottom margin of a block container can collapse
with the bottom margin of its last in-flow child if `height` computes to
`auto`.
However, according to CSS Sizing, that was "legacy spec prose" and
should be interpreted as "behaves as `auto`".
Therefore, cyclic percentages and intrinsic keywords like `min-content`
shouldn't prevent margin collapse, because they behave as `auto`.
This change aligns Servo with Gecko and Blink, but diverges from WebKit.
https://www.w3.org/TR/CSS22/box.html#collapsing-marginshttps://www.w3.org/TR/css-sizing/#behave-auto
Testing:
-
`tests/wpt/tests/css/css-sizing/margin-collapse-with-indefinite-block-size-001.html`
-
`tests/wpt/tests/css/css-sizing/margin-collapse-with-indefinite-block-size-002.html`
-
`tests/wpt/tests/css/css-sizing/margin-collapse-with-indefinite-block-size-003.html`
-
`tests/wpt/tests/css/css-sizing/margin-collapse-with-indefinite-block-size-004.html`
-
`tests/wpt/tests/css/css-sizing/margin-collapse-with-indefinite-block-size-005.html`
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
- Remove the last remaining Servo-specific PseudoElement enum from
layout. This was made to select `::before` and `::after` (both eager
pseudo-elements), but now `traverse_pseudo_element` is called
`traverse_eager_pseudo_element` and should work on any eager pseudo
element.
- Expose a single way of getting psuedo-element variants of
ThreadSafeLayoutElement in the Layout DOM, which returns `None` when
the pseudo-element doesn't apply (not defined for eager
pseudo-elements or when trying to get `<details>` related
pseudo-elements on elements that they don't apply to).
- Ensure that NodeAndStyleInfo always refers to a node. This is done by
making sure that anonymous boxes are all associated with their
originating node.
These changes are prepatory work for implementation of the `::marker`
pseudo-element as well as ensuring that all anonymous boxes can be
cached into the box tree eventually.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
This replaces `IndependentLayout` with `CacheableLayoutResult` and
stores it in `LayoutBoxBase` so it can be reused when we need to lay out
a box multiple times.
This is a generalization of the caching that we had for flexbox, which
is now removed in favor of the new one.
With this, the number of runs per second in the Chromium perf test
`flexbox-deeply-nested-column-flow.html` are multiplied by 3.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
Spec: https://drafts.csswg.org/css-sizing-3/#funcdef-width-fit-content
It's similar to the `fit-content` keyword but, instead of clamping the
stretch size between `min-content` and `max-content`, it clamps the
provided argument.
So now that we support `fit-content`, it's quite straightforward to add.
It's just not completely clear what should happen when the argument has
a cyclic percentage, so this may need some further adjustments depending
on the outcome of https://github.com/w3c/csswg-drafts/issues/11805
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
`block_size_is_zero_or_intrinsic()` was always returning true for
`stretch`. This function is used for the margin collapse heuristics
in block layout, so we were considering that an empty element with
`height: stretch` would self-collapse.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
`Size::resolve_for_min()` had an `Au` parameter, representing the value
to be used for an automatic minimum size. However, this amount isn't
trivial to compute in flexbox, so this patch changes the parameter to a
function that can be called lazily.
Note flexbox isn't currently using `Size::resolve_for_min()`, but it
will in #35961.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
* Migrate to 2024 edition
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
* Allow unsafe_op_in_unsafe_fn lint
This lint warns by default in the 2024
edition, but is *way* too noisy for servo.
We might enable it in the future, but not now.
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
* Compile using the 2024 edition
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
---------
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
The CSSWG resolved that `block-size: stretch` on a block-level box
stretches the margin box to fill the parent. However, if the parent
doesn't have padding nor border, and doesn't establish an independent
formatting context, then we assume that the margins will collapse.
Therefore, we treat the margins as zero when resolving the stretch size,
regardless of whether they will actually end up collapsing.
https://github.com/w3c/csswg-drafts/issues/11044#issuecomment-2599101601https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This function showed up as a top producer of allocations
(around 10% of all allocations).
Allocating the vector once upfront and using
`collect_into_vec` removes any intermediate allocations.
This approach is also recommended by the rayon documentation:
https://docs.rs/rayon/1.10.0/rayon/iter/trait.ParallelIterator.html#method.collect
Signed-off-by: Jonathan Schwender <schwenderjonathan@gmail.com>
* Use 2024 style edition
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
* Reformat all code
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
---------
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
Instead of keeping a per-FontGroup cache of the previously used fallback
font, cache this value in the caller of `FontGroup::find_by_codepoint`.
The problem with caching this value in the `FontGroup` is that it can
make one layout different from the next.
Still, it is important to cache the value somewhere so that, for
instance, Chinese character don't have to continuously walk through the
entire fallback list when laying out. The heuristic here is to try to
last used font first if the `Script`s match. At the very least this
should make one layout consistent with the next.
Fixes#35704.
Fixes#35697.
Fixes#35689.
Fixes#35679.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
We were always treating an indefinite `stretch` as the automatic size.
This instead treats it as `0px` on min sizing properties, and as `none`
on max sizing properties, aligning with Blink and this recent CSSWG
resolution: https://github.com/w3c/csswg-drafts/issues/11006
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
* layout: Add AxesScrollSensitivity to enable control of scroll in axis
Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>
* layout_2013: Be compatible with AxesScrollSensitivity
Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>
* layout: update struct AxesScrollSensitivity to euclid::Vector2D
Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>
* display_list: implement From<Overflow> for ScrollSensitivity
Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>
* layout: simplify and reuse scroll related logic
Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>
* layout_2013: simplify and reuse scroll related logic
Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>
* layout, layout_2013: revert AxesScrollSensitivity to pair struct
Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>
* layout: Reimport ComputedOverflow as #35103 depends on it
Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>
* layout: Add AxesOverflow to replace PhysicalVec
Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>
* layout: implement scroll of viewport for different axes
Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>
* layout: explicitly handle overflow match
Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>
* Update components/shared/webrender/Cargo.toml
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>
---------
Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
A box is usually sized by the formatting context in which it participates.
However, tables have some special sizing behaviors that we implemented
with a `content_inline_size_for_table` override.
However, breaking the assumptions of the formatting context isn't great.
It was also bad for performance that we could try to layout a table
among floats even though it wouldn't en up fitting because of a larger
min-content size.
Therefore, this changes the logic so that formatting contexts use some
special sizing for tables, and then tables only override that amount
when there are collapsed columns. Eventually, we should try to remove
that case too, see https://github.com/w3c/csswg-drafts/issues/11408
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
When we try to place a table next to some floats, and it doesn't fit
vertically, then we try again considering more floats. And as an
optimization we were using the previous width of the table as a minimum.
However, this was wrong, because the table might accept a smaller width
when the available space is smaller than beforehand.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
The specification doesn't say how to deal with percentages when
determining the minimum and maximum size of a table grid, so follow the
approach that Chromium uses.
Essentially, figure out the "missing" percentage from the non-percentage
columns and then use that to work backwards to fine the size of the
percentage ones.
This change is larger than one might expect, because this percentage
approach shouldn't happen for tables that are descendants of a flex,
grid or table container (except when there is an interceding absolute).
We have to pass this information down when building the box tree. This
will also make it easier to improve propagated text decorations in the
future.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
We were just checking the computed `display` style, but a few HTML
elements can ignore some `display` values and generate a different
kind of box.
This uses the right check, though for now there is no difference in
behavior since we don't have special HTML layouts.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Some layouts like table need some style overrides. We were handling this
in `ComputedValuesExt`, but it was messy, unreliable and too limited.
For example, we were assuming that a style with `display: table` would
belong to a table wrapper box or table grid box. However, certain HTML
elements can ignore their `display` value and generate a different kind
of box. I think we aren't doing that yet, but we will need this.
Also, resolving the used border of a table needs layout information,
which we don't have in `ComputedValuesExt`. This patch will allow to
improve border collapsing in a follow-up.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
There were two kinds of layout tracing controlled by the same debugging
option:
- modern layout: Functionality that dumped a JSON serialization of the
layout tree before and after layout.
- legacy layout: A scope based tracing that reported the process of
layout in a structured way.
I don't think anyone working on layout is using either of these two
features. For modern layout requiring data structure to implement
`serde` serialization is incredibly inconvenient and also generates a
lot of extra code.
We also have a more modern tracing functionality based on perfetto that
we have started to use for layout and IMO it's actually being used and
more robust.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
It used to be an `AuOrAuto`, turning it into a `SizeConstraint` allows
passing the information about the min and max constraints when the
containing block doesn't have a definite block size.
This will be useful for table layout.
Note that in most cases we were already constructing the containing
block from a `SizeConstraint`, but we were calling `to_auto_or()` to
turn it into an `AuOrAuto`.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Push the interior mutability into enum variants of `Fragment`, so that
they can be cloned. This saves memory in the `Fragment` tree as the
`Fragment` enum is now a relatively wee 16 bytes and the interior parts
can be a variety of sizes. Before, every `Fragment` was the size of the
biggest kind (`BoxFragment` - 248 bytes).
This a step on the way toward incremental layout.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
A box is usually sized by the formatting context in which it participates.
However, tables have some special sizing behaviors, and these were in
conflict.
Instead of letting tables attempting to re-resolve their inline table,
which failed to e.g. take flex properties into account or resolve sizing
keywords correctly, now tables will trust the inline size determined by
the parent. They will only floor it by the min-content size, and maybe
shrink the final size due to collapsed columns.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
When laying out a block-level box that avoids floats, if we know that
its size doesn't depend on the available space, we can take a fast path
and only lay it out once. If its size depends on the available space,
we may have to lay it out multiple times, which can be slower.
This patch improves the check for this dependency on the available space.
For example, `min-width: 200px; width: 100px; max-width: stretch` was
previously considered to depend on the available space because of
`max-width`. However, `max-width` is irrelevant when the min size is
greater than the preferred size.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
There is an early return for independent formatting contexts, so at this
point we don't need to handle them.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
`width` and `max-width` typically treat expressions with percentages as
their initial value, but for the min-content contribution of replaced
elements, they should instead be treated as zero.
https://drafts.csswg.org/css-sizing-3/#replaced-percentage-min-contribution
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
The new version of rust allows us to elide some lifetimes and clippy is
now complaining about this. This change elides them where possible and
removes the clippy exceptions.
Fixes#34804.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
