[csswg-drafts] [css-sizing] Which replaced elements stretch? (#12612)

Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-sizing] Which replaced elements stretch? ==
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.

 - Browsers agree that one of the requirements is having a non-degenerate preferred aspect ratio. It can be a natural ratio or set via `aspect-ratio`.
 - Browsers also agree that the element mustn't have a natural width or height.
     - In `<svg>` these can be set with `width` and `height` attributes. (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.
 - But browsers disagree on which replaced elements do this:

    |  | Blink | WebKit | Gecko |
    | - | - | - | - |
    | `<svg>` | ✔️ | ✔️ | ✔️ |
    | `<img>` | ✔️ | ✔️ | ✔️ |
    | `<input>` | ✔️ | ✔️ | ✔️ |
    | `<video>` | ✔️ (since v139) | ❌ | ✔️ |
    | `<iframe>` | ✔️ | ❌ | ❌  |

```html
<!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, i.e. do it for all replaced elements, as long as they fulfill the 2 requirements above.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12612 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 16 August 2025 02:30:41 UTC