[webkit-dev] CSS Grid Layout Status Review (Jan 2015)

[Manuel Rego Casasnovas]

Hi,

this is a new status review (last one was in August 2014 [1]) of the CSS
Grid Layout [2] implementation done by Igalia. We'll summarize the work
done during the past months and the plans for the future.
Of course, we'll be really happy to get any kind of feedback from the
community.

The meta-bug to follow the evolution of this feature is:
http://wkb.ug/60731


Main tasks done since August:

* Track Sizing Algorithm (http://wkb.ug/60731):
  * Tracks no longer shrink with undefined remaining space.
  * Fixed the grow beyond growth limits use case.
  * Do not use items spanning through flex tracks when sizing content
sized tracks.
  * Sizing content sized tracks is no longer order-dependent.
  * Support of percentages of indefinite sizes in minmax().

* Auto-placement (http://wkb.ug/103316):
  * Support sparse & dense packing modes.
  * Stack mode was finally dropped from the spec.

* Alignment & justification (http://wkb.ug/133224 & http://wkb.ug/133222):
  * Upgrade self alignment properties (justify-self/items,
align-self/items) to the last CSS3 spec.

* Testing:
  * Improve test coverage, which lead to some bug reports and fixes.
  * Outside WebKit: Started to create the W3C test suite for grid [3].
Still on early stages, check the test plan [4] for more information.

* Bugfixing:
  * Fixed different bugs reported by fuzzinator.
  * Generic bugfixing.


Ongoing tasks:

* Track Sizing Algorithm (http://wkb.ug/60731):
  * Initialization of track sizes from non spanning items.
  * Add and enforce the growth limit >= base size constraint.
  * Improve sizing computations of tracks growing beyond limits.
  * Fix behavior under min/max-width and min/max-content.
  * Add support for mark as infinitely growable and unmark.
  * Rewrite some of the loops that are incorrectly nested.

* Alignment & justification (http://wkb.ug/133224 and http://wkb.ug/133222):
  * Due to some performance concerns, CSS3 upgrade of alignment
properties is stalled.
  * There're several patches pending to fully support the Box Alignment
specification in WebKit.

* Testing:
  * Outside WebKit: Continue working on the W3C test suite in order to
cover the whole spec. Then, import the test suite into WebKit.


Plans for the future:

* Absolutely positioned grid children.

* Alignment & justification
  * Implementation of the Box Alignment spec for Grid Layout.
  * Dealing with orthogonal flows.

* Writing modes.
  * Adapting the track sizing and item positioning to any writing mode
and direction.
  * Implementing support for orthogonal flows.
  * Handling grid's and item's margin, border and padding in different
writing modes and directions.

* Support "auto" keyword for repeat() function.

* Allow to grow the implicit grid before the explicit grid (supporting
properly negative indexes for grid line numbers).

* Implement fragmentation support once the spec is definitive regarding
this topic.

* Performance analysis and optimizations.

* Grid support on Web Inspector.


This is a high level summary, you can check the different bugs for more
details. Please don't hesitate to ask any question. We hope you find
this information useful.

BTW, you can already test CSS Grid Layout using the WebKit nightly
builds (remember to use "-webkit" prefix) [5].

Best regards,
  Rego

[1] https://lists.webkit.org/pipermail/webkit-dev/2014-August/026756.html
[2] http://dev.w3.org/csswg/css-grid/
[3] http://test.csswg.org/shepherd/search/spec/css-grid-1/
[4] http://rawgit.com/w3c/csswg-test/master/css-grid-1/test-plan/index.html
[5] http://nightly.webkit.org/