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>
For example, if a test uses `let props = ...` then this was triggering
an exception because testharnessreport-servo.js already created a global
variable named `props`.
Testing: some wpt tests no longer result in ERROR
Signed-off-by: Oriol Brufau <obrufau@igalia.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>
The label that is displayed inside a `<select>` element is that of the
selected option, or it's text contents if the option does not have a
label. Therefore, we need to update the `<select>` shadow tree when the
contents of the selected option change.
Testing: Covered by existing web platform tests
Fixes https://github.com/servo/servo/issues/36926
Fixes https://github.com/servo/servo/issues/36925
---------
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
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 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>
https://github.com/user-attachments/assets/9aba75ff-4190-4a85-89ed-d3f3aa53d3b0
Among other things this adds a new `EmbedderMsg::ShowSelectElementMenu`
to tell the embedder to display a select popup at the given location.
This is a draft because some small style adjustments need to be made:
* the select element should always have the width of the largest option
* the border should be part of the shadow tree
Apart from that, it's mostly ready for review.
<details><summary>HTML for demo video</summary>
```html
<html>
<body>
<select id="c" name="choice">
<option value="first">First Value</option>
<option value="second">Second Value</option>
<option value="third">Third Value</option>
</select>
</body>
</html>
```
</details>
---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by
`[X]` when the step is complete, and replace `___` with appropriate
data: -->
- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] Part of https://github.com/servo/servo/issues/3551
- [ ] There are tests for these changes OR
- [ ] These changes do not require tests because ___
<!-- Also, please make sure that "Allow edits from maintainers" checkbox
is checked, so that we can help you if you get stuck somewhere along the
way.-->
<!-- Pull requests that do not address these steps are welcome, but they
will require additional verification as part of the review process. -->
---------
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
* feat: patch for video layout sizes
added rebase from main 2024/10/05
Co-authored-by: Josh Matthews <josh@joshmatthews.net>
Signed-off-by: eri <epazos@igalia.com>
* feat: take width and height parameters if provided
Signed-off-by: eri <epazos@igalia.com>
* chore: tidy the code and update test expectations
Signed-off-by: eri <epazos@igalia.com>
* feat: handle removing poster
Signed-off-by: eri <epazos@igalia.com>
* chore: update test expectations and remove debug code
Signed-off-by: eri <epazos@igalia.com>
* fix: issues after rebasing to main
Signed-off-by: eri <epazos@igalia.com>
* feat: pass src remove test and tidy
Signed-off-by: eri <epazos@igalia.com>
* chore: clippy fixes
Signed-off-by: eri <epazos@igalia.com>
* chore: update passing test expectations
Signed-off-by: eri <epazos@igalia.com>
* fix object-position-svg test
Signed-off-by: eri <epazos@igalia.com>
* fix unintentional override of video size and resize events
Signed-off-by: eri <epazos@igalia.com>
* change how resize events are sent to better match the spec
Signed-off-by: eri <epazos@igalia.com>
* simplify poster mutation handling
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
Signed-off-by: eri <eri@inventati.org>
* improved handling of intrinsic sizes
- differentiate between natural size and css size
- presentational attributes
- fallback ratio for video element
- handle more cases where the src/poster are added/removed
- aspect ratio hints
Signed-off-by: eri <epazos@igalia.com>
* update test expectations
Signed-off-by: eri <epazos@igalia.com>
* fix cleaning current frame
Signed-off-by: eri <epazos@igalia.com>
* update test expectations
Signed-off-by: eri <epazos@igalia.com>
* Apply suggestions from code review
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
Signed-off-by: eri <eri@inventati.org>
* More code review suggestions
Signed-off-by: eri <epazos@igalia.com>
* Prevent aspect-ratio:auto from pulling the ratio from the default object size
As resolved in https://github.com/w3c/csswg-drafts/issues/7524#issuecomment-1204462924
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
---------
Signed-off-by: eri <epazos@igalia.com>
Signed-off-by: eri <eri@inventati.org>
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Co-authored-by: Josh Matthews <josh@joshmatthews.net>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
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 change removes the `effective_writing_mode` concept and tries to
properly implement right-to-left layout support for all non-inline
writing modes. In general, what needs to happen is that rectangles
need to be converted to physical rectangles using the containing block.
A right-to-left rectangle's inline start is on the right physical side
of the containing block. Likewise a positive inline offset in
right-to-left text is a negative physical one.
The implementation here is pretty good for most layout modes, but floats
are still a bit in process. Currently, floats are processed in the
logical layout of the block container, but there still might be issues
with float interaction with mixed RTL and LTR.
While this does move us closer to supporting vertical writing modes,
this is still unsupported.
New failures:
- Vertical writing mode not supported:
- `/css/CSS2/floats/floats-placement-vertical-001b.xht`
- `/css/CSS2/floats/floats-placement-vertical-001c.xht`
- Absolutes inlines should avoid floats (#33323)
- `/css/css-position/position-absolute-dynamic-static-position-floats-004.html`
- No support for grid
- `/css/css-align/self-alignment/self-align-safe-unsafe-grid-003.html`
- `/css/css-position/static-position/inline-level-absolute-in-block-level-context-009.html`
- `/css/css-position/static-position/inline-level-absolute-in-block-level-context-010.html`
- Cannot reproduce these locally on any platform. Very mysterious:
- `/css/css-tables/row-group-margin-border-padding.html`
- `/css/css-tables/row-margin-border-padding.html`
- Exposes bugs we have related to hanging whitespace in preserved
whitespace inlines:
- `/css/css-text/white-space/trailing-space-and-text-alignment-rtl-003.html`
- `/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-023.html`
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Rakhi Sharma <atbrakhi@igalia.com>
This adds supports for right-to-left text assigning bidi levels to all
line items when necessary. This includes support for the `dir` attribute
as well as corresponding CSS properties like `unicode-bidi`. It only
implements right-to-left rendering for inline layout at the moment and
doesn't include support for `dir=auto`. Because of missing features,
this causes quite a few tests to start failing, as references become
incorrect due to right-to-left rendering being active in some cases,
but not others (before it didn't exist at all).
Analysis of most of the new failures:
```
- /css/css-flexbox/gap-001-rtl.html
/css/css-flexbox/gap-004-rtl.html
- Require implementing BiDi in Flexbox, because the start and
end inline margins are opposite the order of items.
- /css/CSS2/bidi-text/direction-applies-to-*.xht
/css/CSS2/bidi-text/direction-applies-to-002.xht
/css/CSS2/bidi-text/direction-applies-to-003.xht
/css/CSS2/bidi-text/direction-applies-to-004.xht
- Broken due to a bug in tables, not allocating the
right amount of width for a column.
- /css/css-lists/inline-list.html
- This fails because we wrongly insert a soft wrap opportunity between the
start of an inline box and its first content.
- /css/css-text/bidi/bidi-lines-001.html
/css/css-text/bidi/bidi-lines-002.html
/css/CSS2/text/bidi-flag-emoji.html
- We do not fully support unicode-bidi: plaintext
- /css/css-text/text-align/text-align-end-010.html
/css/css-text/text-align/text-align-justify-006.html
/css/css-text/text-align/text-align-start-010.html
/html/dom/elements/global-attributes/*
- We do not support dir=auto yet.
- /css/css-text/white-space/tab-bidi-001.html
- Servo doesn't support tab stops
- /css/CSS2/positioning/abspos-block-level-001.html
/css/css-text/word-break/word-break-normal-ar-000.html
- Do not yet support RTL layout in block
- /css/css-text/white-space/pre-wrap-018.html
- Even in RTL contexts, spaces at the end of the line must hang and
not be reordered
- /css/css-text/white-space/trailing-space-and-text-alignment-rtl-002.html
- We are letting spaces hang with white-space: pre, but they shouldn't
hang.
```
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Rakhi Sharma <atbrakhi@igalia.com>
If a (min/max)-(height/width) property is set, we still need to respect
the intrinsic ratio of the element if it exists. The previous code was
simply clamping the element size after doing the sizing calculations
once, but this leads to an incorrect aspect ratio.
Signed-off-by: valadaptive <valadaptive@protonmail.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.
* 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.
* Update web-platform-tests to revision b'dd47ca67f55ac9df45235b2335200fb885dd1357'
* Update test expectations
---------
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
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
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.
