Add the reflected 'sizes' IDL attribute for <image> element's DOM
interface which defines image sizes for different page layouts.
See https://html.spec.whatwg.org/multipage/#dom-img-sizes
Testing: Improvements in the following tests
- custom-elements/reactions/customized-builtins/HTMLImageElement.html
- html/dom/idlharness.https.html
-
html/semantics/embedded-content/the-img-element/relevant-mutations.html
Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
Follow the HTML specification and take into account that the HTML
`<image>/<source>` element inserting/removal steps should only be
counted as relevant mutations for `<image>` element if the parent of the
inclusive ancestor that was inserted/removed is the parent `<picture>`
element.
See <https://html.spec.whatwg.org/multipage/#relevant-mutations>.
Testing: Improvements in the following tests
-
html/semantics/embedded-content/the-img-element/relevant-mutations.html
Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
Follow the HTML specification and check if the source element's MIME
type
('type' attribute) is supported while updating the source set of the
image element (step 5.8)
https://html.spec.whatwg.org/multipage/#update-the-source-set
Also add the missing descriptions for steps for the old and new methods:
- selecting an image source
- creating a source set from attributes
- updating the source set
- normalizing the source densities
Testing: Improvements in the following tests
-
html/semantics/embedded-content/the-img-element/update-the-source-set.html
- resource-timing/initiator-type/picture.html
Fixes: #36675
Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
Follow the specification and validate tokens of the "x/w/h" descriptors
before applying the rules for parsing float-pointing numbers or
non-negative integers.
https://html.spec.whatwg.org/multipage/#parsing-a-srcset-attribute (step
13)
Testing: Improvements in the following tests
-
html/semantics/embedded-content/the-img-element/srcset/parse-a-srcset-attribute.html
Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
Parsing the 'srcset' attribute of an image element may result in a parse
error
indicating a non-fatal mismatch between the input and the requirements.
https://html.spec.whatwg.org/multipage/#concept-microsyntax-parse-errorhttps://html.spec.whatwg.org/multipage/#parse-a-srcset-attribute
This error should not be a reason to stop parsing and may be used by the
user agent to signal a syntax error.
Other browsers generally ignore this error, and we do the same.
Testing: Improvements in the following tests
-
html/semantics/embedded-content/the-img-element/srcset/parse-a-srcset-attribute.html
Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
Testing: These changes should be covered by existing web platform tests
and `image`'s own test suite.
---------
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
This is an implementation for `scrollIntoView`. For now, it is called
when a certain element gains focus.
Testing: Existing WPT tests
Fixes: #24059
Signed-off-by: abdelrahman1234567 <abdelrahman.hossameldin.awadalla@huawei.com>
Follow the HTML specification and reject the pending image decode
promises
on any current request mutation.
https://html.spec.whatwg.org/multipage/#updating-the-image-data (step
18)
https://html.spec.whatwg.org/multipage/#dom-img-decode (step 3)
Fulfill and reject image decode promises by queueing
a global tasks on the DOM manipulation task source.
Testing: Improvements in the following tests
- html/semantics/embedded-content/the-img-element/decode/*
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>
This refactors some of the code that is shared with toDataURL, and
updates the webidl definition to match the current spec (using a default
value for the mime type).
Signed-off-by: webbeef <me@webbeef.org>
* 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>
* fix loop with chars().enumerate() by using find()
Signed-off-by: Kopanov Anton <anton.kopanov@ya.ru>
* Add documentation to parser and fix some small issues
- Rename the properties of `Descriptor` so that they are full words
- Use the Rust-parser to parse doubles
- Add documentation and restructure parser to be more readable
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
---------
Signed-off-by: Kopanov Anton <anton.kopanov@ya.ru>
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
* Update web-platform-tests to revision b'dd47ca67f55ac9df45235b2335200fb885dd1357'
* Update test expectations
---------
Co-authored-by: Martin Robinson <mrobinson@igalia.com>