[csswg-drafts] [css-align][css-grid] Implementations parse but don't honor `unsafe` self-alignment (#6385)

tabatkins has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-align][css-grid] Implementations parse but don't honor `unsafe` self-alignment ==
Consider [this testcase](https://www.software.hixie.ch/utilities/js/live-dom-viewer/saved/9419):

```html
<!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.)

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6385 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 15 June 2021 22:49:54 UTC