Add the reflected 'sizes' IDL attribute for <image> element's DOM
interface which defines image sizes for different page layouts.
See https://html.spec.whatwg.org/multipage/#dom-img-sizes
Testing: Improvements in the following tests
- custom-elements/reactions/customized-builtins/HTMLImageElement.html
- html/dom/idlharness.https.html
-
html/semantics/embedded-content/the-img-element/relevant-mutations.html
Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
Follow the HTML specification and take into account that the HTML
`<image>/<source>` element inserting/removal steps should only be
counted as relevant mutations for `<image>` element if the parent of the
inclusive ancestor that was inserted/removed is the parent `<picture>`
element.
See <https://html.spec.whatwg.org/multipage/#relevant-mutations>.
Testing: Improvements in the following tests
-
html/semantics/embedded-content/the-img-element/relevant-mutations.html
Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
Automated downstream sync of changes from upstream as of 21-09-2025
[no-wpt-sync]
---------
Signed-off-by: WPT Sync Bot <ghbot+wpt-sync@servo.org>
Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>
Co-authored-by: Euclid Ye <yezhizhenjiakang@gmail.com>
Follow the HTML specification and check if the source element's MIME
type
('type' attribute) is supported while updating the source set of the
image element (step 5.8)
https://html.spec.whatwg.org/multipage/#update-the-source-set
Also add the missing descriptions for steps for the old and new methods:
- selecting an image source
- creating a source set from attributes
- updating the source set
- normalizing the source densities
Testing: Improvements in the following tests
-
html/semantics/embedded-content/the-img-element/update-the-source-set.html
- resource-timing/initiator-type/picture.html
Fixes: #36675
Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
Follow the specification and validate tokens of the "x/w/h" descriptors
before applying the rules for parsing float-pointing numbers or
non-negative integers.
https://html.spec.whatwg.org/multipage/#parsing-a-srcset-attribute (step
13)
Testing: Improvements in the following tests
-
html/semantics/embedded-content/the-img-element/srcset/parse-a-srcset-attribute.html
Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
Parsing the 'srcset' attribute of an image element may result in a parse
error
indicating a non-fatal mismatch between the input and the requirements.
https://html.spec.whatwg.org/multipage/#concept-microsyntax-parse-errorhttps://html.spec.whatwg.org/multipage/#parse-a-srcset-attribute
This error should not be a reason to stop parsing and may be used by the
user agent to signal a syntax error.
Other browsers generally ignore this error, and we do the same.
Testing: Improvements in the following tests
-
html/semantics/embedded-content/the-img-element/srcset/parse-a-srcset-attribute.html
Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
Implements document's active sandboxing flags. These are currently
populated only from CSP-derived sandboxing flags for a new document,
when defined in the CSP.
Testing: 1 new pass, and some new wpt's are added to test points in the
spec where these flags influence behaviour.
Signed-off-by: Shane Handley <shanehandley@fastmail.com>
While we don't perform any sniffing yet, it does now
check all relevant mime types. Before, we would only
check specific versions of specific mime types. However,
the specification is more elaborate, which MimeClassifier
already handles.
There are two new test failures, but they actually fail
in the same way in other browsers. These tests are still
being discussed what the correct behavior should be [1]
Part of #14024
[1]:
https://github.com/whatwg/mimesniff/issues/189#issuecomment-2081559661
---------
Signed-off-by: Tim van der Lippe <tvanderlippe@gmail.com>
It was originally throwing a TypeError, which was making WPT fail.
Testing: Many happy WPT subtests
Fixes: #39050
---------
Signed-off-by: Ashwin Naren <arihant2math@gmail.com>
Co-authored-by: Sam <16504129+sagudev@users.noreply.github.com>
Phantom line boxes should be treated as non-existing for most purposes,
so don't let them affect the baseline of their block container.
Testing: An existing test passes, and also adding a new one which
doesn't rely on `<button>`
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Instead of doing font selection and text shaping in `canvas`, move this
to `script`. This allows canvas to use the shared `Document`
`FontContext`, which has access to web fonts. In addition, ensure that
there is a font style accessible for `OffscreenCanvas` in workers.
Testing: This causes a number of WPT tests to start to pass as web fonts
are
supported on canvas again. In addition, some start to fail as they
expose other
issues:
- The lack of support for the `Context2D.fontStretch` property
- Issues with zerosize gradient interpolation.
- Differences between quoted and unquoted font family names. This seems
like
a timing issue with the way we are handling web fonts. The test seems to
be
expecting Local fonts to be available immediately (without waiting for
them
to load). This isn't how Servo works ATM. Seems like an issue with the
test.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
We really want to remove font-kit from dep tree, so this is the first
step into removing raqote from servo. While vello_cpu is not perfect
replacement, I am confident that we will resolve all issues eventually:
https://github.com/servo/servo/issues/38345 (most important ones already
have PRs).
Reviewable per commit.
Testing: Existing WPT tests.
Try run: https://github.com/sagudev/servo/actions/runs/17138369290
---------
Signed-off-by: sagudev <16504129+sagudev@users.noreply.github.com>
Testing: These changes should be covered by existing web platform tests
and `image`'s own test suite.
---------
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
We wouldn't handle the AttributeMutation::Removed for
attribute event listeners and wouldn't remove the
corresponding event listener. Added the necessary
logic (using the newly EventTarget::is_content_event_handler
to correctly only do this for known event handlers) and
added links to the relevant parts of the spec.
Signed-off-by: Tim van der Lippe <tvanderlippe@gmail.com>
This is an implementation of the `prevent_scroll` feature in the focus
transaction system. It allows to control whether focusing an element
should prevent scrolling or not.
Spec:
https://html.spec.whatwg.org/multipage/interaction.html#dom-focusoptions-preventscroll
Testing: Existing WPT tests
Signed-off-by: abdelrahman1234567 <abdelrahman.hossameldin.awadalla@huawei.com>
This is simpler, and has been successfully shipped in Blink.
See https://github.com/w3c/csswg-drafts/issues/12053 for more
information.
Testing: Improves WPT tests.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
- Use sqlite instead of heed. (one indexed database = one sqlite
database)
- Implement the backend for indexes
- Use keyranges where needed (as specified by the spec)
- Implement `getKey`
- Fix channel error messaging (led to a bunch of changes to how async
requests are handled)
Note: `components/net/indexeddb/engines/sqlite/serialize.rs` is unused;
I can delete it if needed.
Testing: Switching to sqlite eliminated many panics (exposing some new
failures).
Fixes: #38040
---------
Signed-off-by: Ashwin Naren <arihant2math@gmail.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>
This is an implementation for `scrollIntoView`. For now, it is called
when a certain element gains focus.
Testing: Existing WPT tests
Fixes: #24059
Signed-off-by: abdelrahman1234567 <abdelrahman.hossameldin.awadalla@huawei.com>
This updates the pull request from here
https://github.com/servo/servo/pull/32553 that looks to be dormant. The
main change is that I've switched out `reflector` with `document` based
off this suggestion
https://github.com/servo/servo/pull/32553#issuecomment-2179568743, and
the `GetLocation` and `SupportedPropertyNames` methods pass through the
values from `Document`.
The implementation details are otherwise the same as the original PR
Testing: I don't see any WPT tests for this feature, I could make a
custom test if desired
Fixes: https://github.com/servo/servo/issues/32536
---------
Signed-off-by: Leo Ring <leoring03@gmail.com>
According to my tests `OptimizeSpeed` slight improves performance and it
does NOT affect WPT results in negative way.
Testing: Tested by existing WPT tests.
---------
Signed-off-by: sagudev <16504129+sagudev@users.noreply.github.com>
Gated behind the feature flag `dom_navigator_sendbeacon_enabled` as the
`keep-alive` fetch parameter is crucial for real-life use cases such as
analytics requests.
Part of #4577
Part of #38302
Signed-off-by: Tim van der Lippe <tvanderlippe@gmail.com>
As noted in #38345, vello scenes only grow. While we can reset them when
clearing viewport (#38356) that is not enough. We need to reset scene on
each render (~each frame) and providing old frame as backdrop to new
scene. Be do this lazily so multiple rendering without any changes
should be cheaper, we still do GPUBuffer mapping, because that would
require more complex work.
Testing: Code functionality is covered by existing WPT tests, but we do
not have any performance test.
---------
Signed-off-by: sagudev <16504129+sagudev@users.noreply.github.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>
Vello scene only ever grows, so we need to clear it as soon as it's
possible (in clear rect). This PR also adds ignore_clips to
vello_backend (already exists in vello_cpu_backend).
Testing: Behavior is verified by existing tests, as this is mainly a
change for performance. There are currently no performance tests. This
makes bunnymark actually playable (from 3 FPS to 20 FPS on vello_cpu).
---------
Signed-off-by: sagudev <16504129+sagudev@users.noreply.github.com>
vello_cpu does not have any tests timeouts, because we do not need
download stuff from GPU as all work happens on CPU. So performance wise
it's better then classic vello at least for our usecase. There are some
vello bugs, but I think we will be able to sort them out within
upstream, eventually. Interestingly enough there are no new PASS like
they were with classic vello.
Difference with raqote can be observed here:
https://github.com/sagudev/servo/actions/runs/16549241085/attempts/1#summary-46802486798
## Known vello problems:
- https://github.com/linebender/vello/issues/1119
- https://github.com/linebender/vello/issues/1056
-
`/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.coloralpha.html`
- `kurbo::Cap::Butt` is defect (only visible with big lineWidth)
https://github.com/linebender/vello/issues/1063
- `/html/canvas/element/line-styles/2d.line.cross.html`
- `/html/canvas/element/line-styles/2d.line.miter.acute.html`
- other lack of strong correct problems
(https://github.com/linebender/vello/issues/1063#issuecomment-2998084736):
- `/html/canvas/element/path-objects/2d.path.rect.selfintersect.html`
- `putImageData(getImageData(...), ...)` is lossy (precision problems,
might be due to ImageData being unmultiplied)
-
`/html/canvas/element/pixel-manipulation/2d.imageData.put.unchanged.html`
Testing: Tested using vello_cpu_canvas subsuite
---------
Signed-off-by: sagudev <16504129+sagudev@users.noreply.github.com>
Add vello backend by implementing Backend traits in canvas crate (so
this lives in canvas_paint_thread - embedded process). Current
implementation uses normal wgpu, so we block on GPU work. Vello backend
is gated behind `vello` feature and `dom_canvas_vello_enabled` pref.
Feature-wise this backend is on on par with raqote (sometimes better
sometimes worse), but performance wise it's worse.
## Known vello problems:
- image roundtrip does not work (fixed in
https://github.com/linebender/vello/pull/974)
- https://github.com/linebender/vello/issues/1066 (fixed)
- clip layers are not working properly:
https://github.com/linebender/vello/issues/1061
- `/html/canvas/element/pixel-manipulation/2d.imageData.put.*`
- `/html/canvas/element/path-objects/2d.path.clip.intersect.html`
- https://github.com/linebender/vello/issues/1056
-
`/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.coloralpha.html`
- `kurbo::Cap::Butt` is defect (only visible with big lineWidth)
https://github.com/linebender/vello/issues/1063
- `/html/canvas/element/line-styles/2d.line.cross.html`
- `/html/canvas/element/line-styles/2d.line.miter.acute.html`
- other lack of strong correct problems
(https://github.com/linebender/vello/issues/1063#issuecomment-2998084736):
- `/html/canvas/element/path-objects/2d.path.rect.selfintersect.html`
- There is currently no way to do put image properly in vello as we
would need to ignore all clips and other stuff (we try to work around
this on best effort basis)
https://github.com/linebender/vello/issues/1088
- `/html/canvas/element/pixel-manipulation/2d.imageData.put.*`
- precision problems
- `/html/canvas/element/path-objects/2d.path.stroke.scale2.html`
- `/html/canvas/element/path-objects/2d.path.arc.scale.1.html`
## Known servo problems
- bad performance due to blocking on GPU work
- some get/put intensive tests `TIMEOUT`
- proper shadow support (non-blocker as we already are living without it
now)
- support for rect shadow is there but unimplemented currently as that's
the state in raqote
Testing: `mach try vello` will run normal WPT (with raqote) +
vello_canvas subsuite that runs only on `/html/canvas/element`. All
subsuite expectations are stored separately.
Fixes: #36823Fixes: #35230
---------
Signed-off-by: sagudev <16504129+sagudev@users.noreply.github.com>
HTMLImageElement was missing the dimension source attribute, as step 9
from
[here](https://html.spec.whatwg.org/multipage/images.html#updating-the-source-set)
wasn't implemented. This meant that for an element like this:
```html
<picture>
<source media="(min-width: 1000px)"
srcset=""
width="84" height="29">
<img
src=""
width="25" height="25" alt="Wikimedia Foundation" lang="en" loading="lazy">
</picture>
```
The `width` and `height` attributes of the source tag were being
ignored. This broke stuff like these icons on the main page of
Wikipedia.
**Original:**
<img width="2252" height="229" alt="image"
src="https://github.com/user-attachments/assets/fa3fdd9d-5f91-43d4-bc9d-784b0a836d44"
/>
**Fixed:**
<img width="2252" height="229" alt="image"
src="https://github.com/user-attachments/assets/6f4ca4ae-e764-4394-ac31-9a92bbb456ab"
/>
Testing: If there isn't an existing test that covers this I'll make one,
waiting for the github runner to tell me whether this is covered and
then I'll amend the PR
---------
Signed-off-by: Leo Ring <leoring03@gmail.com>
Signed-off-by: Xiaocheng Hu <hu.xiaocheng@huawei.com>
Signed-off-by: Xiaocheng Hu <xiaochengh.work@gmail.com>
Co-authored-by: Xiaocheng Hu <hu.xiaocheng@huawei.com>
Co-authored-by: Xiaocheng Hu <xiaochengh.work@gmail.com>
Depends on #37427.
In addition to the changes introduced by
https://github.com/servo/servo/pull/37065, there are several performance
improvements and nits as follows:
- Use the internal pseudo element for style matching, this will reduce
the performance regression by ~66%.
- Manual construction of the `Text` node inside a text container. This
is followed by the modification of the inner `Text` node instead of
using `SetTextContent` which is more expensive.
- Use `implemented_pseudo_element` instead of
`text_control_inner_editor` `NodeFlag` to handle the special cases that
these elements should follow, specifically the:
- focus delegation workaround;
- selections; and
- line height resolving.
- More documentation.
Servo's side of: https://github.com/servo/stylo/pull/217
Testing: No new unexpected WPT failure, except for the one introduced by
https://github.com/servo/servo/pull/37065/.
Fixes: #36307#37205
---------
Signed-off-by: stevennovaryo <steven.novaryo@gmail.com>
Add support of the ImageBitmapRenderingContext as "bitmaprenderer"
canvas context mode to RenderingContext/OffscreenRenderingContext
https://html.spec.whatwg.org/multipage/#imagebitmaprenderingcontext
It is initial implementation with public interface API but without
any display presentation support for HTMLCanvasElement.
Testing: Improvements in the following tests:
-
html/canvas/element/manual/imagebitmap/createImageBitmap-origin.sub.html
- html/canvas/offscreen/manual/text/canvas.2d.offscreen*
-
html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.nocrash.html
- imagebitmap-renderingcontext/*
Signed-off-by: Andrei Volykhin <andrei.volykhin@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 removes existing path(segment) abstractions in favor of
`kurbo::BezPath`, well actually wrapped `kurbo::BezPath`, to ensure
building of valid paths. This allows us better Path2D building in script
and doing all validation and segmentation there and also allows us
remove blocking is_point_in_path on Path2D as we can now do this in
script. Current path is still done on canvas thread side as it will be
harder to move to script (will be done as a follow up), but it now uses
this new path abstraction.
Using kurbo also allows us to ditch our manual svgpath parser with the
one provided by kurbo.
Same code is stolen from: https://github.com/servo/servo/pull/36821.
Testing: Existing WPT tests
Fixes: #37904
wpt run: https://github.com/sagudev/servo/actions/runs/16172191716
---------
Signed-off-by: sagudev <16504129+sagudev@users.noreply.github.com>
