Intent to Ship: Support specifying width/height on <source> elements for <picture>

175 views
Skip to first unread message

Christian Biesinger

unread,
Feb 12, 2021, 4:42:59 PMFeb 12
to blink-dev
Contact emails

cbies...@google.com

Explainer

None

Specification

https://github.com/whatwg/html/pull/5894

Summary

This feature allows specifying a width and height on <source> elements
that are used in <picture>, which allows the image to compute an
aspect ratio from these attributes, e.g.:

<picture>
<source srcset="image.jpg" width="640" height="480">
<img style="width: 100%; height: auto;">
</picture>

In this example, the width of the image will adjust to the size of its
container and the height will follow the aspect ratio, even before the
image is loaded (avoiding a content shift).



Blink component

Blink>CSS

TAG review

part of https://github.com/w3ctag/design-reviews/issues/559

TAG review status

Not applicable

Risks



Interoperability and Compatibility

Very little risk; this matters primarily before the image is loaded
There is a small interop risk if a width/height is specified on the
source element that does not match the natural size of the image *and*
there is no other sizing specified elsewhere (on the <img>/in CSS),
such images could be incorrectly sized.



Gecko: No signal (https://github.com/mozilla/standards-positions/issues/485)

WebKit: No signal
(https://lists.webkit.org/pipermail/webkit-dev/2021-February/031692.html)

Web developers: No signals

Ergonomics

Reduces risk insofar as we now give <picture> similar behavior as
<img>/<video>/<canvas>



Activation

n/a



Security

n/a



Debuggability

This will show up in the styles panel like other style from
attributes, e.g. "aspect-ratio: auto 640 / 480"



Is this feature fully tested by web-platform-tests?

Yes

Tracking bug

https://crbug.com/1137794

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5737185317748736

This intent message was generated by Chrome Platform Status.

Simon Pieters

unread,
Feb 12, 2021, 5:48:16 PMFeb 12
to Christian Biesinger, blink-dev
Non-owner LGTM, I'm happy to see this!

> Web developers: No signals

As one data point: In September Jen Simmons asked on twitter what people want to know about the width and height attributes in HTML, and there were multiple replies asking about <picture> with multiple <source>s:

cheers,

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAPTJ0XGbxQ8EkdX%3DYPnBf5Ace6nunjh0Zw645nAKbund9HU9tA%40mail.gmail.com.


--
Simon Pieters

Anne van Kesteren

unread,
Feb 15, 2021, 1:56:57 AMFeb 15
to Christian Biesinger, blink-dev
On Fri, Feb 12, 2021 at 10:42 PM Christian Biesinger
<cbies...@chromium.org> wrote:
> Specification
>
> https://github.com/whatwg/html/pull/5894

To be clear, this PR is not ready. There's various checkboxes
unchecked, it hasn't had review from maintainers, it conflicts with
main, and there's an outstanding comment that indicates there needs to
be a behavior change...

Chris Harrelson

unread,
Feb 18, 2021, 3:24:04 PMFeb 18
to Anne van Kesteren, Christian Biesinger, blink-dev
Looks like the PR now has approvals and support, and the remaining comments are editorial.

LGTM1 to ship once the PR lands and WPTs are in place.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

Mike West

unread,
Feb 18, 2021, 3:24:50 PMFeb 18
to Chris Harrelson, Anne van Kesteren, Christian Biesinger, blink-dev
LGTM2, with the same qualifications as Chris.

-mike


Manuel Rego Casasnovas

unread,
Feb 18, 2021, 3:25:56 PMFeb 18
to Mike West, Chris Harrelson, Anne van Kesteren, Christian Biesinger, blink-dev
LGTM3, also adding the required tests as suggested on the spec PR.
> <mailto:blink-dev%2Bunsu...@chromium.org>.
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CADnb78jrw3BmiwjWRR-3cmKP%3D91jEqBEy3vpF0-weth8X_fcvw%40mail.gmail.com>.
>
> --
> You received this message because you are subscribed to the Google
> Groups "blink-dev" group.
> To unsubscribe from this group and stop receiving emails from it,
> send an email to blink-dev+...@chromium.org
> <mailto:blink-dev+...@chromium.org>.
> To view this discussion on the web visit
> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw8eV7%3DLa15FNz3yk7%2BeUprNxgxKHDtsocCw1Crk-mhkYw%40mail.gmail.com
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw8eV7%3DLa15FNz3yk7%2BeUprNxgxKHDtsocCw1Crk-mhkYw%40mail.gmail.com?utm_medium=email&utm_source=footer>.
>
> --
> You received this message because you are subscribed to the Google
> Groups "blink-dev" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to blink-dev+...@chromium.org
> <mailto:blink-dev+...@chromium.org>.
> To view this discussion on the web visit
> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKXHy%3Dc4wpK7eidEhXnsa1-GDHNGCeeb15ASu3-CrqkV%3Dm6M7w%40mail.gmail.com
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKXHy%3Dc4wpK7eidEhXnsa1-GDHNGCeeb15ASu3-CrqkV%3Dm6M7w%40mail.gmail.com?utm_medium=email&utm_source=footer>.

Christian Biesinger

unread,
Feb 26, 2021, 8:02:46 AMFeb 26
to Manuel Rego Casasnovas, Mike West, Chris Harrelson, Anne van Kesteren, blink-dev
Thanks, this has landed and will ship in Chrome 90.

Christian

Yoav Weiss

unread,
Feb 26, 2021, 8:29:42 AMFeb 26
to Christian Biesinger, Manuel Rego Casasnovas, Mike West, Chris Harrelson, Anne van Kesteren, blink-dev
🎉

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAPTJ0XFcjqDR0YvEy9a-bjOBSpUQWZXUiZ-9AJFyuhKjCVmc2w%40mail.gmail.com.
Reply all
Reply to author
Forward
0 new messages