Per 3.1. Size Containment,
Replaced elements must be treated as having an intrinsic width and height of 0.
I read above as the replaced element should be treated as having no intrinsic aspect ratio as well. So if a replaced element has both aspect-ratio and contain:size, what size should it be? An example:
<img src="https://placehold.it/300x100" style="width: 100px; aspect-ratio: 1/1; contain:size">
Here a link to the above example. https://jsfiddle.net/tL3xh6qo/2/ (Currently, both Firefox and Google Chrome render the example as 0x0, 100x0.)
I would think the image size should be 100x100, not 0x0 100x0, because contain:size affects only intrinsic aspect ratio, and aspect-ratio property provides a preferred aspect-ratio, which should be used to determine the size.
[edit: Changed the size of the example currently rendered on browsers from 0x0 to 100x0.]
CC @cbiesinger, @fantasai, @BorisChiou, @emilio
Per 3.1. Size Containment,
I read above as the replaced element should be treated as having no intrinsic aspect ratio as well. So if a replaced element has both
aspect-ratioandcontain:size, what size should it be? An example:Here a link to the above example. https://jsfiddle.net/tL3xh6qo/2/ (Currently, both Firefox and Google Chrome render the example as
0x0, 100x0.)I would think the image size should be 100x100, not
0x0100x0, becausecontain:sizeaffects only intrinsic aspect ratio, andaspect-ratioproperty provides a preferred aspect-ratio, which should be used to determine the size.[edit: Changed the size of the example currently rendered on browsers from 0x0 to 100x0.]
CC @cbiesinger, @fantasai, @BorisChiou, @emilio