I'm not sure if `CodegenRust.py` was supposed to remove the underscore,
but we end up exposing `type_` to javascript which is obviously wrong.
There's no need to rename the method in the first place, because `Type`
(with a capital T) is not a rust keyword.
Testing: Covered by existing web platform tests
---------
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
Testing: No tests, if `test-wpt` broke again then we would notice pretty
quickly.
Fixes: https://github.com/servo/servo/issues/37124
---------
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
This fixes the combination of `background-attachment: fixed` and
`no-repeat`. The positioning of the background should be relative to the
viewport, so using an infinite rectangle breaks things like `center`.
I'm not sure what the original motivation of using an infinite rectangle
here
and it doesn't seem to break any tests to stop using it.
Testing: This fixes `/css/CSS2/backgrounds/background-bg-pos-206.xht`.
Fixes#37082.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Text decorations have a special kind of propagation. Instead of
propating these during box tree construction, move propagation to
stacking context tree construction. This will allow for using a very
easy type of incremental layout when text decorations change. For
instance, when a link changes color during hovering over it, we can skip
all of box and fragment tree construction.
In addition, propagation works a bit better now and color and style
properly move down from their originating `Fragment`s.
This introduces three new failures, because now we are drawing the
text-decoration with the correct color in more places, which exposes an
issue we have with text-decorations not being drawn in relation to the
baseline (taking into account `vertical-align`).
Testing: There are tests for these changes.
Fixes#31736.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
`min_content_main_size_for_multiline_container` was initialized to an
outer size, but then it could be clamped by inner sizes.
This patch ensures that it's clamped by outer sizes, and refactors
`FlexItemBoxInlineContentSizesInfo`.
Testing: Covered by WPT
Fixes: #37008
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This change adds a shadow-tree widget for `<input type=color>` elements.
It also involves some changes to the way layout interacts with the DOM,
because currently all `input` and `textarea` elements are rendered as
plain text and their descendants are ignored. This obviously doesn't
work for `<input type={color, date, range, etc}>`.
<details><summary>HTML used for the screenshot above</summary>
```html
<input type=color>
```
</details>
Testing: I doubt that this affects WPT tests, because the appearance and
behaviour of the widget is almost entirely unspecified.
---------
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
Intrinsic sizing keywords weren't working correctly on the min and max
block sizes of a flex container, because we weren't setting the
`CacheableLayoutResult::content_block_size` to the right value. This
also ensures that `align-content` aligns within the final size of the
container.
Note it's not very clear what to do for single-line containers, they are
being discussed in https://github.com/w3c/csswg-drafts/issues/12123
Testing: Adding new WPT tests. There are still some failures, but most
subtests would fail without this change.
Fixes: #36981
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Instead of resolving the canvas background properties (essentially
keeping a possible reference to the `<body>`'s style) during fragment
tree construction, wait until painting to possibly find the style on an
appropriate `<body>` fragment. This is possible now because `Fragment`
keeps a list of flags with relevant information about the root and
`<body>` elements.
A benefit of this approach is that styles aren't cached in the fragment
tree, which would be problematic for incremental layout. In addition,
the old code was making an effort to transform the `<body>`'s background
by the root element's transform. Only Safari does this and there was
a resolution the WG that this should not happen in
https://github.com/w3c/csswg-drafts/issues/6683.
Testing:
- `/css/css-transforms/transform-translate-background-001.html`
- `/css/css-transforms/transform-translate-background-002.html`
- `/css/CSS2/floats/float-root.html`
Fixes: #30475.
Closes: #30569.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
<!-- Please describe your changes on the following line: -->
This implements `document.scrollingElement`
(https://drafts.csswg.org/cssom-view/#dom-document-scrollingelement).
---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by
`[X]` when the step is complete, and replace `___` with appropriate
data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] These changes fix#35700
- [x] There are tests for these changes
<!-- Also, please make sure that "Allow edits from maintainers" checkbox
is checked, so that we can help you if you get stuck somewhere along the
way.-->
<!-- Pull requests that do not address these steps are welcome, but they
will require additional verification as part of the review process. -->
---------
Signed-off-by: JimmyDdotEXE <50691404+JimmyDdotEXE@users.noreply.github.com>
Rather than sharing the full image cache in a script_thread, the image
cache is now unique per document. This ensures that CSP factors no
longer affect whether the image is retrieved from the cache incorrectly.
To do so, the thread_pool is shared across all caches, but the store is
fresh. Except for the place_holder{image,url}, which are cloned. That's
because the `rippy_data` is only available in the constellation and no
longer accessible at the point that we need to create the document in
the script_thread.
Contrary to the description in #36505, the script_thread still has an
image_cache for this reason: so it has access to the store and
thread_pool to clone it.
With these changes, the two CSP tests no longer flake. Confirmed with
running the following commmand:
```
./mach test-wpt tests/wpt/tests/content-security-policy/generic/ --rerun=10
```
Fixes#36505
Signed-off-by: Tim van der Lippe <tvanderlippe@gmail.com>
As per
[w3.org/TR/filter-effects-1#FilterProperty](https://www.w3.org/TR/filter-effects-1/#FilterProperty),
`filter` shouldn't make the root element establish a containing block
for absolute and fixed positioned descendants. `will-change: filter` has
matching behavior.
This PR adds a check for if we are the root element before establishing
such a block.
To know if we are the root element, we look at the `FragmentFlags`
passed in. Previously for our function, these were dummy flags, always
constructed as empty. Thus, this PR also makes sure the correct
FragmentFlags are passed down the chain to the function
`establishes_containing_block_for_all_descendants`.
Testing:
- `/css/filter-effects/filtered-html-is-not-container.html` now passes
- `/css/css-will-change/will-change-fixedpos-cb-003.html` now passes
- Manual tests are working
Fixes: #35391
---------
Signed-off-by: haval0 <56519858+haval0@users.noreply.github.com>
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
In the scrollable overflow calcutation, apply CSS transforms to boxes
and scrollable overflow of the descendant. Clip unreachable scrollable
overflow according to it's block start and inline start scrolling
direction. And, renamed `Fragment::scrolling_overflow` to
`Fragment::scrolling_overflow_for_parent` as it was calculating the
scrolling overflow contribution from a child.
Add several WPT tests, testing the transform interaction `rotate`,
`scale`, and `skew` with scrollable overflow. There are several WPT test
that are testing the interaction that not expected from current browsers
implementation according to the spec.
Testing: Existing and new WPT.
Fixes: #36031
---------
Signed-off-by: stevennovaryo <steven.novaryo@gmail.com>
This change switches `offsetParent`, `offsetLeft`, etc queries to use
the BoxTree fragments instead of walking the entire fragment tree. In
addition, fragments are stored for columns and colgroups. In general,
this greatly simplifies the flow of the query and prevents having to do
expensive tree walks.
Testing: This change is covered by newly passing WPT tests and three new
failures:
- /css/filter-effects/backdrop-filter-edge-clipping-2.html
- /css/filter-effects/backdrop-filter-edge-mirror.html
- /css/filter-effects/backdrop-filter-edge-pixels-2.html
These failures are actually progressions, because now the references
start
to render properly whereas before they did not.
Fixes: This is part of #36525 and #36665.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This is a followup to #36629, continuing to implement script-based
layout queries using the `Fragment`s attached to the `BoxTree`. In this
change, geometry queris (apart from parent offset) are calculated using
`Fragment`s hanging of the `BoxTree`.
In order to make this work, all `Fragment`s for inlines split by blocks,
need to be accessible in the `BoxTree`. This required some changes to
the way that box tree items were stored in DOM `BoxSlot`s. Now every
inline level item can have more than a single `BoxTree` item. These are
carefully collected by the `InlineFormattingContextBuilder` -- currently
a bit fragile, but with more documentation.
Testing: There are tests for these changes.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
https://drafts.csswg.org/css-align/#justify-block
Testing: Improves various WPT tests. `justify-self-auto-margins-2.html`
fails but I think the test is wrong.
Signed-off-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>
This affects the following testsuites:
- tests/wpt/tests/
- tests/wpt/mozilla/tests/
- tests/wpt/webgl/tests/
- tests/wpt/webgpu/tests/
Testing: Several tests improve
This is part of #36315
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
The initial value of `min-width` and `min-height` was 0px in CSS2.
However, CSS3 changed it to `auto`, so for backwards compatibility,
`getComputedStyle` needs to resolve it to 0px in a bunch of cases.
Testing: covered by WPT
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
It also updates the FetchResponseListener to process CSP violations to
ensure that iframe elements (amongst others) properly generate the CSP
events. These iframe elements are used in the Trusted Types tests
themselves and weren't propagating the violations before.
However, the tests themselves are still not passing since they also use
Websockets, which currently aren't using the fetch machinery itself.
That is fixed as part of [1].
[1]: https://github.com/servo/servo/issues/35028
---------
Signed-off-by: Tim van der Lippe <tvanderlippe@gmail.com>
Signed-off-by: Josh Matthews <josh@joshmatthews.net>
Co-authored-by: Josh Matthews <josh@joshmatthews.net>
Additionally to the minimum specified in min-width or min-height, tables
also enforce a `min-content` minimum.
This was handled in `Sizes::resolve()`, but flex items don't use that.
So this patch moves the logic into `Size::resolve_for_min()`.
Testing: Covered by WPT
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This feature is part of --enable-experimental-web-platform-features, so
it should be enabled on all tests.
This causes some new failures, but mostly it's because the tests were
timing out instead of running the failing subtests.
This is part of #36315
Signed-off-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>
Adds support for both the content and the IDL attribute.
Note this doesn't cover dynamic updates to `document.styleSheets` and
the owner node of the sheet.
Testing: Covered by WPT
Fixes: #26739
Signed-off-by: Oriol Brufau <obrufau@igalia.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>
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>
More details in Stylo PR: https://github.com/servo/stylo/pull/145
---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by
`[X]` when the step is complete, and replace `___` with appropriate
data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] These changes
- fixes https://github.com/servo/servo/issues/35833
- fixes https://github.com/servo/servo/issues/35982
<!-- Either: -->
- [x] There are new passing test: `css/css-logical/animation-004.html:
Transitions from physical to logical update when the direction is
changed`
Created new test files as well:
1. `css-transitions/transition-remove-and-change-immediate.html`
2. `css-transitions/transition-zero-duration-with-delay.html`
3. `css-transitions/transitioncancel-003.html`
<!-- Also, please make sure that "Allow edits from maintainers" checkbox
is checked, so that we can help you if you get stuck somewhere along the
way.-->
<!-- Pull requests that do not address these steps are welcome, but they
will require additional verification as part of the review process. -->
cc @Asun0204 @xiaochengh @stevennovaryo
Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>
This PR makes it so the `resolution` factor in `image-set` also affects
the image size.
For instance, in the example below:
```css
background-image: image-set("./small.png" 1x, "./large.png" 2x);
```
if `large.png` is used, an image which is 32x32 will be rendered as
16x16. This is specified
in <https://drafts.csswg.org/css-images-4/#image-set-notation>.
Testing:
- `css/css-images/image-set/image-set-resolution-002.html`
---------
Signed-off-by: tobinio <Tobias.frischmann1@gmail.com>
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Josh Matthews <josh@joshmatthews.net>
This feature is part of --enable-experimental-web-platform-features, so
it should be enabled on all tests.
It's not really implemented beyond parsing, but it should be safe to
enable. It mostly changes test results from ERROR to FAIL.
This is part of #36315
Signed-off-by: Oriol Brufau <obrufau@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>
This patch unskips `css/css-text/i18n` WPT tests as many tests on that
folder are already passing in Servo.
Signed-off-by: Manuel Rego Casasnovas <rego@igalia.com>
This change ensures that `display: inline-grid` is considered an atomic
inline
- Add `is_atomic_inline_level()` logic to `box_fragment.rs` to improve
accuracy.
- Update `stacking_context.rs` to use the new `is_atomic_inline_level()`
method instead of the one from stylo.
- Update `repeat-auto-fill-005.html` test expectation.
- Remove .ini expectations for tests that are no longer failing.
Testing: covered by WPT
Fixes: #35310
---------
Signed-off-by: Barigbue <barigbuenbira@gmail.com>
This imports the following changes from Blitz:
- Map position:sticky to relative rather than absolute position
16a7c16544
- Map left and right alignment from Stylo
c71cc681d8
- Improve mapping of align-items/self
7bf2a25e75Fixes: #35998
Testing:
-
`/css/css-grid/alignment/grid-align-justify-margin-border-padding.html`
- `/css/css-grid/alignment/grid-align.html`
-
`/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001.html`
- `/css/css-grid/alignment/grid-gutters-and-alignment.html`
-
`/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html`
-
`/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001.html`
- `/css/css-grid/alignment/grid-self-alignment.html`
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
https://github.com/user-attachments/assets/9aba75ff-4190-4a85-89ed-d3f3aa53d3b0
Among other things this adds a new `EmbedderMsg::ShowSelectElementMenu`
to tell the embedder to display a select popup at the given location.
This is a draft because some small style adjustments need to be made:
* the select element should always have the width of the largest option
* the border should be part of the shadow tree
Apart from that, it's mostly ready for review.
<details><summary>HTML for demo video</summary>
```html
<html>
<body>
<select id="c" name="choice">
<option value="first">First Value</option>
<option value="second">Second Value</option>
<option value="third">Third Value</option>
</select>
</body>
</html>
```
</details>
---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by
`[X]` when the step is complete, and replace `___` with appropriate
data: -->
- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] Part of https://github.com/servo/servo/issues/3551
- [ ] There are tests for these changes OR
- [ ] These changes do not require tests because ___
<!-- Also, please make sure that "Allow edits from maintainers" checkbox
is checked, so that we can help you if you get stuck somewhere along the
way.-->
<!-- Pull requests that do not address these steps are welcome, but they
will require additional verification as part of the review process. -->
---------
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
This new `CSSStyleOwner` variant is used when the pseudo-element
argument fails to parse properly or is for some unknown or unsupported
pseudo-element.
Testing: There are tests for this change. Various tests start to pass
and some start to
fail. New failures are due to partial or fully missing support for
pseudo-elements such
as:
- `::selection`
- `::first-letter` and `::first-line`
- `::marker`
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>
Note that `StyleRule` may not have the `CssRules` readily available,
they may need to be created. So the previous approach of providing
`CSSGroupingRule` with the `CssRules` is no good: it would require
writing them in advance, just in case they end up being used.
Therefore, this removes the `CSSGroupingRule::rules` field. Instead,
they are lazily obtained in `CSSGroupingRule::rulelist()` by downcasting
and calling the appropriate method for the subclass.
Testing: covered by WPT
Fixes: #36245
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
So that we can see the improvement when enabling the feature.
Testing: This PR enables tests
This is part of #36245
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
