In #18933, hit testing was moved from layout to WebRender. This presents
some issues. For instance, the DOM can change at the same time that hit
test is happening. This can mean that hit test returns references to
defunct DOM nodes, introducing memory safety issues. Currently, Servo
will try to ensure that the epochs used for testing and those recorded
in the DOM match, but this is not very reliable and has led to code that
retries failed hit tests.
This change reintroduces (8 years later) a layout hit tester and turns
it on for `document.elementFromPoint` and `document.elementsFromPoint`.
The idea is that this hit tester will gradually replace the majority of
the WebRender hit testing happening in the renderer.
Testing: This shouldn't really change the behavior hit testing, but it
seems to improve one WPT test.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
Co-authored-by: kongbai1996 <1782765876@qq.com>
Instead of running "update the rendering" at every IPC message, only run
it when a timeout has occured in script. In addition, avoid updating the
rendering if a rendering update isn't necessary. This should greatly
reduce the amount of processing that has to happen in script.
Because we are running many fewer calls to "update the rendering" it is
reasonable now to ensure that these always work the same way. In
particular, we always run rAF and update the animation timeline when
updating the ernder
In addition, pull the following things out of reflow:
- Code dealing with informing the Constellation that a Pipeline has
become Idle when waiting for a screenshot.
- Detecting when it is time to fulfill the `document.fonts.ready`
promise.
The latter means that reflow can never cause a garbage collection,
making timing of reflows more consistent and simplifying many callsites
that need to do script queries.
Followup changes will seek to simplify the way that ScriptThread-driven
animation timeouts happen even simpler.
Testing: In general, this should not change testable behavior so much,
though it
does seem to fix one test. The main improvement here should be that
the ScriptThread does less work.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
Properly caps the minimum offset on each side as recommended by the
standards: https://drafts.csswg.org/css-ui-3/#outline-offset
Testing: Covered by WPT tests. (3 new passing!)
Fixes: #19508
---------
Signed-off-by: lumiscosity <averyrudelphe@gmail.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
When calculating the node to world transform for use in bounding box
queries, cache the values of the transform. In addition, when scroll
offsets change, ensure that the cached values are invalided properly.
This change necessitated the storage of children for each node in the
tree, so that we can walk both up and down the tree. The purpose of this
part of the change is to increase performance when doing multiple
queries and prepare the tree for hit testing.
In addition, this change also tries to take into account sticky offsets,
using the algorithm from WebRender to calculate sticky offsets. This is
also going to be important for hit testing.
Testing: Newly passing tests:
- /css/css-position/position-sticky-dynamic-ancestor-001.html
- /css/css-tables/tentative/position-sticky-container.html
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
The recent changes that cached the Scroll Tree present an opportunity to
calculate the queries that consider transform and scroll (dubbed as post
composite queries) accurately.
This PR propose a solution for this calculation by noting the lowest
scroll tree nodes that would affect a fragment. To do this, each
fragment would store a new attribute `spatial_tree_node` -- scroll tree
node id that we could use for the query. This referencing is considered
because the scroll tree node construction is managed by the fragment
itself. Therefore it would ease the managing the possibly stale
reference and future query cache invalidation considering the
development of incremental layout.
The bounding box query then could transform the bounding content rect of
a fragment using the computed current transformation matrix.
Fixes: https://github.com/servo/servo/issues/35768
Testing: Existing and new WPT
---------
Signed-off-by: stevennovaryo <steven.novaryo@gmail.com>
Signed-off-by: Jo Steven Novaryo <jo.steven.novaryo@huawei.com>
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
Spec:
https://drafts.csswg.org/cssom/#dom-documentorshadowroot-adoptedstylesheets
Implement `DocumentOrShadowDOM.adoptedStylesheet`. Due to
`ObservableArray` being a massive issue on its own, it will be as it was
a `FrozenArray` at first. This approach is similar to how Gecko
implement adopted stylesheet. See
https://phabricator.services.mozilla.com/D144547#change-IXyOzxxFn8sU.
All of the changes will be gated behind a preference
`dom_adoptedstylesheet_enabled`.
Adopted stylesheet is implemented by adding the setter and getter of it.
While the getter works like a normal attribute getter, the setter need
to consider the inner working of document and shadow root StylesheetSet,
specifically the ordering and the invalidations. Particularly for
setter, we will clear all of the adopted stylesheet within the
StylesheetSet and readd them. Possible optimization exist, but the focus
should be directed to implementing `ObservableArray`.
More context about the implementations
https://hackmd.io/vtJAn4UyS_O0Idvk5dCO_w.
Testing: Existing WPT Coverage
Fixes: https://github.com/servo/servo/issues/37561
---------
Signed-off-by: Jo Steven Novaryo <jo.steven.novaryo@huawei.com>
The `IFrameCollection` was previously rebuilt too often. This PR tries
to address the todo, to only rebuild the IFrameCollection when
necessary.
Testing: `CSS Selector Invalidation: :has() invalidation should not be
O(n^2)` wpt-test changed status from timeout to failed.
Fixes: #38131 (IFrameCollection::validate accounts for 30% of script
time in DOM heavy scenarios)
Co-authored-by: sharpshooter_pt <ibluegalaxy_taoj@163.com>
Signed-off-by: Jonathan Schwender <schwenderjonathan@gmail.com>
WPT tests are expected to create screenshots as soon as everything is
loaded. If an animation is happening adding the "reftest-wait" class to
the root element is appropriate way to delay the screenshot. Previously,
the
test harness was waiting for all animations to finish, but that is just
leading to many timeouts. Removing that code fixes the timeouts.
Two Servo-specific tests are also updated as they were written with
Servo's previous behavior in mind.
Testing: There are test result updates for this change. Many TIMEOUTS
now either correctly
PASS OR FAIL.
Fixes: #36931.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
This PR fixes the issue where underlines weren't appearing on
whitespaces. This was due to whitespace being ignored in the `glyphs`
function of `components/layout/display_list/mod.rs` when the fragment
didn't have a selection. I added in a check to include the whitespace if
there's a selection or if there are any line decorations. I also renamed
the field from `ignore_whitespace` to `include_whitespace` to make it a
bit clearer since it was being reversed everywhere it was used anyway.
**Before:**
<img width="1235" height="169" alt="image"
src="https://github.com/user-attachments/assets/51d47781-355f-4915-8100-f3a7db81027f"
/>
**After:**
<img width="1235" height="169" alt="image"
src="https://github.com/user-attachments/assets/9b44fe77-d600-4080-9f3a-2c9b33924f51"
/>
Testing: `/css/css-text/white-space/pre-wrap-018.html` is now passing.
Also verified manually by running
`data:text/html;base64,PGRpdiBzdHlsZT0idGV4dC1kZWNvcmF0aW9uOiB1bmRlcmxpbmU7Ij5IZWxsbyBXb3JsZCE8L2Rpdj4=
`
Fixes: https://github.com/servo/servo/issues/33463
---------
Signed-off-by: Leo Ring <leoring03@gmail.com>
Signed-off-by: leo030303 <59373587+leo030303@users.noreply.github.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
When laying out a grid item, the tentative block size that is used to
determine the intrinsic inline sizes was different than the one used in
the containing block for the contents. The latter is now used for both
cases.
Testing: A test is now passing.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
It was very easy to forget about using `.with_specific_layout_info()` to
set the specific layout info, so it's better to make it a parameter.
In fact this already happened in the past: #36993 fixed the missing
specific layout info for flex items.
This patch fixes it for floats and atomic inlines. It also propagates it
in other cases where not doing so was not a big deal because the
specific layout info was None, but that was a fragile assumption.
Testing: Various WPT improvements
Fixes: #37898
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This change bumps stylo to servo/stylo#214, to fix an issue where
transition
properties defined earlier on the list of transitions were taking
preference over
those defined later.
Testing: This fixes a couple WPT tests.
Fixes: #37164
Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>
For example, if a test uses `let props = ...` then this was triggering
an exception because testharnessreport-servo.js already created a global
variable named `props`.
Testing: some wpt tests no longer result in ERROR
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
These tests use the Ahem font, so wait until fonts have been loaded.
Testing: This is a test fix.
Fixes: #37360, #37361
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Since we don't support `writing-mode` yet, we got different testcases
with the same title, some passing and some failing. So we had to expect
both PASS and FAIL, making the test useless to detect regressions.
This changes the test to only generate testcases for supported values of
`writing-mode`.
Testing: This is just a test change.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Follow the HTML canvas specification and add missing
'setTransform(transform)' method to CanvasTransform interface.
https://html.spec.whatwg.org/multipage/#dom-context-2d-settransform-matrix
The third-party WebIDL doesn't support different extended attributes
on different overloads of methods, so 'Throws' attribute was added
to another 'setTransform(...)' method.
https://bugzilla.mozilla.org/show_bug.cgi?id=1020975
Testing: Improvements in the tests
- css/geometry/DOMMatrix*
-
html/canvas/element/transformations/2d.transformation.setTransform.multiple.html
-
html/canvas/offscreen/transformations/2d.transformation.setTransform.multiple
New failing tests due to disabled 'paint worklet' feature
- css/css-paint-api/setTransform-00*.https.html
Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
No longer store scroll offsets for elements in the DOM. Instead
consistently get and set these in layout's `ScrollTree`. This more
consistently requires layout to run when querying scroll offsets, which
ensures that they are up-to-date and properly bounded by scrollable
overflow area.
Testing: This causes several WPT tests to start passing, and one to
start
failing. In the case of
`/shadow-dom/scroll-to-the-fragment-in-shadow-tree.html`, I believe the
issue
is that we don't properly handle scrolling and shadow DOM elements.
Before, the
faulty scrolling was hiding this issue.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Previously, `rendered_text_collection_steps` ignores
`TextTransformCase::Capitalize` due to limitation of iterator. Now we
handle the case outside.
Testing: Added a new test as not covered by existing wpt-test, except
for the indirectly related WebDriver test.
`./mach test-wpt -r
tests\wpt\tests\webdriver\tests\classic\get_element_text\get.py
--product servodriver`
Fixes: #37469
---------
Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>
Previously, layout was handling scrollable overflow and srolling area
calculation separately, only excluding the "unreachable scrollable
overflow region" at the last step. In addition, `position: absolute` was
not included in scrollable overflow calculation.
This change combines the two concepts into a single scrollable overflow
calculation and starts taking into account `position: absolute`.
Finally, `BoxFragment::scrollable_overflow_for_parent` is converted to
use early returns which reduces the amount of indentation.
Fixes#35928.
Fixes#37204.
Testing: This causes some WPT test to pass, but also two to start
failing:
- `/css/css-masking/clip-path/clip-path-fixed-scroll.html`: This seems
to fail
because script is scrolling past the boundaries of the document. This is
a
failure that was uncovered by the fixed element now being added to the
page's scroll area.
- `/css/css-overflow/overflow-outside-padding.html`: One test has
started to fail
here because now the absolutely positioned element is included in the
scroll area,
and I think there is an issue with how we are placing RTL items with
negative margins.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
This change aligns Servo with both Blink and WebKit in common cases.
When the `aspect-ratio` property is set to a different value than the
natural ratio, then Blink and WebKit disagree, we match Blink.
Gecko doesn't support intrinsic min/max block sizes at all.
Note this patch doesn't fix the intrinsic contributions, they will need
to be addressed in a follow-up patch.
Testing: Covered by WPT
Fixes: #37433
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
The compositor was accepting scroll offsets from the ScriptThread
without checking their boundaries. In some cases this could cause a
temporary discrepancy with the rendered scroll offset. This change makes
it so that all offset updates for scroll ayers in the compositor do not
scroll past the scroll boundaries of the node.
Testing: Two new tests pass with this change:
- `/css/css-position/sticky/position-sticky-left-003.html`
- `/css/css-position/sticky/position-sticky-top-003.html`
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
This is pretty much just wiring up the necessary stylo methods. Note
that the `exportparts` attribute is not yet supported, I'll do that in a
followup change
Testing: Covered by existing web platform tests.
This is the first half of https://github.com/servo/servo/issues/35349
Fixes https://github.com/servo/servo/issues/37325
---------
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
#37021 exposed that our tests are trying to load a local file path for
Ahem.ttf, but this stops working when we implement the specified CORS
protections for our font requests. Luckily, the WPT suite already
provides a same-origin version of the same font, so we can just update
our CSS to use that font face instead.
Testing: Existing WPT coverage.
Signed-off-by: Josh Matthews <josh@joshmatthews.net>
This applies some fixes for CSS Grid percentage sizing. These fixes are
mostly within Taffy, but there are some changes in Servo to allow it to
communicate whether an item is replaced to Taffy.
It also updates Taffy to v0.8.0. Taffy has switched to a tagged pointer
representation of length/size styles. Much of the diff here is updating
Servo's type conversion code to use the new representation.
---
<!-- 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] There are tests for these changes OR
---------
Signed-off-by: Nico Burns <nico@nicoburns.com>
Even though we were continuing the parent BFC, we weren't updating the
SequentialLayoutState to have the correct containing block info. That
caused problem in the presence of floats.
This patch establishes an independent BFC, which avoids the problem.
This seems reasonable since outside markers are out-of-flow-ish, and it
matches Firefox. Blink implements them as inline-blocks, so they should
also establish a BFC.
Testing: Adding new tests. Some still fail because of a different issue.
Also, adding an expectation for several existing tests that were missing
it.
Fixes: #37222
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Instead of computing scrollable overflow while constructing the fragment
tree, we will now do it later. In the future this will also allow to
only recalculate the overflow without rebuilding the tree when transform
properties change, but that's left for a follow-up.
Stylo PR: https://github.com/servo/stylo/pull/194
Testing: One test is now passing (more investigation is needed), but
otherwise this isn't expected to have any effect.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
These changes allow a minimal set of checks for font-src
CSP checks to pass.
Part of #4577
Part of #35035
---------
Signed-off-by: Tim van der Lippe <tvanderlippe@gmail.com>
This change adds support for rendering static SVG images using the
`resvg` crate, allowing svg sources in the `img` tag and in CSS
`background` and `content` properties. There are some limitations in
using resvg:
1. There is no support for animations or interactivity as these would
require implementing the full DOM layer of SVG specification.
2. Only system fonts can be used for text rendering. There is some
mechanism to provide a custom font resolver to usvg, but that is not
explored in this change.
3. resvg's handling of certain edge cases involving lack of explicit
`width` and `height` on the root svg element deviates from what the
specification expects from browsers. For example, resvg uses the values
in `viewBox` to derive the missing width or height dimension, but
without scaling that dimension to preserve the aspect ratio. It also
doesn't allow overriding this behavior.
Demo screenshot:
<details>
<summary>Source</summary>
```
<style>
#svg1 {
border: 1px solid red;
}
#svg2 {
border: 1px solid red;
width: 300px;
}
#svg3 {
border: 1px solid red;
width: 300px;
height: 200px;
object-fit: contain;
}
#svg4 {
border: 1px solid red;
width: 300px;
height: 200px;
object-fit: cover;
}
#svg5 {
border: 1px solid red;
width: 300px;
height: 200px;
object-fit: fill;
}
#svg6 {
border: 1px solid red;
width: 300px;
height: 200px;
object-fit: none;
}
</style>
</head>
<body>
<div>
<img id="svg1" src="https://raw.githubusercontent.com/servo/servo/refs/heads/main/resources/servo.svg" alt="Servo logo">
</div>
<div>
<img id="svg2" src="https://raw.githubusercontent.com/servo/servo/refs/heads/main/resources/servo.svg" alt="Servo logo">
<img id="svg3" src="https://raw.githubusercontent.com/servo/servo/refs/heads/main/resources/servo.svg" alt="Servo logo">
<img id="svg4" src="https://raw.githubusercontent.com/servo/servo/refs/heads/main/resources/servo.svg" alt="Servo logo">
</div>
<div>
<img id="svg5" src="https://raw.githubusercontent.com/servo/servo/refs/heads/main/resources/servo.svg" alt="Servo logo">
<img id="svg6" src="https://raw.githubusercontent.com/servo/servo/refs/heads/main/resources/servo.svg" alt="Servo logo">
</div>
</body>
```
</details>
---------
Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
