1229009 - [css-grid] Issue with sparse packing

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[Manuel Rego Casasnovas]

Attachment: jsbin.ridonugayu.1.html

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/602.1 (KHTML, like Gecko) Version/8.0 Safari/602.1 Debian/buildd-unstable (3.18.0-1) Epiphany/3.18.0

Steps to reproduce:

Testing the attached example (http://jsbin.com/ridonugayu/1/edit?html,css,output).



Actual results:

"i4" is in the 4th column in Firefox but in the 2nd column in Chrome.


Expected results:

"i4" should be in the 2nd column.

From the spec (https://drafts.csswg.org/css-grid/#auto-placement-algo):
"“sparse” packing (omitted dense keyword)
  Set the column-start line of its placement to the earliest (smallest positive index) line index that ensures this item’s grid area will not overlap any occupied grid cells and that is past any grid items previously placed in this row by this step."

It says "this row" and for items spanning several rows, it considers only the first row and not the other ones.
This was confirmed by Tab Atkins on the CSS WG mailing list:
https://lists.w3.org/Archives/Public/www-style/2015Feb/0320.html


BTW, this very similar example is placing "i3" in the 1st column:
http://jsbin.com/hagefilicu/1/edit?html,css,output

It seems more or less the same case, and it's weird that it's not placed in the 3rd column (if it follows a similar behavior to the previous case).

Just to be clear, in this last example "i3" should be in the 1st column, so both Firefox and Chrome match here.

Comment 1

[Mats Palmgren (inactive)]

As it turns out this is caused by the same underlying bug as in bug 1228984,
so marking it dependent on that bug.

Comment 2

[yisibl]

It looks like it was fixed.

Comment 3

[Mats Palmgren (inactive)]

Yep, fixed by bug 1228984.  Thanks for the bug report!