Open
Description
<!DOCTYPE html>
<style>
canvas, div { display: block; border: solid cyan; height: 0; width: max-content; min-width: 0; aspect-ratio: 1; }
div::before { content: ""; display: block; width: 50px; height: 50px }
</style>
<canvas width="50" height="50" style="height: 0px; min-height: max-content"></canvas>
<canvas width="50" height="50" style="height: 100px; max-height: max-content"></canvas>
<div style="height: 0px; min-height: max-content"></div>
<div style="height: 100px; max-height: max-content"></div>
<script>
document.write([...document.querySelectorAll("canvas, div")].map(el => el.clientWidth + " x " + el.clientHeight).join("<br>"))
</script>| Blink | WebKit |
|---|---|
 |
 |
Is the behavior supposed to be different for a replaced element than for a non-replaced one?
What should the behavior be if I use aspect-ratio: 2 instead?
| Blink | WebKit |
|---|---|
 |
 |
Back to aspect-ratio: 1, what should happen if I use min-width: auto?
| Blink | WebKit |
|---|---|
 |
 |
CC @bfgeek