[css-align][css-grid] Implementations parse but don't honor unsafe self-alignment #6385
Description
Consider this testcase:
<!doctype html>
<div class=container>
<div class="item large"></div>
</div>
<div class=container>
<div class="item small"></div>
</div>
<style>
.container {
display: grid;
width: 60px;
height: 60px;
border: dotted thick;
margin: 20px;
}
.item {
background: orange;
opacity: .5;
place-self: unsafe center;
}
.large {
width: 80px;
height: 80px;
}
.small {
width: 40px;
height: 40px;
}
</style>In both Chrome and Firefox, the "small" item is centered in its parent grid, showing that place-self: unsafe center; is successfully parsed, but the "large" item is safely centered, violating the specified value.
@fantasai is putting together a set of tests for the alignment behavior right now showing this in detail (the testsuite only contains parsing tests, not behavior tests; parsing-only tests considered harmful).
Regardless of the testing situation, tho, the Align spec currently specifies that an unspecified safety value, like place-self: center;, should use the "smart" alignment which attempts to do unsafe alignment if it's safe to do so; if UAs can't do the smart thing, they must fall back to unsafe behavior, following the example of Flexbox. However, we see here that browsers interoperably instead only implement safe alignment for Grid.
It's thus pretty likely that we have a major compat situation at this point, and have to specify that the default alignment is layout-mode-specific, so Flexbox can default to unsafe while Grid defaults to safe. (We're assuming that the compat impact of fixing browsers to actually honor a specified unsafe keyword is acceptable, or else we're in a real terrible situation.)
So, any thoughts on this matter? If nobody has arguments against, we're going to specify that the default alignment is layout-specific and let Flexbox default to "unsafe" while Grid defaults to "safe". (Unsure which side Block should land on.)