1267555 - [css-grid] Positioned items from the last/first line of the grid to/from auto

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[Manuel Rego Casasnovas]

Attachment: Example to reproduce the issue

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.22 Safari/537.36

Steps to reproduce:


In a grid with just 1 column, place a positioned item with "2 / auto".


Actual results:


The item is placed outside the grid.


Expected results:


The item should be placed from the last line to the grid to the padding edge.
Similar to what happens if you use "1 / auto" that goes from the first line to the padding edge.

The attached example shows both the case of "2 / auto" and "auto / 1".
You can check it live at:
http://jsbin.com/gayodu/1/edit?html,css,output

Comment 1

[Manuel Rego Casasnovas]

Attachment: Current output

Comment 2

[Manuel Rego Casasnovas]

Attachment: Expected output

Comment 3

[Manuel Rego Casasnovas]

Attachment: chrome-vs-firefox-output.png

You can also check the issue in test: grid-abspos-items-013.html
https://hg.mozilla.org/mozilla-central/raw-file/tip/layout/reftests/css-grid/grid-abspos-items-013.html

I think Chromium output is the right one.

Comment 4

[Mats Palmgren (inactive)]

Attachment: testcase

Here's a better testcase (green areas are in-flow items showing the columns,
grey areas are grid gaps, black areas are grid-aligned abs.pos. boxes).

There should be complete symmetry in this test:

Abs.pos. boxes that span from the 0th line (the start padding edge) to an
end-line should stretch to the *start* of that end-line (= the start side of
the grid gap).

Abs.pos. boxes that span from the -0th line (the end padding edge) to a
start-line should stretch to the *end* of that start-line (= the end side of
the grid gap).

The spec is quite clear that spanning to/from the padding edge should
behave just like spanning to/from other lines:
https://drafts.csswg.org/css-grid/#augmented-grid
"These lines become the first and last lines (0th and -0th) of the augmented
grid used for positioning absolutely-positioned items."

Comment 5

[Mats Palmgren (inactive)]

Attachment: testcase #2

Another test where the rendering in Chrome is broken.

In the grid at the top, Chrome aligns the abs.pos. (black) and the in-flow
item (blue) at the same end-position (they both have the same end-line (4)).
In the bottom grid, Chrome aligns the abs.pos. and in-flow start-positions
differently, although they both have the same start line (2).

Firefox aligns the start of both items in the bottom grid at the same position,
just as we align the end position of the items in the top grid in the same position.

Comment 6

[Mats Palmgren (inactive)]

I believe the rendering in Firefox is correct per spec.
There is one or more bugs in Chrome.

Comment 7

[Mats Palmgren (inactive)]

It may help to have the mental model to view the space between tracks as a "fat line",
i.e. a line stretches all the way from the end of one track to the start of the next
track.  The space at the start/end is no different - the first line starts/ends at
the start/end of the content edge and stretches to the first/last track.

Comment 8

[Mats Palmgren (inactive)]

You could also view the start padding itself as a "track" between the line 0 and line 1.
(ditto on the end side)

Comment 9

[Manuel Rego Casasnovas]

Attachment: positioned-items-auto-2.html

Regarding testcase #1 it seems we don't agree on the expected behavior. But they're symmetric in Chromium (master) too.
Regarding testcase #2 it works the same in Chromium (master) and Firefox (trunk).


Past year I asked the CSS WG about this specifically, chek my example in this mail:
https://lists.w3.org/Archives/Public/www-style/2015Oct/0036.html

And Tab's reply:
https://lists.w3.org/Archives/Public/www-style/2015Nov/0070.html

I'm attaching this example and I'll attach the current rendering in both Blink and Firefox.
What's the right one?

Comment 10

[Manuel Rego Casasnovas]

Attachment: chrome-vs-firefox-output-2.png

Comment 11

[Mats Palmgren (inactive)]

I believe the rendering in Firefox is the correct one.
I see no reason why spanning from the padding edge to the first (line 1) or last line
(line -1) should behave differently from spanning to other lines in the grid.

Comment 12

[Mats Palmgren (inactive)]

> Regarding testcase #2 it works the same in Chromium (master) and Firefox (trunk).

Ok, cool.  I guess that change haven't reached the update channel yet.

Comment 13

[Mats Palmgren (inactive)]

After reading 12.1 more carefully, I think you're right that this is a bug in Gecko.
My mistake is that I imagined the space before/after the first/last counted as
a "gutter" and thus should make its associated line "acquire width".

Comment 14

[Mats Palmgren (inactive)]

Attachment: fix

Comment 15

[Mats Palmgren (inactive)]

Attachment: reftest reference tweaks

https://treeherder.mozilla.org/#/jobs?repo=try&revision=88c29a51f476

Comment 16

[Daniel Holbert [:dholbert]]

Comment on attachment 8746419 [details] [diff] [review]
fix

Review of attachment 8746419 [details] [diff] [review]:
-----------------------------------------------------------------

r=me

Comment 17

[Pulsebot]

https://hg.mozilla.org/integration/mozilla-inbound/rev/bdd514a74b46
https://hg.mozilla.org/integration/mozilla-inbound/rev/0942b9f7878c

Comment 18

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/bdd514a74b46
https://hg.mozilla.org/mozilla-central/rev/0942b9f7878c