RFE: Implement width/height attributes on source elements
Categories
(Core :: Layout, enhancement, P3)
Tracking
()
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 | ||
Updated•4 years ago
|
Comment 1•4 years ago
•
|
||
This sounds like something that should be documented on MDN web docs. Therefore I'm adding the dev-doc-needed
keyword.
Sebastian
Assignee | ||
Updated•4 years ago
|
Comment 2•3 years ago
|
||
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•3 years ago
|
||
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•3 years ago
|
||
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•3 years ago
|
||
@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 8•3 years ago
|
||
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?
Reporter | ||
Comment 9•3 years ago
|
||
(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•3 years ago
|
||
(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.
Reporter | ||
Comment 11•3 years ago
|
||
(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.
Assignee | ||
Updated•3 years ago
|
Assignee | ||
Updated•2 years ago
|
Assignee | ||
Comment 12•2 years ago
|
||
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.
Assignee | ||
Comment 13•2 years ago
|
||
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:
- width/height attributes is changed in <source> elements
- <source> is inserted as a <picture>'s child
- <source> is removed from the child list of <picture>
- <img> is inserted as a <picture>'s child
- <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.
Assignee | ||
Comment 14•2 years ago
|
||
Both Blink and WebKit shipped this feature already, so it's fine to
enable this on Nightly for testing.
Assignee | ||
Comment 15•2 years ago
|
||
Updated•2 years ago
|
Updated•2 years ago
|
Assignee | ||
Comment 16•2 years ago
|
||
Assignee | ||
Comment 17•2 years ago
|
||
Updated•2 years ago
|
Assignee | ||
Comment 18•2 years ago
|
||
Assignee | ||
Comment 19•2 years ago
|
||
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.
Updated•2 years ago
|
Updated•2 years ago
|
Updated•2 years ago
|
Updated•2 years ago
|
Assignee | ||
Comment 20•2 years ago
|
||
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).
Updated•2 years ago
|
Updated•2 years ago
|
Updated•2 years ago
|
Updated•2 years ago
|
Comment 21•2 years ago
|
||
Comment 23•2 years ago
|
||
bugherder |
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
Updated•2 years ago
|
Comment 25•2 years ago
|
||
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•2 years ago
|
||
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•2 years ago
|
||
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•2 years ago
|
||
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•2 years ago
|
||
(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 totrue
inabout: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.
Assignee | ||
Comment 30•2 years ago
|
||
(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 totrue
inabout: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•2 years ago
|
||
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
Description
•