When an `<iframe>` cannot scroll because the size of the frame is
greater than or
equal to the size of page contents, chain up the keyboard scroll
operation to the parent frame.
Testing: A new Servo-only WPT tests is added, though needs to be
manually
run with `--product servodriver`.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Delan Azabani <dazabani@igalia.com>
Instead of having every single embedder implement keyboard scrolling,
handle it in script in the default key event handler. This allows
properly targeting the scroll events to their scroll containers as well
as appropriately sizing "page up" and "page down" scroll deltas.
This change means that when you use the keyboard to scroll, the focused
or most recently clicked `<iframe>` or overflow scroll container is
scrolled, rather than the main frame.
In addition, when a particular scroll frame is larger than its content
in the axis of the scroll, the scrolling operation is chained to
the parent (as in other browsers). One exception is for `<iframe>`s,
which will be implemented in a followup change.
Testing: automated tests runnable locally with `mach test-wpt --product
servodriver`
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
`offsetLeft` and `offsetTop` were ignoring that sticky positioned boxes
can be shifted out of their normal position.
Testing: Various test improvements.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
This should be the final PR for the Hash Function series that is
trivial.
Of note: I decided to transform `HashMapTracedValues<Atom,..>` to use
FxBuildHasher. This is likely not going to improve performance as Atom's
already have a unique u32 that is used as the Hash but it safes a few
bytes for the RandomState that is normally in the HashMap.
Signed-off-by: Narfinger <Narfinger@users.noreply.github.com>
Testing: Hash function changes should not change functionality, we
slightly decrease the size and unit tests still work.
Signed-off-by: Narfinger <Narfinger@users.noreply.github.com>
This change allows that only new display list is built when css
background and border image loaded.
Testing: This change should not change any behaviors so covered by
existing WPT tests.
Signed-off-by: sharpshooter_pt <ibluegalaxy_taoj@163.com>
To find scrolling ancestors, we need to walk up the flat tree and only
consider the elements that are in the chain of containing block
ancestors of an element. `scrollParent` now does this so we can use it
to properly implement `scrollIntoView`.
Testing: There are WPT tests for this change.
---------
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This new API allows getting the element which establishes an element's
scroll container. This will be used to properly implement
`scrollIntoView`. There is still work to do for this API and
`offsetParent` to properly handle ancestors which are
closed-shadow-hidden from the original query element.
In addition, fix an issue where inline boxes were establishing scrolling
containers (they shouldn't do that).
Testing: There are tests for this change.
Fixes: #39096.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
FNV is faster for hashing less than 16 bytes of data and the
cryptographic properties of the default HashMap are not needed for the
various ids.
Testing: This does not change functionality.
Signed-off-by: Narfinger <Narfinger@users.noreply.github.com>
Parameterize and rename both `Layout::content_box_query` and
`Layout::content_boxes_query` to support the query of rendered padding
area and content area that accounts for transform and scroll. Both of
these query have been misleading for a time since they are using border
box, instead of content box of a Node.
This PR adds a new type `layout_api::BoxAreaType` to be passed from
`ScriptThread` to `LayoutThread` to query the respective area. It is
then used for the query within `IntersectionObserver` to pass several
WPTs.
Testing: Existing WPT Coverage.
---------
Signed-off-by: Jo Steven Novaryo <jo.steven.novaryo@huawei.com>
Measures the memory usage of the stacking context tree in the memory
report of the layout thread by adding `MallocSizeOf` to
`StackingContextTree` and all the types required for that. Also requires
adding `MallocSizeOf` to some webrender types.
Testing: Manually looked at about:memory
<img width="636" height="241" alt="image"
src="https://github.com/user-attachments/assets/6bf9d65a-0bf0-4a99-99b5-ddedba3269c1"
/>
Fixes: https://github.com/servo/servo/issues/38725
---------
Signed-off-by: Rahul Menon <menonrahul02@gmail.com>
Motivation:
Using our GenericChannel abstraction allows us to optimize IPC in
single-process mode to just use cross-beam channel.
To keep the diff low, and get early feedback, this PR only tackles a
single channel, but the intention is to port all ipc channels to the
generic channel, which allows us to skip serializing and deserializing
messages in single process mode.
Based on:
- https://github.com/servo/servo/pull/38638
- https://github.com/servo/servo/pull/38636
Testing: Covered by existing tests
---------
Signed-off-by: Jonathan Schwender <schwenderjonathan@gmail.com>
This cleanup makes the interface a bit simpler and prevents problems
where the pseudo-element information is not passed by accident.
Testing: This should not change behavior, so is covered by existing
tests.
---------
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
Use `ServoThreadSafeLayoutNode` in more places in layout rather than
`ServoLayoutNode`. The former is meant to be used during layout, but
layout 2020 was written against the latter. In general, this reduces the
amount of conversion to the thread-safe version in many places in
layout.
In addition, an unused iterator from the `script` crate
`ServoThreadSafeLayoutNodeChildrenIterator` is replaced with the child
iterator from `layout`. The `layout` version must be directly in
`script` now as it uses the dangerous variants of `next_sibling` and
`first_child`, which allow encapsulating the unsafe bits into one
module.
This will ultimately be useful for storing the layout data of
pseudo-element children of pseudo-elements properly.
Testing: This should not change any behavior and thus is covered by
existing tests.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This patch adds support for rendering static inline SVG documents in the
DOM tree by serializing the SVGElement's subtree and leveraging the
existing resvg based SVG stack for rendering. Serialiing the subtree is
necessary as resvg's tree representation (roxmltree) is immutable, so we
can't construct the tree incrementally.
Few other design choices here:
1. The `SVGSVGElement` is now treated as a replaced element and the
layout code is responsible for plumbing the serialized SVG source
(encoded as a base64 data: url) into the image cache, much like how
background images are handled.
2. The serialization is done on the script thread after an initial
layout pass. This is necessary because the serialization code asserts
that it is invoked from script thread i.e we can't call it from layout
workers.
3. The serialized SVG data: url is cached to avoid recomputing it on
subsequent layouts. The cache is invalidated when the SVGSVGElement's
subtree is mutated.
The original SVGSVGElement code was behind the `dom_svg_enabled` pref.
This patch also removes the preference and make SVG support using resvg
available unconditionally.
Below is the analysis of the new test failures:
These tests use inline SVG but used to pass by accident.
They now fail because they contain SVG with no intrinsic
sizing which is not handled by resvg in a way that would
allows us to distinguish it from the sized case. The same
limitation applies to non-inline SVG.
- /css/CSS2/positioning/absolute-replaced-width-003a.xht
- /css/CSS2/positioning/absolute-replaced-width-003b.xht
- /css/CSS2/positioning/absolute-replaced-width-003c.xht
These tests employ CSS styles in the HTML that
target the elements in inline SVG, which is not currently
supported.
-
/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg-basic.html
- /css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg.html
This is a tentative test that uses the unsupported 'border-shape' CSS
property. The ref uses SVG, so it used to pass accidentally. The ref
still doesn't render correctly since it also relies on styling SVG
elements using CSS classes in the HTML (instead of inline in SVG).
- /css/css-borders/tentative/border-shape/border-shape-stroke.html
These tests use the attribute 'clip-path=circle(...)' in the
test, but this doesn't seem to work in resvg.
- /css/css-masking/clip-path/clip-path-borderBox-1b.html
- /css/css-masking/clip-path/clip-path-contentBox-1b.html
- /css/css-masking/clip-path/clip-path-contentBox-1c.html
- /css/css-masking/clip-path/clip-path-fillBox-1b.html
- /css/css-masking/clip-path/clip-path-marginBox-1a.html
- /css/css-masking/clip-path/clip-path-paddingBox-1b.html
- /css/css-masking/clip-path/clip-path-strokeBox-1b.html
- /css/css-masking/clip-path/clip-path-strokeBox-1c.html
- /css/css-masking/clip-path/clip-path-viewBox-1a.html
- /css/css-masking/clip-path/clip-path-viewBox-1b.html
- /css/css-masking/clip-path/clip-path-viewBox-1d.html
- /css/css-masking/clip-path/svg-clip-path-circle-offset.html
- /css/css-masking/clip-path/svg-clip-path-ellipse-offset.html
Additionally, the below two tests use a `foreignObject` SVG element
which
embeds a html div fragment. This is also not supported by resvg.
- /css/css-masking/clip-path/clip-path-viewBox-1d.html
- /css/css-masking/clip-path/clip-path-fillBox-1b.html
The following test fails because of apparent pixel differences
between a circle rendered purely using CSS clip-path vs a circle
rendered in SVG using resvg.
- /css/css-masking/clip-path/clip-path-contentBox-1c.html
These tests style the inline SVG elements using CSS in the HTML or
separate stylesheet. This is not supported by this implementation.
- /css-transforms/document-styles/svg-document-styles-{001..004}.html
- /css-transforms/document-styles/svg-document-styles-012.html
- /css-transforms/external-styles/svg-external-styles-{001..004}.html
- /css-transforms/external-styles/svg-external-styles-014.html
These tests seem like they should pass, but they fail because of what
seems like an anti-aliasing issue in the rendering engine. The
transformed element has a thin outline which is causing pixel difference
with the ref:
- /css/css-transforms/group/svg-transform-group-008.html
- /css/css-transforms/group/svg-transform-group-009.html
- /css/css-transforms/group/svg-transform-nested-009.html
- /css/css-transforms/group/svg-transform-nested-013.html
- /css/css-transforms/group/svg-transform-nested-014.html
- /css/css-transforms/group/svg-transform-nested-018.html
- /css/css-transforms/group/svg-transform-nested-019.html
- /css/css-transforms/group/svg-transform-nested-008.html
The below tests fail because resvg is calculating the wrong size for the
'rect' inside the SVG. The dimensions of the SVG are established via the
CSS in the HTML, so it seems resvg is using incorrect coordinates for
the children of the svg when explict width/height are not specified in
the root svg element.
- /css/css-transforms/group/svg-transform-group-011.html
- /css/css-transforms/group/svg-transform-nested-021.html
- /css/css-transforms/group/svg-transform-nested-029.html
All these tests use an SVG that doesn't have width nor height attributes
and this causes resvg to use incorrect coordinates for the SVG's
children. In addition, the following tests use the CSS syntax for
transforms inside the SVG (using style attribute) which is not supported
by resvg (it only supports the SVG 1.1 transform syntax).
- /css/css-transforms/inline-styles/svg-inline-styles-{001..004}.html
- /css/css-transforms/inline-styles/svg-inline-styles-012.html
In the case of these four tests, the `style` attribute specifies an
invalid transform, but resvg doesn't fallback to the transform specified
via the `transform` attribute on the same element.
- /css/css-transforms/inline-styles/svg-inline-styles-005.html
- /css/css-transforms/inline-styles/svg-inline-styles-006.html
- /css/css-transforms/inline-styles/svg-inline-styles-010.html
- /css/css-transforms/inline-styles/svg-inline-styles-013.html
The following test fails because of the lack of width/height in SVG as
described above but it also exposes gaps in our CSS tranform
implementation.
- /css/css-transforms/preserve3d-and-filter-with-perspective.html
These tests failure because resvg doesn't handle the SVG without
explicit width and height, but specified via CSS in the HTML. In
addition, there are pixel differences between the ref due to
antialiasing issues.
- /css/css-transforms/matrix/svg-matrix-{005...008}.html
- /css/css-transforms/matrix/svg-matrix-010.html
- /css/css-transforms/matrix/svg-matrix-012.html
- /css/css-transforms/matrix/svg-matrix-{015..069}.html
- /css/css-transforms/rotate/svg-rotate-angle-45-001.html
- /css/css-transforms/rotate/svg-rotate-angle-45-011.html
- /css/css-transforms/rotate/svg-rotate-angle-45-022.html
- /css/css-transforms/scale/svg-scale-006.html
- /css/css-transforms/scale/svg-scale-007.html
These tests seem to be failing due to some sort of antialiasing issue,
where a transformed SVG element has a thin border that causes pixel
differences compared to the solid colored reference.
- /css/css-transforms/skewX/svg-skewx-001.html
- /css/css-transforms/skewX/svg-skewx-006.html
- /css/css-transforms/skewX/svg-skewx-011.html
- /css/css-transforms/skewX/svg-skewx-016.html
- /css/css-transforms/skewX/svg-skewx-021.html
- /css/css-transforms/skewX/svg-skewxy-001.html
- /css/css-transforms/skewY/svg-skewy-001.html
- /css/css-transforms/skewY/svg-skewy-006.html
- /css/css-transforms/skewY/svg-skewy-011.html
- /css/css-transforms/skewY/svg-skewy-016.html
- /css/css-transforms/skewY/svg-skewy-021.html
These tests specify several SVG attributes such as transform,
vector-effect etc via CSS in the HTML (rather than inline in SVG). The
current implementation doesn't support this.
- /css/css-transforms/transform-box/stroke-box-mutation-001.html
- /css/css-transforms/transform-box/stroke-box-mutation-002.html
- /css/css-transforms/transform-box/stroke-box-mutation-003.html
- /css/css-transforms/transform-box/stroke-box-mutation-004.html
- /css/css-transforms/transform-box/svgbox-stroke-box-002.html
- /css/css-transforms/transform-box/svgbox-stroke-box-003.html
- /css/css-transforms/transform-box/svgbox-stroke-box-004.html
- /css/css-transforms/transform-box/svgbox-stroke-box-005.html
These tests depend on 'transform-origin' specified on an element inside
an SVG, but this transform is influenced by the 'tranform-box' set via
CSS in the HTML itself (not the SVG). The current implementation doesn't
support styling the SVG using document styles, so these tests just fail.
- /css/css-transforms/transform-origin/svg-origin-relative-length-*.html
These tests check the fallback behaviour when invalid syntax is
encountered in the 'transform-origin' value. resvg doesn't correctly
fallback to 0,0 causing the tests to fail.
-
/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-001.html
-
/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-002.html
-
/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-003.html
-
/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-004.html
These tests use unimplemented Canvas APIs like 'beginLayer' and
the 'CanvasFilter' constructor and hence fail at runtime.
-
/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html
-
/html/canvas/element/filters/2d.filter.layers.gaussianBlur.tentative.html
-
/html/canvas/element/layers/2d.layer.anisotropic-blur.isotropic.tentative.html
-
/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-x.tentative.html
-
/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-y.tentative.html
-
/html/canvas/element/layers/2d.layer.anisotropic-blur.x-only.tentative.html
-
/html/canvas/element/layers/2d.layer.anisotropic-blur.y-only.tentative.html
-
/html/canvas/element/layers/2d.layer.css-filters.blur-and-shadow.tentative.html
- /html/canvas/element/layers/2d.layer.css-filters.blur.tentative.html
- /html/canvas/element/layers/2d.layer.css-filters.shadow.tentative.html
- /html/canvas/element/layers/2d.layer.ctm.layer-filter.tentative.html
-
/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html
-
/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html
-
/html/canvas/offscreen/filters/2d.filter.layers.dropShadow.tentative.html
-
/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.tentative.html
-
/html/canvas/offscreen/layers/2d.layer.anisotropic-blur.isotropic.tentative.html
-
/html/canvas/offscreen/layers/2d.layer.anisotropic-blur.mostly-x.tentative.html
-
/html/canvas/offscreen/layers/2d.layer.anisotropic-blur.mostly-y.tentative.html
-
/html/canvas/offscreen/layers/2d.layer.anisotropic-blur.x-only.tentative.html
-
/html/canvas/offscreen/layers/2d.layer.anisotropic-blur.y-only.tentative.html
-
/html/canvas/offscreen/layers/2d.layer.css-filters.blur-and-shadow.tentative.html
- /html/canvas/offscreen/layers/2d.layer.css-filters.blur.tentative.html
-
/html/canvas/offscreen/layers/2d.layer.css-filters.shadow.tentative.html
- /html/canvas/offscreen/layers/2d.layer.ctm.layer-filter.tentative.html
These tests fail because resvg doesn't seem to honour the 'translate'
CSS property specified on an SVG element using an inline 'style'
attribute.
- /css/css-transforms/translate/svg-translate-with-units.html
-
/css/css-transforms/translate/translate-and-transform-attribute-in-svg.html
-
/css/css-transforms/translate/translate-and-transform-css-property-in-svg.html
- /css/css-transforms/translate/translate-in-svg.html
These tests seem to fail due to the filter effect implementation in
resvg either not being complete or spec compliant.
- /css/filter-effects/feconvolve-divisor.html
- /css/filter-effects/feconvolve-region-001.html
- /css/filter-effects/feconvolve-region-002.html
- /css/filter-effects/filter-subregion-01.html
- /css/filter-effects/svg-feimage-002.html
- /css/filter-effects/svg-feimage-003.html
- /css/filter-effects/svg-feimage-004.html
- /css/filter-effects/svg-feoffset-001.html
The test /css/filter-effects/svg-feimage-004.html should ideally PASS
but currently fails because we don't propagate height/width set using
CSS in HTML element to the root SVG, so resvg uses the wrong dimensions
when rendering the children of the SVG.
These failures are due to deficienies in our current implementation
i.e we don't support styling SVG elements using CSS in HTML.
-
/css/css-transforms/gradientTransform/svg-gradientTransform-combination-001.html
- /css/selectors/sharing-in-svg-use.html
The below test fails as our current implementation relies on resvg to
tell us the intrinsic ratio of the SVG, but this doesn't always work
correctly.
- /css/css-sizing/svg-intrinsic-size-005.html
This failure is due to lack of proper fallback to no-op transform in
resvg when the `rotate()` syntax is specified with an invalid list e.g
`rotate(90,)`.
- /css/css-transforms/rotate/svg-rotate-3args-invalid-002.html
This test only passes in CI and based on the raw log output, it seems
that no text inside the SVG is rendered in the CI. This could be an font
stack related issue.
- /css/css-display/display-contents-svg-elements.html
This test asserts that the CSP blocks loads triggered using `use`
elements in SVG. It used to TIMEOUT as without inline SVG support, no
CSP violation event was triggered. It fails now since the event is now
triggered for the load of the SVG itself (our current implementation
loads inline SVGs as serialized base64 data: urls). This doesn't match
the blocked URL in the use element though.
- /content-security-policy/img-src/svg-use-blocked.tentative.html
Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>
Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>
IntersectionObserver needs to be able to query node geometry without
forcing a layout. A previous layout could have run without needing a
`StackingContextTree`. In that case the layout-less query should finish
building the `StackingContextTree` before doing the query. Add a new
type of layout API which requests that layout finishes building the
StackingContextTree.
This change also slightly simplifies and corrects the naming of
`Element` APIs around client box queries.
Testing: This should fix intermittent failures in WPT tests.
Fixes: #38380.
Fixes: #38390.
Closes: #38400.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
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>
There were various booleans on `ReflowResults` that represented various
actions that might have been taken during a reflow request. Replace
those with a bitflags that better represents what reflow phases have
actually been run. Update variable names to reflect what they mean.
In addition, run some post-layout tasks unconditionally. They are
already contingent on the results returned from layout.
This simplifies and clarifies the code a good deal.
Testing: This should not change observable behavior and thus is covered
by existing WPT tests.
Signed-off-by: Martin Robinson <mrobinson@igalia.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>
Implement JS scroll event firing compliant to
https://drafts.csswg.org/cssom-view/#scrolling-events. Basically
whenever, the an element or the viewport is scrolled, we will fire a
scroll event. The changes push a scroll event whenever an API causes a
scroll position to change.
Testing: New WPT tests for basic APIs.
Part of: https://github.com/servo/servo/issues/31665
---------
Signed-off-by: Jo Steven Novaryo <jo.steven.novaryo@huawei.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>
Request a reflow when doing page zoom and only modify the scaling of the
WebView scene after the first root pipeline display list with the new
zoom is ready. In addition:
- store zoom limits in `Scale` types
- send `ViewportDetails` along with the display list so that we can
detect when the root pipeline scale is ready.
Testing: This is quite hard to test as it requires verification that
contents are zoomed appropriately at the right time.
Fixes: #38091.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
This change adds some minor optimizations and bugfix for non-functional
details with seperated commits:
- fix the omission that stop use `Rayon` in single-thread mode
- add trace for incremental box tree construction
- fix the bug that failed to skip reflow entirely when there is no need
for `restyle` and a fragment tree has already been built.
- add trace for stylist preparation during reflow. In certain scenarios,
this phase might take up a significant amount of time, such as when
there are a large number of shadow trees.
Testing: This should not change observable behavior and is thus covered
by existing WPT tests.
---------
Signed-off-by: sharpshooter_pt <ibluegalaxy_taoj@163.com>
When a style change does not chang the structure of the box tree, it is
possible to skip box tree rebuilding for an element. This change adds
support for reusing old box trees when no element has that type of
damage. In order to make this happen, there needs to be a type of
"empty" `LayoutDamage` that just indicates that a fragment tree layout
is necessary.
This is the first step toward incremental fragment tree layout.
Testing: This should not change observable behavior and thus is covered
by
existing WPT tests. Performance numbers to follow.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
Previously, our Servo-specific spatial tree scroll offsets were opposite
to
that of WebRender and also the web platform. This is due to the fact,
likely, that `winit` wheel directionality is also flipped. This change
has both the Servo spatial tree and the API take offsets that are
consistent with the web.
Any possible changes to the meaning of wheel directionality will be
handled in a followup change.
This is a breaking change to the Servo API.
Testing: This change updates unit tests.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This improves naming of layout categories and adds tracing for each
layout phase.
Testing: This just adds / adjusts profiling categories, so doesn't need
tests.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This stylesheet was being included both in quirks mode and in limited
quirks mode. It should only be the former.
Testing: adding new test.
Part of #37813
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
The creation of `LayoutContext` does more work than necessary if layout
just needs to do something like make a display list and not restyle and
relayout. This change makes it so that these kind of non-restyle layouts
do not need to create a display list. In addition, the creation of
`LayoutContext` is better encapsulate
Testing: This should not change observable behavior and is thus covered
by existing WPT tests.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
- Move some of the image handling code to a separate function.
- Move reflow event debugging into layout itself and use the `Debug`
implementation to print the event.
- A few other small cleanups
Testing: This should not change behavior and is thus covered by existing
WPT
tests.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This reduces the amount of work necessary when running layout, by making
restyle information optional in the `ReflowRequest`. When restyling
isn't
necessary, the option is `None`.
Testing: This shouldn't change any observable behavior and thus is
covered
by existing WPT tests.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This will allow Servo to add custom types of damage in the near future
which correspond to minor phases layout. The damage exposed by Stylo
only corresponds to the major layout phses. In the future, both phases
will likely be managed by Servo itself and implementors will need to
provide their own damage system entirely.
Testing: This shouldn't change behavior and thus is covered by existing
tests.
Stylo PR: https://github.com/servo/stylo/pull/207
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This is used to capture information about what layout phases are
necessary for a given `ReflowGoal`. It's moved closer to where these
decisions are made and it should be easier to understand what the values
mean. They had gotten a bit out of sync with how queries and layout were
implemented.
Testing: This shouldn't change observable behavior and thus should be
covered
by existing WPT tests.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Instead of doing a restyle whenever layout is requested, only do one if
script believes that the `Document` has changed in a way that needs a
restyle. In addition, track the different reasons this might be the
case. This will be used later to provide better debugging output.
In layout, when a restyle isn't requested, provide:
- an early return if layout is up-to-date enough for the reflow goal.
- skipping restyle and reflow if it isn't necessary.
Testing: This should not change observable behavior, and thus is covered
by existing tests.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This change fixes an issue and makes a few more minor improvements to
the `ImageAnimationState`:
1. Image rooting and unrooted now happens in one step from
`Window::update_animations_post_reflow`.
2. The `node_to_animating_image_map` is now stored as a shared `RwLock`
so that it doesn't need to be taken and then replaced in the
`ImageAnimationState` during reflow. This should prevent a hypothetical
issue
where image animations are restarted during empty reflows.
3. General naming and idiomatic Rust usage improvements.
Testing: This doesn't really have any obvious behavioral changes,
because all
reflows currently trigger a restyle. It becomes a serious problem with
#37677
and this change fixes the failing test there.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Now that we are standardizing on the `_traits` crates becoming `_api`
and exposing the API of the crate that they get their name from [^1],
`script_layout_interface` becomes `layout_api` as it exposes the API for
`layout` that is used by `script` This brings the crate in line with the
naming of the other ones in `shared`.
[^1]:
https://servo.zulipchat.com/#narrow/channel/263398-general/topic/Organizing.20*_traits.20crates/with/396893711
Testing: This should not change any behavior and thus is covered by
existing tests.
Signed-off-by: Martin Robinson <mrobinson@igalia.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>
Add debug option `dump-scroll-tree` to print the scroll tree that had
been stored after each reflow, or log that the scoll tree is not
initialized yet..
To reduce the coupling, the debug print operation will process the
scroll tree node list that have been constructed in the stacking context
tree. It will generate a adjacency list and do preorder traversal. The
order of the tree then will depends on the order of the node in the node
list that has been constructed. Which, in turn, correspond to the
declaration order of the nodes.
This would help with the analysis and development of post composite
queries and its caching.
cc: @xiaochengh
Signed-off-by: stevennovaryo <steven.novaryo@gmail.com>
Highlights from the devtools trigger reflows. Previously, incremental
layout would notice that nothing about the box tree changed and skip
generating a new display list. This caused the highlights to never be
painted.
Forcing a new DL in this case makes reflows that happen *while* there is
a highlighted DOM node (which did not change since the last reflow)
slightly less efficient. We could check if the highlighted node changed
and only force a new display list if it did, but I'm not sure if
`OpaqueNode`s can be compared like that. It also seems like a very niche
issue.
Testing: This is hard to test for, so there are no tests.
Fixes https://github.com/servo/servo/issues/37500.
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
There are currently five places that scroll offsets are stored:
- DOM: A set of scroll offsets used for script.
- Layout: An array of scroll offsets that is used for tracking
layout-side scroll offsets.
- Layout: The scroll offsets stored in the `ScrollTree`. These are
currently unset and unused.
- Compositor: The scroll offsets stored in the `ScrollTree` mirrored
from layout.
- WebRender: The scrolled offsets stored in the WebRender spatial tree.
This change is the first step in combining the first three into the
layout `ScrollTree`. It eliminates the extra array of scroll offsets
stored in layout in favor of the storing them in the `ScrollTree`. A
followup change will eliminate the ones stored in the DOM.
- In addition the `ScrollState` data structure is eliminated as these
are
now stored in a `HashMap` everywhere when passing them via IPC.
- The offsests stored in layout can now never scroll past the boundaries
of the scrolled content.
Testing: This should not change behavior and is thus covered by existing
WPT tests.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: stevennovaryo <steven.novaryo@gmail.com>
This change has two parts which depend on each other:
1. An early exit in the layout process, which allows for skipping
display list construction entirely when nothing would change.
2. A simplification and unification of the way that "fake" animation
frames are triggered. Now this happens on an entire ScriptThread at
once and is based on whether or not any Pipeline triggered a display
list update.
Animations are never canceled in the compositor when the Pipeline
isn't updating, instead the fake animation frame is triggered far
enough in the future that an unexpected compositor tick will cancel
it. This could happen, for instance, if some other Pipeline in some
other ScriptThread produced a new display list for a tick. This makes
everything simpler about these ticks.
The goal is that in a future change the ScriptThread-based animation
ticks will be made more generic so that they can throttle the number of
"update the rendering" calls triggered by script.
This should make Servo do a lot less work when moving the cursor over a
page. Before it would constantly produce new display lists.
Fixes: #17029.
Testing: This should not cause any web observable changes. The fact that
all WPT tests keep passing is the test for this change.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This is a minor cleanup that simplifies the construct of
`StackingContextTree`. The two arguments removed are derived from the
`FragmentTree` which is already passed as an argument.
Testing: This should not change behavior and is thus covered by existing
tests.
Signed-off-by: Martin Robinson <mrobinson@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>
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>
Previously, when the theme was set it was only set on currently active
`Window`s. This change makes setting the `Theme` stateful. Now the
`Constellation` tracks what theme is applied to a `WebView` and properly
passes that value to new `Pipeline`s when they are constructed. In
addition, the value is passed to layout when that is constructed as
well.
Testing: this change adds a unit test.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
This allows to skip rebuilding the box tree when it's only necessary to
rebuild the stacking context tree.
Bumps Stylo to https://github.com/servo/stylo/pull/187
Testing: Unneeded (no behavior change). Just improving performance.
However, this adds a new test for dynamic changes of `z-index`, which we
were breaking in an earlier iteration of this patch.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
This fixes an issue where a viewport change did not trigger a reflow,
when the restyle damage was was otherwise REPAINT. Viewport changes
mean changes to the initial containing block, which is one of the main
inputs to layout. This should trigger a reflow always.
Testing: Unfortunately, our testing infrastructure is not good enough
yet
to test changes to layout when resizing the `WebView`, so it is quite
difficult to write tests for this change.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
When the computed restyle damage is empty, do not do a layout. Instead,
just rebuild the display list. In the future, even that can be omitted,
but that requires changes to the compositor.
These kind of relayouts commonly happen when the cursor is moving around
the page and no style rules cause changes to :hover.
Testing: This is covered existing WPT tests and should only have
performance
impacts. Unfortunately there are currently no performance tests.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
Previously, after a layout was finished (or skipped in the case of
repaint-only layout), both the stacking context tree and display list
were built. In the case of repaint-only layout, we should be able to
skip the reconstruction of the stacking context tree and only do display
list building.
This change does that, also generally cleaning and up and clarifying the
data structure used during this phase of layout. This opens up the
possibility of a new kind of incremental layout that does both repaint
and a rebuild of the stacking context tree.
On the blaster.html test case[^1], this reduces tightly-measured layout
time from ~45-50 milliseconds to ~25-30 milliseconds on my M3.
[^1]: https://gist.github.com/mrobinson/44ec87d028c0198917a7715a06dd98a0
Testing: There are currently no performance tests for layout. :( This
should
not modify the results of WPT tests.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
