1694741 - RFE: Implement width/height attributes on source elements

Status: RESOLVED FIXED

(Core :: Layout, enhancement, P3)

Description

[Christian :Biesinger (don't email me, ping me on IRC)]

As described in https://github.com/whatwg/html/pull/5894/files

Maps width/height attributes on the <source> element in a <picture> to the width/height/aspect-ratio properties on the <img> element.

Comment 1

[Sebastian Zartner [:sebo]]

This sounds like something that should be documented on MDN web docs. Therefore I'm adding the dev-doc-needed keyword.

Sebastian

Comment 2

[philippwrann]

having native support for loading="lazy" - this is the last remaining blocker for me to remove custom responsive-image implementations in favor of a standard-implementation. I am really looking forward to this - blink already got support:

https://chromestatus.com/feature/5737185317748736#details

Also - IMO - this is by far the most intuitive and logical way of achieving a responsive image. Using width/height attributes instead of new aspectRatio props or weird "100w 75h" queries in srcset strings feels way more natural.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

We do support loading=lazy, this is about supporting the width and height attributes mapping to aspect-ratio on <source> rather than just <img>, which is useful only when the different sources have different sizes.

Comment 4

[philippwrann]

Yes i know loading=lazy works - it seems i did not manage to make myself clear. For a fully functional responsive image implementation i need a combination of different images (with different aspect ratios) for different sizes and need to load them lazily. Loading them lazily would now work using loading="lazy" but i can not use it because there is no native support for different aspect ratios on the picture element. So i would need to workaround that by using multiple picture elements or keeping my custom implementation for the moment.

Its about this example:

<picture class="block-image">
<source media="(min-width: 640px)" srcset="large-src.jpg" width="600" height="300" />
<source srcset="small-src.jpg" width="400" height="300" />
<img src="small-src.jpg" loading="lazy" width="400" height="300" />
</picture>

<style>
picture.block-image img {width: 100%; height: auto}
</style>

At the moment this would result in wrong image-sizes on large screens, so the browser would need to redraw after the large src has been loaded and inserted.

But okay - just forget about all of the lazy topic, it was just a more complex example.

As you can see in the appended link my post was about widht/height in pciture/source.

Really looking forward to this to be implemented in firefox - using the example above i could drop lots of custom js codes from my projects.

Comment 6

[Johannes Odland]

@seba(In reply to Sebastian Zartner [:sebo] from comment #1)

This sounds like something that should be documented on MDN web docs. Therefore I'm adding the dev-doc-needed keyword.

Sebastian

Documentation on MDN is now in place.

Compat info is missing, but it should be supported in both Safari and Chrome now.

Comment 7

[d4kmor]

Attachment: source-dimensions.png

Test on 26 May 2022

Comment 8

[Johannes Odland]

I can’t find any WPT tests for natural width/height/aspect-ratio set through source width and height.

Anyone know if they exist or if they’re missing?

Comment 9

[Christian :Biesinger (don't email me, ping me on IRC)]

(In reply to Johannes Odland from comment #8)

I can’t find any WPT tests for natural width/height/aspect-ratio set through source width and height.

Anyone know if they exist or if they’re missing?

Are you looking for https://wpt.fyi/results/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/picture-aspect-ratio.html?label=experimental&label=master&aligned ?

Comment 10

[Johannes Odland]

(In reply to Christian :Biesinger (don't email me, ping me on IRC) from comment #9)

(In reply to Johannes Odland from comment #8)

I can’t find any WPT tests for natural width/height/aspect-ratio set through source width and height.

Anyone know if they exist or if they’re missing?

Are you looking for https://wpt.fyi/results/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/picture-aspect-ratio.html?label=experimental&label=master&aligned ?

Yes. Thank you 🙏. I was looking under css-sizing/aspect-ratio.

Comment 11

[Christian :Biesinger (don't email me, ping me on IRC)]

(In reply to Johannes Odland from comment #10)

(In reply to Christian :Biesinger (don't email me, ping me on IRC) from comment #9)

Are you looking for https://wpt.fyi/results/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/picture-aspect-ratio.html?label=experimental&label=master&aligned ?

Yes. Thank you 🙏. I was looking under css-sizing/aspect-ratio.

Ah, yeah, since this is an HTML feature, not CSS, I did not put it there.

Comment 12

[Boris Chiou [:boris]]

Attachment: Bug 1694741 - Part 1: Support width and height attributes in HTMLSourceElement's webidl.

This also introduce a pref which protect these two attributes:
dom.picture_source_dimension_attributes.enabled.

The test is in
html/rendering/replaced-elements/attributes-for-embedded-content-and-images/picture-aspect-ratio.html.

We will enable the preference for this test (and nightly build) in the next
patch after we implment the mapping part.

Comment 13

[Boris Chiou [:boris]]

Attachment: Bug 1694741 - Part 6: Map width/height attributes to the style of img elements.

This patch will use the width/height attributes from <source> to override
width/height/aspect-ratio CSS property values of <img> elements.

So basically, we need to introduce an extra nsMappedAttribtue member in
HTMLSourceElement (and it only stores width and height attributes).
And then we use it as an extra declarations (which are generated by
Gecko_GetExtraContentStyleDeclarations()) so we can override the
declarations created from presentation attributes of <img>.

Besides, we need to make sure <img> elements get restyled in the
following cases:

1. width/height attributes is changed in <source> elements
2. <source> is inserted as a <picture>'s child
3. <source> is removed from the child list of <picture>
4. <img> is inserted as a <picture>'s child
5. <img> is removed from the child list of <picture>

For these cases, we have to make sure the responsive source of a <img> is
up-to-date as well, so we can get the correct mapped attributes from <source>.

Note: We don't pass the tests which use percentages because the dimension
attributes must have values that are valid non-negative integers, if specified.

Comment 14

[Boris Chiou [:boris]]

Attachment: Bug 1694741 - Part 9: Enable the preference on Nightly.

Both Blink and WebKit shipped this feature already, so it's fine to
enable this on Nightly for testing.

Comment 15

[Boris Chiou [:boris]]

Attachment: Bug 1694741 - Part 2: Factor out the check if the parent is <picture> for <source> and <img>.

Comment 16

[Boris Chiou [:boris]]

Attachment: Bug 1694741 - Part 7: Fix the reflection of percentage values for width/height attributes on source elements.

Comment 17

[Boris Chiou [:boris]]

Attachment: Bug 1694741 - Part 8: Add wpt for source elements to dimension-attributes.html.

Comment 18

[Boris Chiou [:boris]]

Attachment: Bug 1694741 - Part 3: Add NS_IMPL_FROMNODE_HELPER() for HTMLTableCellElement.

Comment 19

[Boris Chiou [:boris]]

Attachment: Bug 1694741 - Part 4: Factor out the setter of mCurrentDensity and mResponsiveSelector into separate functions.

So we can set the density during UpdateResponsiveSource(), and these functions
make us easier to restyle the image when we need to update the responsive
source synchronously in the patch series.

Comment 20

[Boris Chiou [:boris]]

Attachment: Bug 1694741 - Part 5: Update responsive image selector synchronously.

In order to make sure we are using the correct source element when
flushing the style, it's necessary to update the responsive image selector
synchronously (i.e. full selection for source element and re-resolve the
URI).

Comment 21

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/21ad6900a8ad
Part 1: Support width and height attributes in HTMLSourceElement's webidl. r=emilio
https://hg.mozilla.org/integration/autoland/rev/2de3021ee59b
Part 2: Factor out the check if the parent is <picture> for <source> and <img>. r=emilio
https://hg.mozilla.org/integration/autoland/rev/ce1f3f158029
Part 3: Add NS_IMPL_FROMNODE_HELPER() for HTMLTableCellElement. r=emilio
https://hg.mozilla.org/integration/autoland/rev/a8f10a064b69
Part 4: Factor out the setter of mCurrentDensity and mResponsiveSelector into separate functions. r=emilio
https://hg.mozilla.org/integration/autoland/rev/2b4d9516b882
Part 5: Update responsive image selector synchronously. r=emilio,edgar
https://hg.mozilla.org/integration/autoland/rev/acdd013202e1
Part 6: Map width/height attributes to the style of img elements. r=emilio
https://hg.mozilla.org/integration/autoland/rev/8e83ef550d23
Part 7: Fix the reflection of percentage values for width/height attributes on source elements. r=emilio
https://hg.mozilla.org/integration/autoland/rev/dba575c595f6
Part 8: Add wpt for source elements to dimension-attributes.html. r=emilio
https://hg.mozilla.org/integration/autoland/rev/e991ddbc11c5
Part 9: Enable the preference on Nightly. r=emilio

Comment 22

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/35558 for changes under testing/web-platform/tests

Comment 23

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/21ad6900a8ad
https://hg.mozilla.org/mozilla-central/rev/2de3021ee59b
https://hg.mozilla.org/mozilla-central/rev/ce1f3f158029
https://hg.mozilla.org/mozilla-central/rev/a8f10a064b69
https://hg.mozilla.org/mozilla-central/rev/2b4d9516b882
https://hg.mozilla.org/mozilla-central/rev/acdd013202e1
https://hg.mozilla.org/mozilla-central/rev/8e83ef550d23
https://hg.mozilla.org/mozilla-central/rev/dba575c595f6
https://hg.mozilla.org/mozilla-central/rev/e991ddbc11c5

Comment 24

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 25

[Johannes Odland]

Tested on 106.0 (64-bit) beta with the following code pen: https://codepen.io/johannesodland/pen/bGMJXBz

It seems like the source width and height does not contribute to the intrinsic size of the image while it is loading. As a result setting width and height on the source element does not seem to eliminate layout shift, as in Chrome and Safari.

Comment 26

[Johannes Odland]

Attachment: Screen recording of picture element with source width/height set in Firefox 106 beta.

Screen recording of picture element with source width/height set in Firefox 106 beta.

The width and height on the source element does not contribute to the intrinsic size while the image is loading. Expected the img element to be rendered with the same dimensions and a gray background until replaced with the loaded image. This is the behaviour in both Chrome and Safari.

Comment 27

[Johannes Odland]

Attachment: Screen recording of picture element with source width/height set in Chrome.

Screen recording of picture element with source width/height set in Chrome for comparison.

Source width and height contributes to the img intrinsic dimensions while the image is loading. The img element maintains its dimensions, and we avoid layout shift.

Comment 28

[Emilio Cobos Álvarez (:emilio)]

I don't see it on Nightly (see the attachment in bug 1795825, which I filed for that comment). Can you elaborate? Is dom.picture_source_dimension_attributes.enabled set to true in about:config? https://hg.mozilla.org/mozilla-central/rev/e991ddbc11c5 only enabled the feature in Nightly.

Comment 29

[Johannes Odland]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #28)

I don't see it on Nightly (see the attachment in bug 1795825, which I filed for that comment). Can you elaborate? Is dom.picture_source_dimension_attributes.enabled set to true in about:config? https://hg.mozilla.org/mozilla-central/rev/e991ddbc11c5 only enabled the feature in Nightly.

I'm so sorry. I thought it was enabled in the beta channel. It works as expected with dom.picture_source_dimension_attributes.enabled set to true.

Comment 30

[Boris Chiou [:boris]]

(In reply to Johannes Odland from comment #29)

(In reply to Emilio Cobos Álvarez (:emilio) from comment #28)

I don't see it on Nightly (see the attachment in bug 1795825, which I filed for that comment). Can you elaborate? Is dom.picture_source_dimension_attributes.enabled set to true in about:config? https://hg.mozilla.org/mozilla-central/rev/e991ddbc11c5 only enabled the feature in Nightly.

I'm so sorry. I thought it was enabled in the beta channel. It works as expected with dom.picture_source_dimension_attributes.enabled set to true.

Sorry for the inconvenience. I am working on shipping this feature (i.e. enabling the pref on release channel by default, Fx108).

Comment 31

[Dave Letorey]

Added an example of using height width - https://github.com/mdn/content/pull/21819
Added the details to BCD - https://github.com/mdn/browser-compat-data/pull/18081