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 change adds a shadow-tree widget for `<input type=color>` elements.
It also involves some changes to the way layout interacts with the DOM,
because currently all `input` and `textarea` elements are rendered as
plain text and their descendants are ignored. This obviously doesn't
work for `<input type={color, date, range, etc}>`.
<details><summary>HTML used for the screenshot above</summary>
```html
<input type=color>
```
</details>
Testing: I doubt that this affects WPT tests, because the appearance and
behaviour of the widget is almost entirely unspecified.
---------
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
Instead of resolving the canvas background properties (essentially
keeping a possible reference to the `<body>`'s style) during fragment
tree construction, wait until painting to possibly find the style on an
appropriate `<body>` fragment. This is possible now because `Fragment`
keeps a list of flags with relevant information about the root and
`<body>` elements.
A benefit of this approach is that styles aren't cached in the fragment
tree, which would be problematic for incremental layout. In addition,
the old code was making an effort to transform the `<body>`'s background
by the root element's transform. Only Safari does this and there was
a resolution the WG that this should not happen in
https://github.com/w3c/csswg-drafts/issues/6683.
Testing:
- `/css/css-transforms/transform-translate-background-001.html`
- `/css/css-transforms/transform-translate-background-002.html`
- `/css/CSS2/floats/float-root.html`
Fixes: #30475.
Closes: #30569.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This feature is part of --enable-experimental-web-platform-features, so
it should be enabled on all tests.
This causes some new failures, but mostly it's because the tests were
timing out instead of running the failing subtests.
This is part of #36315
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
* support CSS `will-change`
* update wpt-test result
* Enable css-will-change test
* Update css-will-change test results
* Check transformable before will-change; update wpt-results
* Solve merge conflict
* Update Cargo.toml and Cargo.lock
* Mark new failing test-cases
---------
Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>
* Implement Element.shadowRoot attribute
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
* Remove comments about shadowdom not being exposed for web content
This is obviously not the case anymore.
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
* Update WPT expectations
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
---------
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
This adds support for generic font families in Servo and allows for
configuration of them as well as their default font sizes. One
interesting fix here is that now monospace default to 13px, like it does
in other browsers.
In addition to that, this exposes a new interface in Stylo which allows
setting a default style. This is quite useful for fonts, but also for
other kinds of default style settings -- like text zoom.
Fixes#8371.
Fixes#14773.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Mukilan Thiyagarajan <mukilan@igalia.com>
This adds initial support for table captions. To do this, the idea of
the table wrapper becomes a bit more concrete. Even so, the wrapper is
still reponsible for allocating space for the grid's border and padding,
as those properties are specified on the wrapper and not grid in CSS.
In order to account for this weirdness of HTML/CSS captions and grid are
now laid out and placed with a negative offset in the table wrapper
content rect.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This only paints text in input fields. Selection and cursor are still
not painted.
In addition to adding this feature, the change also updates the
user-agent.css with the latest from the HTML specification. Extra
padding and extraneous settings (such as a bogus line-height and
min-height) are also removed from servo.css. This leads to some new
passes.
There are some new passes, this introduces failures as inserting text
reveals issues that were hidden before. Notably:
- failures in `/html/editing/editing-0/spelling-and-grammar-checking/`:
We do not support spell-checking.
- Most of the rest of the new failures are missing features of input
boxes that are also missing in legacy layout.
This requires passing through information about whether or not the
element in question is replaced when checking to see if it's
transformable and transitively all functions that make decisions about
containing blocks. A new FragmentFlag is added to help track this -- it
will be set on both the replaced items BoxFragment container as well as
the Fragment for the replaced item itself.
Fixes#31806.
This brings the version of WebRender used in Servo up-to-date with Gecko
upstream. The big change here is that HiDPI is no longer handled via
WebRender. Instead this happens via a scale applied to the root layer in
the compositor. In addition to this change, various changes are made to
Servo to adapt to the new WebRender API.
Co-authored-by: Mukilan Thiyagarajan <mukilan@igalia.com>
Put table cell content fragments into a hieararchy of fragments that
include their table row and table row group fragments. This ensures that
things like relative positioning and transforms set on rows and row
groups properly affect cells and cell content.
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
The specification gives instructions for how these values should be
propagated. The other big changs here is that they aren't applied to the
`<body>`.
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
Anonymous tables should not use legacy pseudos, as the legacy layout
engine had them inherit lots of random properites that lead to bad
layout in the new layout engine.
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
Absolutes need to be placed at their hypothetical position as if the
position value was static. This position differs based on the value they
had before blockification. The code for placing absolutes was taking
into account the original display for the inline value, but not for the
block value. A static `display: block` box would placed at a new block
position past the end of the linebox.
* layout: Implement support for `line-height` and `vertical-align`
This is an initial implementation of proper `line-height` and
`vertical-align` support. While this change includes the bulk of the
work there are still many missing pieces for full support. In particular
some big missing things are:
- Flex containers do not properly compute their baselines. The idea is
to tackle this in a followup change. This causes various flex tests
to start failing because everything used to be top aligned.
- The implementation of the line-height quirks (only active in quirks
mode) are incomplete. While the quirk works in many cases, there are
still some cases where it is handled incorrectly. This requires more
redesign and refinement, better suited for a followup.
- Most of the features are CSS 3 such as precision control of the
baseline and first and last baselines are not implemented. This
change gets us close to CSS 2.x support.
While there are many new test passes with this change some tests are
starting to fail. An accounting of new failures:
Tests failing also in Layout 2013:
- /css/css2/positioning/toogle-abspos-on-relpos-inline-child.html (only passes in Chrome)
- /css/CSS2/fonts/font-applies-to-001.xht (potentially an issue with font size)
Invalid tests:
- /css/CSS2/visudet/inline-block-baseline-003.xht
- /css/CSS2/visudet/inline-block-baseline-004.xht
- These are are failing in all browsers. See https://bugs.chromium.org/p/chromium/issues/detail?id=1222151.
Missing table support:
- /_mozilla/mozilla/table_valign_middle.html
Missing `font-size-adjust` support :
- /css/css-fonts/font-size-adjust-zero-2.html (also failing in 2013)
Incomplete form field support :
- /html/rendering/widgets/the-select-element/option-add-label-quirks.html (label isn't rendered so button isn't the right size in quirks mode due to line height quirk)
Need support for calculating flexbox baseline:
- /css/css-flexbox/fieldset-baseline-alignment.html
- /css/css-flexbox/flex-inline.html
- /css/css-flexbox/flexbox-baseline-multi-line-horiz-001.html
- /css/css-flexbox/flexbox-baseline-single-item-001a.html
- /css/css-flexbox/flexbox-baseline-single-item-001b.html
Failing because we don't create anonymous inline boxes for text children of blocks:
- /css/CSS2/linebox/anonymous-inline-inherit-001.html
Passes locally (potentially related to fonts):
- /css/CSS2/css1/c414-flt-fit-004.xht
- /css/css-transforms/transform-input-017.html
- /html/obsolete/requirements-for-implementations/the-marquee-element-0/marquee-min-intrinsic-size.html
- /css/css-fonts/first-available-font-005.html
- /css/css-fonts/first-available-font-006.html
* Some cleanups after live review with @mukilan
Also update results.
Layout asserts that it never creates stacking contexts that have a zero
scale, yet it doesn't prevent the creation of those stacking contexts.
This change stops their creation at an earlier stage.
Fixes#30118.
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.
Improve the calculation of the block size of line boxes and all their
component elements. Even empty spans can increase the size of the line
based on their font-size. Elements that have a line-height should
increase the block size of the line, but that setting should not effect
their own size.
In addition to the new passes there are some new failures
Failing because a progression exposes the real issue these tests are
testing:
- css/css-color/t32-opacity-offscreen-multiple-boxes-1-c.xht
- css/css-color/t32-opacity-offscreen-multiple-boxes-2-c.xht
Likely failing because of vertical-align and another sizing issue:
- css/css-transforms/perspective-untransformable-no-stacking-context.html
Failing because a progression reveals another failure:
- html/rendering/non-replaced-elements/hidden-elements.html
Co-authored-by: Mukilan Thiyagarajan <mukilan@igalia.com>
* Sort stacking contexts and stacking containers by painting order
* fix stealing of stacking containers; fix interleaving with fragments
* actually positioned stacking containers should be stolen too
* update expectations and clean up panic changes
* rework naming and docs
* rename s_c_a_p_s_c to real_s_c_a_p_s_c; fix docs
* rename InlineStackingContainer to AtomicInlineStackingContainer
* rework debug logging to use PrintTree
* clean up docs and PrintTree output
* don't panic unless cfg!(debug_assertions) is true
* update expectations
* Upgrade vendored version of WebRender
* Patch WebRender: upgrade version of gleam
* Restore hit testing implementation
* Fix WebRender warnings
* Adapt Servo to new WebRender
* Update results
* Add a workaround for #30313
This slightly expands text boundaries in order to take into account the
fact that layout isn't measuring glyph boundaries.
* Fix `mach test-wpt` to make crash tests work
There are two issues related to crash tests:
1. test-wpt is unable to find existing crash tests even when
called with --test-types=crashtests. The fix here is to
add crashtests to the default test suite types to python/wpt/run.py
2. When running in headless mode, crashes in style threads
don't cause servo to crash because the logic in constellation.rs
currently calls handle_panic only when the top-level browsing
context id is some value. Since style pool threads are shared,
they always generate Panic messages with None as top-level
browsing context id.
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>
* Send bactrace to stderr and capture it in test runner
Servo's panic hook writes backtraces to stdout. This
patch changes it so they are written to stderr.
The crash test executor for servo in WPT grouping formatter
was also not capturing the output correctly for crashtests
as the log events were being aggregated based on thread name
which doesn't seem to match correctly in case of crashtests.
This patch also fixes the log grouping logic to be based on
test name.
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>
* crashtests: update expectations for layout 2020
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>
* crashtests: update expectations for layout 2013
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>
* remove outdated & intemittent test expectations
Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>
---------
Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
* Update web-platform-tests to revision b'e16853520ae70ba309108ccff87a7816f74be4dd'
* Remove new spurious result
---------
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
