Skip to content

[css-align][css-sizing] Should place-self: stretch and width: stretch result in different size for abspos? #11293

Open
@Loirooriol

Description

@Loirooriol
<!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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions