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>
This PR makes it so the `resolution` factor in `image-set` also affects
the image size.
For instance, in the example below:
```css
background-image: image-set("./small.png" 1x, "./large.png" 2x);
```
if `large.png` is used, an image which is 32x32 will be rendered as
16x16. This is specified
in <https://drafts.csswg.org/css-images-4/#image-set-notation>.
Testing:
- `css/css-images/image-set/image-set-resolution-002.html`
---------
Signed-off-by: tobinio <Tobias.frischmann1@gmail.com>
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Josh Matthews <josh@joshmatthews.net>
This also makes a couple small improvements:
- Rename `IntrinsicSizes` to `NaturalSizes` which reflects more
modern spec language.
- Move the conversion of Stylo's `ImageRendering` to WebRender's
version to a `ToWebRender` trait implementation.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This also ignores a clippy warning for a new function (and a similar
existing one), until this code can be refactored to use temporary Rust
strutures to carry display list building state.
There are a few new test failures here:
- FAIL [expected PASS] /css/css-images/image-set/image-set-conic-gradient-rendering.html
- FAIL [expected PASS] /css/css-images/image-set/image-set-repeating-conic-gradient-rendering.html
These fail because Servo does not yet support `image-set()`.
- FAIL [expected PASS] /css/filter-effects/filter-function/filter-function-conic-gradient.html
- FAIL [expected PASS] /css/filter-effects/filter-function/filter-function-repeating-conic-gradient.html
These fail because Servo does not support the very early filter effects
specification.
- FAIL [expected PASS] /html/canvas/element/manual/fill-and-stroke-styles/conic-gradient-rotation.html
- FAIL [expected PASS] /html/canvas/element/manual/fill-and-stroke-styles/conic-gradient.html
These fail because this change only adds support for CSS conical
gradients. Another set of changes will be necessary to support this for
Canvas.
They are not transitionable:
https://drafts.csswg.org/css-transitions-1/#transitionable
There are some new failures in background-image-interpolation.html,
but I think the test is wrong, because it expects background-image
to be transitionable, even though the spec defines it with a discrete
animation type.
Most tests were only being run for layout-2013, not for layout-2020.
This wasn't great since layout-2020 is now the default.
So this patch unifies the lists of included tests for both layouts.
For layout-2013 this implies adding css/css-content/, css/css-logical/
and css/css-masking/clip/.
For layout-2020 this implies adding several additional css tests, and
also tests like dom/, js/, html/, etc.
