[css-sizing] Which replaced elements stretch? #12612
Description
Some replaced elements stretch their inline size to fill their containing block. The exact details of how that happens are very unclear to me, but for starters here I want to discuss which replaced elements do this.
According to my testing, there are 2 requirements:
-
The replaced element mustn't have a natural width or height.
- In
<svg>these can be set withwidthandheightattributes. (Note that in other elements they typically just set presentational hints, not natural sizes.) <img>,<input>and<video>can have natural sizes from its resource.- I think
<iframe>can't have natural sizes.
- In
-
The replaced element must have a non-degenerate preferred aspect ratio.
It can be a natural ratio or set via
aspect-ratio.However, Gecko ignores
aspect-ratioon auto-sized<iframe>, and WebKit also ignores it on auto-sized<video>. Then they don't stretch.
| Blink | WebKit | Gecko | |
|---|---|---|---|
<svg> |
✔️ | ✔️ | ✔️ |
<img> |
✔️ | ✔️ | ✔️ |
<input> |
✔️ | ✔️ | ✔️ |
<video> |
✔️ (since v139) | ❌ | ✔️ |
<iframe> |
✔️ | ❌ | ❌ |
<!DOCTYPE html>
<style>div > * { aspect-ratio: 1; width: auto; height: auto; border: solid }</style>
<div style="width: 50px; border: solid magenta">
<svg></svg>
<img src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"></svg>'>
<input type="image" src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"></svg>'>
<video></video>
<iframe></iframe>
</div>Agenda+ to align with Blink.