Intent to Implement and Ship: CSS Box Alignment (for flexbox layout)

76 views
Skip to first unread message

Javier Fernandez

unread,
May 15, 2017, 8:00:45 AM5/15/17
to blink-dev
*Contact emails*
jfern...@igalia.com

*Spec*
https://drafts.csswg.org/css-align/#distribution-flex
https://drafts.csswg.org/css-align/#align-flex

*Summary*
CSS Box Alignment is a transversal feature that applies to several
layout models. It generalizes what is specified for the CSS Flexible Box
Layout feature and adds new
CSS values and syntax.

*Motivation*
The CSS Box Alignment feature tries to address alignment in a more
general way,
defining a common CSS syntax for any layout model. The CSS Flexible Box
Layout
specification defines a subset of the CSS properties and values defined
in the new
spec At the same time, it states that Flexbox must follow the new CSS Box
Alignment spec as well, which has been defined to keep backward
compatibility with
Flexbox. We already shipped the CSS Box Alignment (for grid layout)
feature, hence
it'll remain as Partial Implementation until we implement and ship the
feature for
Flexbox as well.

These are the CSS properties affected:

* https://drafts.csswg.org/css-flexbox/#justify-content-property
* https://drafts.csswg.org/css-flexbox/#align-content-property
* https://drafts.csswg.org/css-flexbox/#propdef-align-items
* https://drafts.csswg.org/css-flexbox/#propdef-align-self

*Interoperability risk*
The risk is low in my opinion:
* Firefox already implemented and shipped the feature for Flexbox and
it's already
implementing it for block layout,
* I'm implementing the feature in WebKit as well.
* Positive public signals from browser vendors and users.

The main risk comes from the fact that the spec isn't CR yet, so it may
introduce changes in the new syntax of the affected CSS properties.

*Compatibility risk*
The risk is also low since we already expose the new properties and
values because
of the implementation for Grid. If the request is accepted, this work
will solve the
Partial Implementation issues.

*OWP launch tracking bug*
https://crbug.com/722287

*Link to entry on the Chrome Platform Status*
https://www.chromestatus.com/feature/4752192980385792

*Requesting approval to ship?*
Yes.

Chris Harrelson

unread,
May 15, 2017, 9:06:47 PM5/15/17
to Javier Fernandez, blink-dev
Hi,

It's not clear to me yet what the actual changes are. For example, "justify-content" is listed as a CSS property which will change, but how will it change? Will the changes in this intent simply add more possible values, or will it also change semantics of existing supported values?

Chris


--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/a9a87e67-854d-2ae8-7287-0d9d70d45465%40igalia.com.


Javier Fernanez

unread,
May 16, 2017, 3:38:14 AM5/16/17
to Chris Harrelson, Javier Fernandez, blink-dev
Hi,

On 05/16/2017 03:06 AM, Chris Harrelson wrote:
> Hi,
>
> It's not clear to me yet what the actual changes are. For example,
> "justify-content" is listed as a CSS property which will change, but how
> will it change? Will the changes in this intent simply add more possible
> values, or will it also change semantics of existing supported values?
>

The change implies only new possible values. Current behavior of the
properties will stay as it is for the existing supported values.

Javier Fernandez

unread,
May 16, 2017, 4:21:50 AM5/16/17
to blink-dev
Just in case it helps to understand the change, I've written a doc
evaluating the implementation status of the alignment properties:

https://docs.google.com/document/d/1Ycs62WA_AamKctlygsRT6OUu3NtG_LD5FL8K9aX74N4/edit?usp=sharing

Chris Harrelson

unread,
May 16, 2017, 5:30:29 PM5/16/17
to Javier Fernandez, blink-dev
Thanks for the detail. Looks good.

LGTM1

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

Rick Byers

unread,
May 18, 2017, 5:36:58 PM5/18/17
to Chris Harrelson, Javier Fernandez, blink-dev, fantasai, Tab Atkins
cc'ing spec editors in case they have any concerns, but seems pretty safe to me.

The current template asks for interop testing status.  Is this change well covered by web-platform-tests?


Javier Fernandez

unread,
May 19, 2017, 3:22:28 AM5/19/17
to Rick Byers, Chris Harrelson, blink-dev, fantasai, Tab Atkins
Hi,

On 05/18/2017 11:36 PM, Rick Byers wrote:
> cc'ing spec editors in case they have any concerns, but seems pretty
> safe to me.

Actually, this issue has been raised by some members of the CSSWG:
https://github.com/w3c/csswg-drafts/issues/1167

And discussed in on of the group meetings:
https://github.com/w3c/csswg-drafts/issues/1167#issuecomment-295126812

So in a way they expect us to solve the partial implementation issues.

>
> The current template
> <https://docs.google.com/document/d/1vlTlsQKThwaX0-lj_iZbVTzyqY7LioqERU8DK3u3XjI/edit#bookmark=id.w8j30a6lypz0> asks
> for interop testing status. Is this change well covered by
> web-platform-tests?
>

Yes, of course. Lately we are implementing the Alignment and Grid
layout features covered by web-platform-tests first, relying on the
auto-import mechanism. We still will have some Blink specific tests, but
our goal is to have as much WPT as possible.

TAMURA, Kent

unread,
May 22, 2017, 11:14:54 PM5/22/17
to Javier Fernandez, Rick Byers, Chris Harrelson, blink-dev, fantasai, Tab Atkins
LGTM2.


--
You received this message because you are subscribed to the Google Groups "blink-dev" group.



--
TAMURA Kent
Software Engineer, Google


Philip Jägenstedt

unread,
May 23, 2017, 7:32:09 AM5/23/17
to TAMURA, Kent, Javier Fernandez, Rick Byers, Chris Harrelson, blink-dev, fantasai, Tab Atkins
LGTM3

If upstreaming the Blink-specific tests is an ongoing effort, can you file an issue and have it block https://crbug.com/707649.

Javier Fernandez

unread,
May 23, 2017, 7:46:29 AM5/23/17
to Philip Jägenstedt, TAMURA, Kent, Rick Byers, Chris Harrelson, blink-dev, fantasai, Tab Atkins
Hi,

On 05/23/2017 01:31 PM, Philip Jägenstedt wrote:
> LGTM3
>
> If upstreaming the Blink-specific tests is an ongoing effort, can you
> file an issue and have it block https://crbug.com/707649.
>

We are only using WPT for the new tests, for now. However, we have
in mind upstreaming the Blink specific ones ASAP. We will track this
effort in the bug you have pointed out, thanks.

Rick Byers

unread,
May 24, 2017, 9:58:19 AM5/24/17
to Javier Fernandez, Philip Jägenstedt, TAMURA, Kent, Chris Harrelson, blink-dev, fantasai, Tab Atkins
Sorry for the delay.  More LGTMs aren't necessary now but I definitely support shipping to.  Thank you!


--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

PhistucK

unread,
May 24, 2017, 1:35:28 PM5/24/17
to Javier Fernandez, blink-dev
​A few comments inline.

On Mon, May 15, 2017 at 3:00 PM, Javier Fernandez <jfern...@igalia.com> wrote:
it'll remain as Partial Implementation until we implement and ship the
feature for
Flexbox as well.


​Unless I misunderstand or you mistyped, it will still remain partial (just a bit more complete), because ​-

   * Firefox already implemented and shipped the feature for Flexbox and
it's already
implementing it for block layout,
 
"block layout" is not covered in this intent, only ​flexbox which would join the existing grid support.
Do you intend to implement it for "block layout" soon, or did you perhaps mistype and it is supposed to be "grid layout" in the Firefox comment?

Also, can you add references (links) for ​​the following statement?
 
   * Positive public signals from browser vendors and users.

​Thank you!​
 

PhistucK

Javier Fernandez

unread,
May 24, 2017, 5:02:22 PM5/24/17
to PhistucK, blink-dev
Hi,

On 05/24/2017 07:34 PM, PhistucK wrote:
> ​Unless I misunderstand or you mistyped, it will still remain partial
> (just a bit more complete), because ​-
>
> * Firefox already implemented and shipped the feature for Flexbox and
> it's already
> implementing it for block layout,
>
>
> "block layout" is not covered in this intent, only ​flexbox which would
> join the existing grid support.
> Do you intend to implement it for "block layout" soon, or did you
> perhaps mistype and it is supposed to be "grid layout" in the Firefox
> comment?
>

After the discussion in the CSSWG github the Alignment spec editors
added a clarification of what Partial Implementation means for this feature:

https://github.com/w3c/csswg-drafts/issues/1167

https://drafts.csswg.org/css-align/#partial
"... it is hereby clarified that the rules for partial implementations
that require treating as invalid any unsupported feature apply to any
alignment keyword which is not supported across all layout modules to
which it applies for layout models in which the implementation supports
the property in general."

Hence, we don't need to implement it for "block layout" to solve the
Partial Implementation issue because blink only implements those CSS
properties for Flexbox and now for Grid.

My comment regarding Firefox intent if implementing the Alignment (for
block layout) feature was intended to show signals of interest/support
by other browser vendors.

About my intention of implementing Alignment for block layout, it's not
in my short term
plans, really. However, I do think it'd be an interesting feature for
Blink to have, indeed; alignment has been always an issue for the web
platform.

> Also, can you add references (links) for ​​the following statement?
>
>
> * Positive public signals from browser vendors and users.
>

Firefox:
* [META] implement CSS Box Alignment module
- https://bugzilla.mozilla.org/show_bug.cgi?id=1105570
* Some general info about the Box Alignment feature for grid
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
/Box_Alignment_in_CSS_Grid_Layout
-
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
* Alignment (for block layout)
- https://platform-status.mozilla.org/#css-box-alignment-block
- https://bugzilla.mozilla.org/show_bug.cgi?id=1207698
* [css-grid][css-align] Implement full support for the CSS Box
Alignment spec in the style system.
- https://bugzilla.mozilla.org/show_bug.cgi?id=1176782

WebKit
* [meta] Implement the CSS alignment properties
- https://bugs.webkit.org/show_bug.cgi?id=91512

Edge
*
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/boxalignment/

Users
*
https://rachelandrew.co.uk/archives/2015/09/02/css-grid-and-the-box-alignment-module/
* https://rachelandrew.co.uk/css/cheatsheets/box-alignment
*
https://www.smashingmagazine.com/2016/11/css-grids-flexbox-and-box-alignment-our-new-system-for-web-layout/
*
http://jensimmons.com/post/mar-28-2016/learn-alignment-playing-flexbox-games


一丝

unread,
May 24, 2017, 11:04:59 PM5/24/17
to blink-dev, phis...@gmail.com, jfern...@igalia.com
It would be great if Blink implemented Alignment for block layout.

在 2017年5月25日星期四 UTC+8上午5:02:22,Javier Fernandez写道:

PhistucK

unread,
May 25, 2017, 3:55:57 AM5/25/17
to Javier Fernandez, blink-dev

On Thu, May 25, 2017 at 12:02 AM, Javier Fernandez <jfern...@igalia.com> wrote:

​Not a positive signal ("Low" is neutral).​



Thank you for the explanation!



PhistucK
Reply all
Reply to author
Forward
0 new messages