Closed Bug 1694741 Opened 4 years ago Closed 2 years ago

RFE: Implement width/height attributes on source elements

Categories

(Core :: Layout, enhancement, P3)

enhancement

Tracking

()

RESOLVED FIXED
106 Branch
Tracking Status
firefox88 --- wontfix
firefox106 --- fixed

People

(Reporter: Biesinger, Assigned: boris)

References

(Regressed 1 open bug, )

Details

(Keywords: dev-doc-complete)

Attachments

(12 files)

154.97 KB, image/png
Details
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
120.59 KB, video/quicktime
Details
237.08 KB, video/quicktime
Details

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.

Assignee: nobody → boris.chiou

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

Sebastian

Keywords: dev-doc-needed
Severity: -- → S3
Priority: -- → P3

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.

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.

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.

@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.

Attached image source-dimensions.png

Test on 26 May 2022

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?

(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 ?

(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.

(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.

Status: NEW → ASSIGNED

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.

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.

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

Attachment #9286752 - Attachment description: Bug 1694741 - Part 2: Map width/height attributes to the style of img elements. → Bug 1694741 - Part 3: Map width/height attributes to the style of img elements.
Attachment #9286753 - Attachment description: Bug 1694741 - Part 3: Enable the preference on Nightly. → Bug 1694741 - Part 4: Enable the preference on Nightly.
Attachment #9286753 - Attachment description: Bug 1694741 - Part 4: Enable the preference on Nightly. → Bug 1694741 - Part 6: Enable the preference on Nightly.

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.

Attachment #9286752 - Attachment description: Bug 1694741 - Part 3: Map width/height attributes to the style of img elements. → Bug 1694741 - Part 5: Map width/height attributes to the style of img elements.
Attachment #9288189 - Attachment description: Bug 1694741 - Part 4: Fix the reflection of percentage values for width/height attributes on source elements. → Bug 1694741 - Part 6: Fix the reflection of percentage values for width/height attributes on source elements.
Attachment #9288190 - Attachment description: Bug 1694741 - Part 5: Add wpt for source elements to dimension-attributes.html. → Bug 1694741 - Part 7: Add wpt for source elements to dimension-attributes.html.
Attachment #9286753 - Attachment description: Bug 1694741 - Part 6: Enable the preference on Nightly. → Bug 1694741 - Part 8: Enable the preference on Nightly.

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).

Attachment #9286752 - Attachment description: Bug 1694741 - Part 5: Map width/height attributes to the style of img elements. → Bug 1694741 - Part 6: Map width/height attributes to the style of img elements.
Attachment #9288189 - Attachment description: Bug 1694741 - Part 6: Fix the reflection of percentage values for width/height attributes on source elements. → Bug 1694741 - Part 7: Fix the reflection of percentage values for width/height attributes on source elements.
Attachment #9288190 - Attachment description: Bug 1694741 - Part 7: Add wpt for source elements to dimension-attributes.html. → Bug 1694741 - Part 8: Add wpt for source elements to dimension-attributes.html.
Attachment #9286753 - Attachment description: Bug 1694741 - Part 8: Enable the preference on Nightly. → Bug 1694741 - Part 9: Enable the preference on Nightly.
Pushed by bchiou@mozilla.com:
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
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/35558 for changes under testing/web-platform/tests
Upstream PR merged by moz-wptsync-bot
Regressions: 1786455
Regressions: 1786527
No longer regressions: 1786527
Regressions: 1787320
Regressions: 1787671
Regressions: 1789475
Regressions: 1790924

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.

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.

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.

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.

Flags: needinfo?(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.

Flags: needinfo?(johannes.odland)
Blocks: 1795953

(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).

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

Regressions: 1893303
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: