Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css-align][css-grid] Implementations parse but don't honor unsafe self-alignment #6385

Closed
tabatkins opened this issue Jun 15, 2021 · 4 comments
Closed

[css-align][css-grid] Implementations parse but don't honor unsafe self-alignment #6385

tabatkins opened this issue Jun 15, 2021 · 4 comments
Labels
Closed Rejected as Invalid css-align-3 Current Work css-grid-1

Comments

@tabatkins
Copy link
Member

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.)
@tabatkins
Copy link
Member Author

Behavioral tests: https://github.com/web-platform-tests/wpt/pull/29392/files

@tabatkins tabatkins mentioned this issue Jun 15, 2021
Merged
@javifernandez
Copy link
Contributor

Hi @tabatkins

I think the test case that you used is not correct to show an issue related to the use of the 'unsafe' keyword in the overflow overflow alignment. The grid uses auto-sized tracks, so the grid area will get the same size as larger item (80px). So the center alignment wont cause any overflow, hence the 'unsafe' keyword is useless.

It's possible to apply the 'unsafe' keyword to the Content Alignment, using the place-content shorthand and you'll see in the same test case how the 'unsafe' has the expected behavior.

@Loirooriol
Copy link
Contributor

Yes, I guess the testcase needs grid-template: 100% / 100%; or something.

@tabatkins
Copy link
Member Author

Oh right, sorry. ^_^

It is still the case that this behavior isn't tested, so the WPTs from @fantasai (once she applies the fix) will still be useful, but yeah, looks like browsers are good for this now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Closed Rejected as Invalid css-align-3 Current Work css-grid-1
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@tabatkins @javifernandez @Loirooriol