Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-07 06:25:32 +01:00
Code Issues Projects Releases Packages Wiki Activity
servo/tests/wpt/meta/css/css-sizing/aspect-ratio
History
Exact
Mukilan Thiyagarajan 8a20e42de4
Add support for static SVG images using resvg crate (#36721) 
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:
![servo - resvg
img](https://github.com/user-attachments/assets/8ecb2de2-ab7c-48e2-9f08-2d09d2cb8791)

<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>
2025-05-27 11:02:40 +00:00
..
abspos-001.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
abspos-002.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
abspos-003.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
abspos-004.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
abspos-005.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
abspos-006.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
abspos-007.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
abspos-008.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
abspos-009.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
abspos-010.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
abspos-011.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
abspos-014.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
abspos-015.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
abspos-017.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
abspos-018.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
abspos-019.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
abspos-020.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
abspos-021.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
auto-margins-001.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-001.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-002.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-003.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-004.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-005.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-006.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-007.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-008.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-010.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-011.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-012.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-013.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-014.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-015.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-016.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-018.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-019.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-020.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-021.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-023.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-024.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-025.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-026.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-027.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-028.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-030.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-031.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-032.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-033.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-036.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-040.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-043.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-044.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-047.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-049.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-052.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-053.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-054.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-055.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-with-margin-collapsing-001.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
block-aspect-ratio-with-margin-collapsing-002.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
box-sizing-dimensions.html.ini Implement the aspect-ratio property for replaced elements (#32800) 2024-07-24 11:40:23 +00:00
box-sizing-squashed.html.ini Implement the aspect-ratio property for replaced elements (#32800) 2024-07-24 11:40:23 +00:00
flex-aspect-ratio-001.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-003.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-005.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-006.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-007.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-008.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-009.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-011.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-012.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-013.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-014.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-019.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-020.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-021.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-022.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-025.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-026.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-032.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-033.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-034.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-035.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-036.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-037.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-038.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-039.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
flex-aspect-ratio-045.html.ini Update web-platform-tests to revision b'ebe057a1153d34042bac1ff3dc944220876f69ec' (#33116) 2024-08-19 07:45:30 +00:00
flex-aspect-ratio-046.html.ini Update web-platform-tests to revision b'ebe057a1153d34042bac1ff3dc944220876f69ec' (#33116) 2024-08-19 07:45:30 +00:00
flex-aspect-ratio-047.html.ini Update web-platform-tests to revision b'ebe057a1153d34042bac1ff3dc944220876f69ec' (#33116) 2024-08-19 07:45:30 +00:00
flex-aspect-ratio-048.html.ini Update web-platform-tests to revision b'ebe057a1153d34042bac1ff3dc944220876f69ec' (#33116) 2024-08-19 07:45:30 +00:00
flex-aspect-ratio-053.html.ini layout: Enable flexbox by default on non-legacy layout (#33186) 2024-08-26 13:50:52 +00:00
flex-aspect-ratio-054.html.ini layout: Enable flexbox by default on non-legacy layout (#33186) 2024-08-26 13:50:52 +00:00
floats-aspect-ratio-001.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
fractional-aspect-ratio.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
grid-aspect-ratio-005.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
grid-aspect-ratio-006.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
grid-aspect-ratio-008.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
grid-aspect-ratio-018.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
grid-aspect-ratio-022.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
grid-aspect-ratio-024.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
grid-aspect-ratio-027.html.ini Enable layout_grid_enabled pref for all tests (#36316) 2025-04-03 18:48:05 +00:00
grid-aspect-ratio-028.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
grid-aspect-ratio-029.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
grid-aspect-ratio-032.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
grid-aspect-ratio-033.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
grid-aspect-ratio-034.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
grid-aspect-ratio-035.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
grid-aspect-ratio-036.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
grid-aspect-ratio-037.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
grid-aspect-ratio-039.html.ini Enable layout_grid_enabled pref for all tests (#36316) 2025-04-03 18:48:05 +00:00
grid-aspect-ratio-041.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
grid-aspect-ratio-042.html.ini Enable layout_grid_enabled pref for all tests (#36316) 2025-04-03 18:48:05 +00:00
grid-aspect-ratio-align-items-center.html.ini Update web-platform-tests to revision b'6cf69a4f431581e9438681abc776029308ee8a8c' (#34265) 2024-11-17 01:49:15 +00:00
intrinsic-size-001.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
intrinsic-size-002.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
intrinsic-size-003.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
intrinsic-size-004.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
intrinsic-size-005.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
intrinsic-size-006.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
intrinsic-size-008.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
intrinsic-size-010.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
intrinsic-size-011.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
intrinsic-size-012.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
intrinsic-size-013.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
intrinsic-size-014.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
intrinsic-size-015.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
percentage-resolution-001.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
percentage-resolution-002.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
percentage-resolution-003.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
percentage-resolution-004.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
percentage-resolution-005.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
quirks-mode-001.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
quirks-mode-002.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
quirks-mode-003.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
replaced-element-005.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
replaced-element-006.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
replaced-element-007.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
replaced-element-008.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
replaced-element-011.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
replaced-element-015.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
replaced-element-016.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
replaced-element-018.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
replaced-element-019.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
replaced-element-020.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
replaced-element-021.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
replaced-element-028.html.ini Implement the aspect-ratio property for replaced elements (#32800) 2024-07-24 11:40:23 +00:00
replaced-element-039.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
replaced-element-040.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
select-element-001.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00
sign-function-aspect-ratio.html.ini Update web-platform-tests to revision b'4c3d068f942231dc905ea283e4f82bd70801c37c' (#33461) 2024-09-15 01:26:41 +00:00
table-element-001.html.ini Bump stylo and enable aspect-ratio tests (#32803) 2024-07-18 13:28:39 +00:00