- From: Tab Atkins Jr. via GitHub <noreply@w3.org>
- Date: Fri, 23 Jan 2026 21:38:56 +0000
- To: public-css-archive@w3.org
Expanding on the testcase a bit with some labels, and an aspect-ratio div with some text content for comparison:
<details>
<summary>testcase source</summary>
```html
<!DOCTYPE html>
<style>
svg, svg+div { display: block; outline: 3px solid; margin: 12px 0; background: #8006; }
svg+div { outline-color: orange; }
</style>
<div style="width: 100px; background: #0002">
height: auto;
<svg viewbox="0 0 1 1" style="width: auto"></svg> <div style="width: auto; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="width: min-content"></svg> <div style="width: min-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="width: fit-content"></svg> <div style="width: fit-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="width: max-content"></svg> <div style="width: max-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="width: 0; min-width: min-content"></svg> <div style="width: 0; min-width: min-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="width: 0; min-width: fit-content"></svg> <div style="width: 0; min-width: fit-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="width: 0; min-width: max-content"></svg> <div style="width: 0; min-width: max-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="width: 200px; max-width: min-content"></svg> <div style="width: 200px; max-width: min-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="width: 200px; max-width: fit-content"></svg> <div style="width: 200px; max-width: fit-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="width: 200px; max-width: max-content"></svg> <div style="width: 200px; max-width: max-content; aspect-ratio: 1;">xxx xxxx</div>
<hr>
height: 50px;
<svg viewbox="0 0 1 1" style="height: 50px; width: auto"></svg> <div style="height: 50px; width: auto; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="height: 50px; width: min-content"></svg> <div style="height: 50px; width: min-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="height: 50px; width: fit-content"></svg> <div style="height: 50px; width: fit-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="height: 50px; width: max-content"></svg> <div style="height: 50px; width: max-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="height: 50px; width: 0; min-width: min-content"></svg> <div style="height: 50px; width: 0; min-width: min-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="height: 50px; width: 0; min-width: fit-content"></svg> <div style="height: 50px; width: 0; min-width: fit-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="height: 50px; width: 0; min-width: max-content"></svg> <div style="height: 50px; width: 0; min-width: max-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="height: 50px; width: 200px; max-width: min-content"></svg> <div style="height: 50px; width: 200px; max-width: min-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="height: 50px; width: 200px; max-width: fit-content"></svg> <div style="height: 50px; width: 200px; max-width: fit-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="height: 50px; width: 200px; max-width: max-content"></svg> <div style="height: 50px; width: 200px; max-width: max-content; aspect-ratio: 1;">xxx xxxx</div>
<hr>
min-height: 150px;
<svg viewbox="0 0 1 1" style="min-height: 150px; width: auto"></svg> <div style="min-height: 150px; width: auto; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="min-height: 150px; width: min-content"></svg> <div style="min-height: 150px; width: min-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="min-height: 150px; width: fit-content"></svg> <div style="min-height: 150px; width: fit-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="min-height: 150px; width: max-content"></svg> <div style="min-height: 150px; width: max-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="min-height: 150px; width: 0; min-width: min-content"></svg> <div style="min-height: 150px; width: 0; min-width: min-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="min-height: 150px; width: 0; min-width: fit-content"></svg> <div style="min-height: 150px; width: 0; min-width: fit-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="min-height: 150px; width: 0; min-width: max-content"></svg> <div style="min-height: 150px; width: 0; min-width: max-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="min-height: 150px; width: 200px; max-width: min-content"></svg> <div style="min-height: 150px; width: 200px; max-width: min-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="min-height: 150px; width: 200px; max-width: fit-content"></svg> <div style="min-height: 150px; width: 200px; max-width: fit-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="min-height: 150px; width: 200px; max-width: max-content"></svg> <div style="min-height: 150px; width: 200px; max-width: max-content; aspect-ratio: 1;">xxx xxxx</div>
<hr>
max-height: 50px;
<svg viewbox="0 0 1 1" style="max-height: 50px; width: auto"></svg> <div style="max-height: 50px; width: auto; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="max-height: 50px; width: min-content"></svg> <div style="max-height: 50px; width: min-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="max-height: 50px; width: fit-content"></svg> <div style="max-height: 50px; width: fit-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="max-height: 50px; width: max-content"></svg> <div style="max-height: 50px; width: max-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="max-height: 50px; width: 0; min-width: min-content"></svg> <div style="max-height: 50px; width: 0; min-width: min-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="max-height: 50px; width: 0; min-width: fit-content"></svg> <div style="max-height: 50px; width: 0; min-width: fit-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="max-height: 50px; width: 0; min-width: max-content"></svg> <div style="max-height: 50px; width: 0; min-width: max-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="max-height: 50px; width: 200px; max-width: min-content"></svg> <div style="max-height: 50px; width: 200px; max-width: min-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="max-height: 50px; width: 200px; max-width: fit-content"></svg> <div style="max-height: 50px; width: 200px; max-width: fit-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="max-height: 50px; width: 200px; max-width: max-content"></svg> <div style="max-height: 50px; width: 200px; max-width: max-content; aspect-ratio: 1;">xxx xxxx</div>
<hr>
min-height: 50px; max-height: 150px;
<svg viewbox="0 0 1 1" style="min-height: 50px; max-height: 150px; width: auto"></svg> <div style="min-height: 50px; max-height: 150px; width: auto; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="min-height: 50px; max-height: 150px; width: min-content"></svg> <div style="min-height: 50px; max-height: 150px; width: min-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="min-height: 50px; max-height: 150px; width: fit-content"></svg> <div style="min-height: 50px; max-height: 150px; width: fit-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="min-height: 50px; max-height: 150px; width: max-content"></svg> <div style="min-height: 50px; max-height: 150px; width: max-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="min-height: 50px; max-height: 150px; width: 0; min-width: min-content"></svg> <div style="min-height: 50px; max-height: 150px; width: 0; min-width: min-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="min-height: 50px; max-height: 150px; width: 0; min-width: fit-content"></svg> <div style="min-height: 50px; max-height: 150px; width: 0; min-width: fit-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="min-height: 50px; max-height: 150px; width: 0; min-width: max-content"></svg> <div style="min-height: 50px; max-height: 150px; width: 0; min-width: max-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="min-height: 50px; max-height: 150px; width: 200px; max-width: min-content"></svg> <div style="min-height: 50px; max-height: 150px; width: 200px; max-width: min-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="min-height: 50px; max-height: 150px; width: 200px; max-width: fit-content"></svg> <div style="min-height: 50px; max-height: 150px; width: 200px; max-width: fit-content; aspect-ratio: 1;">xxx xxxx</div>
<svg viewbox="0 0 1 1" style="min-height: 50px; max-height: 150px; width: 200px; max-width: max-content"></svg> <div style="min-height: 50px; max-height: 150px; width: 200px; max-width: max-content; aspect-ratio: 1;">xxx xxxx</div>
</div>
<script>
for (let el of document.querySelector("div").children) {
if (el.tagName === "svg") {
document.body.append(el.clientWidth + "x" + el.clientHeight, document.createElement("br"));
} else {
document.body.append(el.cloneNode());
}
}
</script>
```
</details>
[link to dom viewer](https://software.hixie.ch/utilities/js/live-dom-viewer/saved/14459)
--
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13149#issuecomment-3792580821 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 23 January 2026 21:38:57 UTC