Track support for newly added spec: Dimensions (width/height) in <source> tags

[patricknelson]

Can we start tracking support for dimensions (width/height) in <source> tags? This was just recently added to the living HTML standard here:
https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element

Via:
whatwg/html#4968
whatwg/html#5894

Example:

<picture>
  <source srcset="https://via.placeholder.com/600x279" media="(max-width: 599px)" width="600" height="279">
  <source srcset="https://via.placeholder.com/1500x300" media="(max-width: 991px)" width="1500" height="300">
  <img src="https://via.placeholder.com/1500x300" width="1500" height="300">
</picture>

EDIT (May 6, 2022): Looks like this is available now on caniuse.com under the following two separate entries:

• HTMLSourceElement API: height
• HTMLSourceElement API: width

[scott-thrillist]

I love how I randomly stumbled on this issue and got an 🤯 when I found out dimensions attributes are now supported in Chrome 90. Just waiting on Safari...

[strarsis]

@patricknelson, @scott-thrillist: Does Safari support it, too, now (in 2022)?

[patricknelson]

Not sure right at this moment, but one quick way to test this would be to load up the web platform test suite. Found this test which might make it easy to validate: https://github.com/web-platform-tests/wpt/blob/master/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/picture-aspect-ratio.html

Docs on how to load it up in the browser: http://web-platform-tests.org/running-tests/from-local-system.html#via-the-browser

[hecktarzuli]

@strarsis - I tested this myself, and this seems to work in Safari 15.2, just waiting for more official confirmation and timing.

[patricknelson]

And once y'all find out, please cc that information here too. Ideally, this would be documented in the developer's Bible of Compatibility (caniuse.com) 😄

[hecktarzuli]

@patricknelson it looks like it went out in Safari 15 which contained Tech Preview 128 (referenced at the bottom)

[hecktarzuli]

I feel like this is already documented, it just wasn't obvious it was for aspect-ratio..
https://caniuse.com/mdn-api_htmlsourceelement_height

[patricknelson]

Thanks @hecktarzuli! I'll update the issue description to link to both width/height. Thankfully it appears if you happen to look for source and width (or height), albeit that might not show up for most folks if they look instead for dimensions or include the word element.

I think it's probably fine but maybe there's a way to expand it so it is slightly easier to find? 🤔 Might close now though since at least it is visible now on the caniuse.com site.

[hecktarzuli]

@patricknelson i was just expecting something more like this (below)
It's the same new properties, for the same reason (auto aspect-ratio), just for the <img> tag instead of <source>

[patricknelson]

Same here @hecktarzuli, that's how I would have originally found this (i.e. searching something like source width which works but also maybe source dimensions).

[Schweinepriester]

Positioned to ship in Firefox 106:

https://bugzilla.mozilla.org/show_bug.cgi?id=1694741#c23

status-firefox106: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → 106 Branch

[hecktarzuli]

@Schweinepriester it looks like it may be in 108 now.

[patricknelson]

Ok, looks like this is now documented 🚀. It's under source: width and source: height now (via mdn/browser-compat-data#18081).

• https://caniuse.com/mdn-html_elements_source_width
• https://caniuse.com/mdn-html_elements_source_height