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-grid][css-flexbox] Blockification section should use the computed value, not the box of the element #4065

Closed
emilio opened this issue Jun 28, 2019 · 6 comments
Closed

[css-grid][css-flexbox] Blockification section should use the computed value, not the box of the element #4065

emilio opened this issue Jun 28, 2019 · 6 comments
Labels
Closed Accepted by CSSWG Resolution Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-flexbox-1 Current Work css-grid-1

Comments

@emilio
Copy link
Collaborator

Right now https://drafts.csswg.org/css-grid/#grid-item-display says:

The display value of a grid item is blockified: if the specified display of an in-flow child of an element generating a grid container is an inline-level value, it computes to its block-level equivalent. (See CSS2.1§9.7 [CSS21] and CSS Display [CSS3-DISPLAY] for details on this type of display value conversion.)

Similarly https://drafts.csswg.org/css-flexbox/#flex-items says:

The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent. (See CSS2.1§9.7 [CSS21] and CSS Display [CSS3-DISPLAY] for details on this type of display value conversion.)

As @Loirooriol pointed out in https://bugzilla.mozilla.org/show_bug.cgi?id=1562039, this doesn't match browsers, and browsers use the computed display value of the closest non-display: contents ancestor, even if the element doesn't become a flex or grid container (due to it being replaced for example, or it being in a display: none subtree).

I think the spec in this case should match browsers in this case, in order to not make style of children depend on layout box construction. This also matches how the CSS 2 fixups work. The root element is blockified even if it's a replaced element or wouldn't generate an inline-level box otherwise.
@Loirooriol
Copy link
Contributor

Also for Houdini Layout with childDisplay = "block". https://drafts.css-houdini.org/css-layout-api/#layout-api-box-tree

tabatkins added a commit that referenced this issue Nov 1, 2019
@tabatkins
[css-grid-1][css-flexbox-1] Per #4065, rephrase the grid/flex blockif…
0db00e1 
…ication rules in terms of explicit 'display' values rather than box-tree results.
@tabatkins
Copy link
Member

Agenda+ for WG resolution on the change. Before the call, do these edits work for you, @emilio?

@Loirooriol
Copy link
Contributor

If the computed display value of an element’s nearest ancestor element

Are pseudo-elements considered to be elements? If you use display: grid on an element, its ::before is blockified. And once display: list-item grid is allowed, and you use it on a ::before, I guess ::before::marker will be blockified too.

@fantasai fantasai added the Target Revision: Current Remove when done. label Nov 1, 2019
@tabatkins
Copy link
Member

Yes, tree-abiding pseudo-elements live in the element tree.

@emilio
Copy link
Collaborator Author

Yes, the edits work for me.

@css-meeting-bot
Copy link
Member

The CSS Working Group just discussed Blockification section should use the computed value, not the box of the element, and agreed to the following:

  • RESOLVED: Accept edit in https://github.com/w3c/csswg-drafts/issues/4065
The full IRC log of that discussion <dael> Topic: Blockification section should use the computed value, not the box of the element
<dael> github: https://github.com//issues/4065
<dael> astearns: TabAtkins put this on?
<dael> TabAtkins: This should be quick. We made edits to the issue a few weeks ago. Checked with emilio and he's good. Final call for objections from anyone that's reviewed. It's CR so we need resolution
<fremy> Just took a look, LGTM
<dael> TabAtkins: We rephrased blockifcation to talk about display values rather than rely on box tree. Behavior difference is miniscule but makes it easier for impl and more similar to other cases.
<dael> TabAtkins: If someone hasn't reviewed we can delay now or revisit in future
<dael> astearns: Looks like we have 3 reviews. Anyone want more time?
<dael> oriol: Not an objection. I think Houdini custom layout has same problem and needs update.
<dael> TabAtkins: Probably because Ian copied the text. Can you open an issue pointing at this one and we'll take care of that
<dael> astearns: Proposed: Accept edit in https://github.com//issues/4065
<dael> RESOLVED: Accept edit in https://github.com//issues/4065

@mozilla-apprentice mozilla-apprentice mentioned this issue Nov 20, 2019
Closed
@Loirooriol Loirooriol mentioned this issue Nov 20, 2019
Open
@fantasai fantasai added the Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. label May 6, 2020
@Loirooriol Loirooriol mentioned this issue Oct 8, 2020
Merged
3 tasks
@Loirooriol Loirooriol mentioned this issue Jul 12, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Closed Accepted by CSSWG Resolution Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-flexbox-1 Current Work css-grid-1
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@tabatkins @fantasai @emilio @Loirooriol @css-meeting-bot