New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 3 users
Status: Fixed
Owner:
Closed: Jan 2015
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: ----
Type: Feature

Blocking:
issue 79180



Sign in to add a comment
[CSS Grid Layout] Auto-placement algorithm sparse and dense support
Project Member Reported by r...@igalia.com, Jun 12 2014 Back to list
In the last versions of the spec grid-auto-flow property syntax has changed and it now provides different behaviors for the auto-placement algorithm: sparse, dense and stack.

Current implementation of auto-placement algorithm is always using dense or none (which has been removed). We should update the parsing and modify the algorithm to support spart and stack accordingly.
 
Comment 1 by r...@igalia.com, Jun 12 2014
Blocking: chromium:79180
Comment 2 by tkent@chromium.org, Jun 13 2014
Labels: -Cr-Blink Cr-Blink-Rendering-Grid
Comment 3 by r...@igalia.com, Jun 19 2014
grid-auto-flow parsing has been updated to the new syntax in the following CL: https://codereview.chromium.org/333563003/
Project Member Comment 4 by bugdroid1@chromium.org, Jul 1 2014
The following revision refers to this bug:
  http://src.chromium.org/viewvc/blink?view=rev&rev=177258

------------------------------------------------------------------
r177258 | chrome-bot@google.com | 2014-07-01T00:50:20.183014Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/parser/CSSPropertyParser.h?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/getComputedStyle/computed-style-grid-layout-expected.txt?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-update-expected.txt?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSComputedStyleDeclaration.cpp?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSPrimitiveValueMappings.h?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-area-resolution.html?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/RenderStyleConstants.h?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSProperties.in?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/RenderStyle.h?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/StyleGridData.h?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set.html?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/parser/BisonCSSParser-in.cpp?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSValueKeywords.in?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/ietestcenter/css3/grid/grid-column-002.htm?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/resolver/StyleBuilderCustom.cpp?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/GridResolvedPosition.cpp?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/ietestcenter/css3/grid/grid-column-003.htm?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set-expected.txt?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-update.html?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context.html?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/parser/CSSPropertyParser.cpp?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/resources/grid.css?r1=177258&r2=177257&pathrev=177258
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderGrid.cpp?r1=177258&r2=177257&pathrev=177258

[CSS Grid Layout] Update grid-auto-flow to the new syntax

In last versions of the spec grid-auto-flow syntax has changed. New
syntax is:
[ row | column ] && dense? | stack && [ row | column ]?

Implemented parsing for new syntax and added/modified test cases in
current layout tests.

Adapted code to keep the current behavior using "stack" as if it was
"none" in the previous syntax. This should be fixed in a follow-up patch
once "stack" is implemented.

Also "dense" needs to be reviewed. Right now auto-placement algorithm is
always "dense" and never "sparse".

BUG= 384099 

Review URL: https://codereview.chromium.org/333563003
-----------------------------------------------------------------
Project Member Comment 5 by bugdroid1@chromium.org, Jul 16 2014
The following revision refers to this bug:
  http://src.chromium.org/viewvc/blink?view=rev&rev=178262

------------------------------------------------------------------
r178262 | rego@igalia.com | 2014-07-16T10:48:00.550260Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html?r1=178262&r2=178261&pathrev=178262
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html?r1=178262&r2=178261&pathrev=178262
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/resources/grid.css?r1=178262&r2=178261&pathrev=178262
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse-expected.txt?r1=178262&r2=178261&pathrev=178262
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderGrid.cpp?r1=178262&r2=178261&pathrev=178262
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html?r1=178262&r2=178261&pathrev=178262
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html?r1=178262&r2=178261&pathrev=178262
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderGrid.h?r1=178262&r2=178261&pathrev=178262
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html?r1=178262&r2=178261&pathrev=178262
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child.html?r1=178262&r2=178261&pathrev=178262
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span.html?r1=178262&r2=178261&pathrev=178262
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update.html?r1=178262&r2=178261&pathrev=178262

[CSS Grid Layout] Support sparse in auto-placement algorithm

Sparse mode for auto-placement algorithm was not implemented yet.

This patch implements sparse mode for auto-placement algorithm. It keeps
track of the auto-placement cursor in
RenderGrid::placeAutoMajorAxisItemsOnGrid() and updates it accordingly
when auto-positioned items are placed.
If we're in dense mode it resets the cursor after each item.

GridIterator has been adapted to look for empty areas from a given
position in both directions.

Test cases have been adapted accordingly, adding new cases to cover both
sparse and dense options.

TEST=fast/css-grid-layout/grid-auto-flow-sparse.html

BUG= 384099 

Review URL: https://codereview.chromium.org/362733002
-----------------------------------------------------------------
Project Member Comment 6 by bugdroid1@chromium.org, Jul 19 2014
The following revision refers to this bug:
  http://src.chromium.org/viewvc/blink?view=rev&rev=178500

------------------------------------------------------------------
r178500 | rego@igalia.com | 2014-07-18T23:57:55.890852Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set-expected.txt?r1=178500&r2=178499&pathrev=178500
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span.html?r1=178500&r2=178499&pathrev=178500
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update.html?r1=178500&r2=178499&pathrev=178500
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html?r1=178500&r2=178499&pathrev=178500
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html?r1=178500&r2=178499&pathrev=178500
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/resources/grid.css?r1=178500&r2=178499&pathrev=178500
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set.html?r1=178500&r2=178499&pathrev=178500
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-item-addition-auto-placement-update.html?r1=178500&r2=178499&pathrev=178500
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-item-order-auto-flow-resolution.html?r1=178500&r2=178499&pathrev=178500
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html?r1=178500&r2=178499&pathrev=178500
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-auto-flow-resolution.html?r1=178500&r2=178499&pathrev=178500

[CSS Grid Layout] Rename gridAutoFlow[Row|Column] to gridAutoFlow[Row|Column]Sparse

Rename CSS styles in grid layout tests to make the name more explicit. As the
default mode for auto-placement algorithm is "sparse".

BUG= 384099 

Review URL: https://codereview.chromium.org/401473003
-----------------------------------------------------------------
Project Member Comment 7 by bugdroid1@chromium.org, Jul 23 2014
The following revision refers to this bug:
  http://src.chromium.org/viewvc/blink?view=rev&rev=178740

------------------------------------------------------------------
r178740 | rego@igalia.com | 2014-07-23T07:19:50.003470Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/resources/grid-definitions-parsing-utils.js?r1=178740&r2=178739&pathrev=178740
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set-expected.txt?r1=178740&r2=178739&pathrev=178740
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set.html?r1=178740&r2=178739&pathrev=178740

[CSS Grid Layout] Small refactoring in grid-auto-flow-get-set.html test

Add new helper methods to grid-definitions-parsing-utils.js and use them
in grid-auto-flow-get-set.html. This will ease future modifications of
this test.

This has been done in WebKit as part of r171183:
http://trac.webkit.org/changeset/171183

BUG= 384099 

Review URL: https://codereview.chromium.org/398013004
-----------------------------------------------------------------
Comment 8 by r...@igalia.com, Dec 19 2014
Cc: r...@igalia.com
Summary: [CSS Grid Layout] Auto-placement algorithm sparse and dense support (was: [CSS Grid Layout] Auto-placement algorithm sparse, dense and stack support)
Stack has been removed from the spec:
http://lists.w3.org/Archives/Public/www-style/2014Dec/0321.html

Stack support was not properly implement yet. However this implies 2 changes:
* The syntax needs to be updated again: [ row | column ] || dense
* Currently "stack" is working like the old "none" (all the items in the first cell), so this behavior has to be dropped too.

More info: http://dev.w3.org/csswg/css-grid/#grid-auto-flow-property
Comment 9 by laforge@google.com, Jan 9 2015
Labels: -Cr-Blink-Rendering-Grid Cr-Blink-Layout-Grid
Migrate from Cr-Blink-Rendering-Grid to Cr-Blink-Layout-Grid
Labels: -Cr-Blink-Rendering Cr-Blink-Layout
Migrate from Cr-Blink-Rendering to Cr-Blink-Layout
Project Member Comment 11 by bugdroid1@chromium.org, Jan 14 2015
The following revision refers to this bug:
  http://src.chromium.org/viewvc/blink?view=rev&rev=188381

------------------------------------------------------------------
r188381 | rego@igalia.com | 2015-01-14T13:36:02.793737Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderGrid.cpp?r1=188381&r2=188380&pathrev=188381
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html?r1=188381&r2=188380&pathrev=188381
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderGrid.h?r1=188381&r2=188380&pathrev=188381
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-area-resolution.html?r1=188381&r2=188380&pathrev=188381
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt?r1=188381&r2=188380&pathrev=188381
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/RenderStyleCSSValueMapping.cpp?r1=188381&r2=188380&pathrev=188381
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/RenderStyleConstants.h?r1=188381&r2=188380&pathrev=188381
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/RenderStyle.h?r1=188381&r2=188380&pathrev=188381
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set.html?r1=188381&r2=188380&pathrev=188381
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/resolver/StyleBuilderConverter.cpp?r1=188381&r2=188380&pathrev=188381
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSValueKeywords.in?r1=188381&r2=188380&pathrev=188381
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/GridResolvedPosition.cpp?r1=188381&r2=188380&pathrev=188381
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html?r1=188381&r2=188380&pathrev=188381
   D http://src.chromium.org/viewvc/blink/trunk/LayoutTests/ietestcenter/css3/grid/grid-column-002.htm?r1=188381&r2=188380&pathrev=188381
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/ietestcenter/css3/grid/grid-column-003.htm?r1=188381&r2=188380&pathrev=188381
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context.html?r1=188381&r2=188380&pathrev=188381
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-update.html?r1=188381&r2=188380&pathrev=188381
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set-expected.txt?r1=188381&r2=188380&pathrev=188381
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/parser/CSSPropertyParser.cpp?r1=188381&r2=188380&pathrev=188381
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html?r1=188381&r2=188380&pathrev=188381
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/resources/grid.css?r1=188381&r2=188380&pathrev=188381

[CSS Grid Layout] Remove stack from grid-auto-flow syntax

"stack" mode for grid-auto-flow property has been removed from the grid
layout spec:
http://dev.w3.org/csswg/css-grid/#propdef-grid-auto-flow

New syntax is:
  [ row | column ] || dense

Modified parsing in order to adapt it to the new syntax.

Also the current behavior relying on "stack" has been updated following
the spec. Now it won't be possible to mimic the old "none" (or "stack")
unless you specify manually the grid-placement properties.

Update layout tests in order to adapt the results to the new behavior.
ietestcenter/css3/grid/grid-column-002.htm was removed as
it doesn't make sense without "stack".

BUG= 384099 

Review URL: https://codereview.chromium.org/826893002
-----------------------------------------------------------------
Comment 12 by r...@igalia.com, Jan 14 2015
Status: Fixed
Project Member Comment 13 by bugdroid1@chromium.org, Feb 24 2015
The following revision refers to this bug:
  http://src.chromium.org/viewvc/blink?view=rev&rev=190759

------------------------------------------------------------------
r190759 | rego@igalia.com | 2015-02-24T17:02:09.927799Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html?r1=190759&r2=190758&pathrev=190759
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/resources/grid.css?r1=190759&r2=190758&pathrev=190759
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-fixed-row-column-expected.txt?r1=190759&r2=190758&pathrev=190759
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderGrid.cpp?r1=190759&r2=190758&pathrev=190759
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-align-justify-overflow.html?r1=190759&r2=190758&pathrev=190759
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-fixed-row-column.html?r1=190759&r2=190758&pathrev=190759

[CSS Grid Layout] Support "sparse" in auto-placed items locked to a row/column

The first step of grid item placement algorithm has been updated in
order to support both "sparse" and "dense" modes. Current code is always
doing a "dense" packing in this case.

Modified RenderGrid::placeSpecifiedMajorAxisItemsOnGrid() in order to
add a cursor for each row/column and use it to place items in the right
position.

See: http://dev.w3.org/csswg/css-grid/#auto-placement-algo

BUG= 384099 
TEST=fast/css-grid-layout/grid-item-auto-placement-fixed-row-column.html

Review URL: https://codereview.chromium.org/920413002
-----------------------------------------------------------------
Sign in to add a comment