Open
Description
<!DOCTYPE html>
<style>
article { display: inline-block; border: solid; width: 50px; height: 50px; position: relative }
article > * { background: cyan; display: block; position: absolute; top: 10px; left: 10px; }
article > *::before { content: ""; display: block; width: 20px; height: 20px }
.stretch-legacy { width: -webkit-fill-available; width: -moz-available; height: -webkit-fill-available; height: -moz-available }
</style>
<article><canvas width="20" height="20" style="place-self: start"></canvas></article>
<article><canvas width="20" height="20" style="place-self: stretch"></canvas></article>
<article><canvas width="20" height="20" style="place-self: end"></canvas></article>
<article><canvas width="20" height="20" style="width: stretch; height: stretch"></canvas></article>
<article><canvas width="20" height="20" class="stretch-legacy"></canvas></article>
<br>
<article><div style="place-self: start"></div></article>
<article><div style="place-self: stretch"></div></article>
<article><div style="place-self: end"></div></article>
<article><div style="width: stretch; height: stretch"></div></article>
<article><div class="stretch-legacy"></div></article>
Blink | ![]() |
WebKit | ![]() |
Gecko | ![]() |
Servo | ![]() |
All browsers exhibit some differences between a stretch
self-alignment vs a stretch size (or vendor-prefixed equivalent).
But the spec implies otherwise: https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing
Formally, its behavior is the same as specifying an automatic size together with a self-alignment property value of stretch (in the relevant axis), except that the resulting box, which can end up not exactly fitting its alignment container, can be subsequently aligned by its actual self-alignment property value.
I plan to implement the spec in Servo, it's easier to have a single stretch behavior rather than doing different things depending on the property.