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>
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>
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>
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>
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>
The structured cloning with transfer list
https://html.spec.whatwg.org/multipage/#structuredserializewithtransfer
throws a "DataCloneError" DOM expection by default if
serialization/transferral
is not possible, but a platform object can throw a custom excepton on
its serialization/transfer steps.
One example is OffscreenCanvas, which can throw
an "InvalidStateError" exception if the context mode is not none on
transfer steps.
https://html.spec.whatwg.org/multipage/#the-offscreencanvas-interface:transfer-steps
Testing: Improvements in the following tests
-
html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transferrable*
Fixes: #37919
Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
Follow the specification and make OffscreenCanvas objects are
transferable,
but not in case if there are a weak reference to placeholder canvas
element.
To handle it properly need to implement dedicated frame
provider/dispatcher
between canvas element (script thread) and offscreen canvas (dedicated
worker thread).
https://html.spec.whatwg.org/multipage/#the-offscreencanvas-interface:transferable-objects
Testing: Improvements in the following tests
-
html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.detachedcanvas.html
-
html/canvas/offscreen/manual/convert-to-blob/offscreencanvas.convert.to.blob*
-
html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfer*
-
html/infrastructure/safe-passing-of-structured-data/transfer-errors.window.js
Part of #24276
Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
Follow the HTML speficication and add missing 'transferToImageBitmap'
method to OffscreenCanvas interface.
https://html.spec.whatwg.org/multipage/#dom-offscreencanvas-transfertoimagebitmap
Testing: Improvements in the following tests
- html/canvas/offscreen/compositing/2d.composite.grid*
- html/canvas/offscreen/fill-and-stroke-styles/2d.gradient*
- html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas*
- html/canvas/offscreen/reset/2d.reset*
- html/canvas/offscreen/text/2d.text*
Fixes (partially): #34111
Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
Follow the HTML speficication and add missing 'convertToBlob' method
to OffscreenCanvas interface.
https://html.spec.whatwg.org/multipage/#dom-offscreencanvas-converttoblob
Testing: Improvements in the following tests
-
html/canvas/offscreen/manual/convert-to-blob/offscreencanvas.convert.to.blob*
-
html/canvas/offscreen/manual/wide-gamut-canvas/2d.color.space.p3.convertToBlobp3.canvas.html
Fixes: #24272
Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
Follow the HTML canvas specification and add missing
'setTransform(transform)' method to CanvasPattern interface.
https://html.spec.whatwg.org/multipage/#dom-canvaspattern-settransform
Testing: Improvements in the tests
- html/canvas/element/fill-and-stroke-styles/2d.pattern.transform*
- html/canvas/offscreen/fill-and-stroke-styles/2d.pattern.transform*
Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
I updated webidl, and all changes that bring, currently we still not
support float16array (there is no support in FF either). Most notable
change is refactored new_*/Constructors methods, that should now handle
HeapBufferSource more properly (with less unsafe).
Testing: Existing WPT tests
try run: https://github.com/sagudev/servo/actions/runs/15806083404Fixes: #37618 (although not tested)
---------
Signed-off-by: sagudev <16504129+sagudev@users.noreply.github.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>
Follow the HTML canvas specification and empty the list of subpaths
in context's current default path (step 2) on canvas context reseting
(reset() or set bitmap dimestion).
https://html.spec.whatwg.org/multipage/#reset-the-rendering-context-to-its-default-state
Testing: Improvements in the tests
- html/canvas/element/canvas-host/2d.canvas.host.initial.reset.path.html
- html/canvas/offscreen/canvas-host/2d.canvas.host.initial.reset.path*
Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
Follow to the HTML specification and support of Blob as
ImageBitmapSource
to able use it as intermediate instance in "fetch() -> Blob ->
ImageBitmap" execution sequence.
https://html.spec.whatwg.org/multipage/#imagebitmapsource
The specification says what these steps must run in parallel
(outside the createImageBitmap task), but currently loading bytes from
Blob
and later image decoding happen in synchronous order while
promise is fullfilled or rejected on bitmap task source.
https://html.spec.whatwg.org/multipage/#the-imagebitmap-interface:blob-4
Testing: Improvements in the following WPT tests
- html/canvas/element/compositing/2d.composite*
- html/canvas/element/drawing-images-to-the-canvas/2d.drawImage*
- html/canvas/element/manual/imagebitmap/createImageBitmap*
- html/canvas/offscreen/compositing/2d.composite
- html/canvas/offscreen/drawing-images-to-the-canvas/2d.drawImage
- webgl/tests/conformance/textures/image_bitmap_from_blob/*
Fixes (partially): #34112
Signed-off-by: Andrei Volykhin <andrei.volykhin@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>
Testing: No tests, if `test-wpt` broke again then we would notice pretty
quickly.
Fixes: https://github.com/servo/servo/issues/37124
---------
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
According to specification ImageBitmap objects are serializable objects
and transferable objects.
https://html.spec.whatwg.org/multipage/#the-imagebitmap-interface:imagebitmap-11
Testing:
- html/canvas/element/manual/imagebitmap/*
- html/infrastructure/safe-passing-of-structured-data/*
- html/webappapis/structured-clone/*
- workers/semantics/structured-clone/*
Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
To prevent any potential crash/OOM issues with "canvas" element
from "rogue" applications let's apply large size limitations for context
canvas2d's draw target to Servo (similar approach in Firefox/Chromium -
they limits width and height to 32767/65535 pixels).
Fixes: #36155, #34117, #30164, #24710
--
- [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
tests/wpt/tests/html/canvas/element/canvas-host/2d.canvas.host.size.large.html
tests/wpt/tests/html/canvas/offscreen/canvas-host/2d.canvas.host.size.large.html
tests/wpt/tests/html/canvas/offscreen/canvas-host/2d.canvas.host.size.large.worker.js
Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
Add missing "EnforceRange" attribute to interface methods
https://html.spec.whatwg.org/multipage/canvas.html#canvasimagedata
--
- [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
tests/wpt/tests/html/canvas/element/pixel-manipulation/2d.imageData*
tests/wpt/tests/html/canvas/offscreen/pixel-manipulation/2d.imageData*
Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
It also updates the FetchResponseListener to process CSP violations to
ensure that iframe elements (amongst others) properly generate the CSP
events. These iframe elements are used in the Trusted Types tests
themselves and weren't propagating the violations before.
However, the tests themselves are still not passing since they also use
Websockets, which currently aren't using the fetch machinery itself.
That is fixed as part of [1].
[1]: https://github.com/servo/servo/issues/35028
---------
Signed-off-by: Tim van der Lippe <tvanderlippe@gmail.com>
Signed-off-by: Josh Matthews <josh@joshmatthews.net>
Co-authored-by: Josh Matthews <josh@joshmatthews.net>
This patch implements the `FontFace` interface, but with some caveats
1. The interface is only exposed on `Window`. Support for Workers will
be handled in the future.
2. The concept of `css-connected` `FontFace` is not implemented, so
`@font-face` rules in stylesheets will not be represented in the DOM.
3. The constructor only supports using `url()` strings as source
and `ArrayBuffer` and `ArrayBufferView` are not supported yet.
A skeleton implementation of the `load` method of `FontFaceSet` is also
implemented in this patch. The intention is to support some web pages
that don't load without this method.
Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>
This follows the spec by introducing a new "Placeholder" canvas context
mode. The underlying offscreen canvas is kept accessible from the DOM
element to allow for the drawImage() implementation to work with canvases
that have transfered their control.
Signed-off-by: webbeef <me@webbeef.org>
* fixing test failures that involves throwing TypeError
Signed-off-by: L Ashwin B <lashwinib@gmail.com>
* handle all unknown values in a single fallback case
Signed-off-by: L Ashwin B <lashwinib@gmail.com>
* updating few more test- expectations
Signed-off-by: L Ashwin B <lashwinib@gmail.com>
---------
Signed-off-by: L Ashwin B <lashwinib@gmail.com>
