New issue
Advanced search Search tips

Issue 618996 link

Starred by 3 users
Status: Fixed
Owner:
r...@igalia.com
Closed: May 2017
Cc:
r...@igalia.com
cbiesin...@chromium.org
svil...@igalia.com
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug

Blocking:
issue 273898



Sign in to add a comment

[css-grid] Positioned item using min-content even when there are enough available space

Project Member Reported by jfernan...@igalia.com, Jun 10 2016 
Load the attached test case to reproduce the issue.

The items in the second column are sized using min-content, even when
second column is 100px, more than enough for the elements to fit. Since
they are positioned elements, in case of lack of space they should shrink
to fit in its container (the grid cell in this case).
positioned-min-content.html
443 bytes View Download

Comment 1 by jfernan...@igalia.com, Jun 10 2016

Cc: cbiesin...@chromium.org svil...@igalia.com r...@igalia.com
Components: Blink>Layout>Grid

Comment 2 by r...@igalia.com, Jun 10 2016

Blocking: 273898

Comment 3 by r...@igalia.com, Jun 10 2016

Status: Available (was: Untriaged)

Comment 4 by r...@igalia.com, Jul 22 2016 

Just some information, the issue is that in LayoutBox::computePositionedLogicalWidthUsing()
we compute wrongly the "availableSpace".
The problem is that "logicalLeftValue" includes the extraInlineOffset(),
and that leads to the wrong calculation.

Comment 5 by rachelan...@gmail.com, Jan 27 2017 

I've run into what I believe is the same bug, adding my example as an additional test case. Chrome 58.0.2994.0. Setting an offset property of right with value 0 will cause  'three' to display correctly. 

http://codepen.io/rachelandrew/pen/XpgBQL

Comment 6 by r...@igalia.com, Jan 27 2017

Labels: Hotlist-Interop
Owner: r...@igalia.com
Status: Assigned (was: Available)
Hi Rachel, yeah it clearly seems the very same issue.

I've been working on this issue for a long time without too much progress.
Now it seems I found a new approach and I've a patch that fixes it,
hopefully next week I'll find time to add tests and upload it.
Project Member

Comment 7 by bugdroid1@chromium.org, May 8 2017 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/e48a88ace117744e50c9f9769b40b9d702f286bf

commit e48a88ace117744e50c9f9769b40b9d702f286bf
Author: rego <rego@igalia.com>
Date: Mon May 08 18:47:12 2017

[css-grid] Fix behavior of positioned items without specific dimensions

Currently positioned items that doesn't have specific dimensions
are not properly sized. This patch fixes the issues with them.

The patch removes the ExtraInline|BlockOffsets from LayoutBox,
so now LayouGrid is responsible to setting the location of the positioned item.
This will be useful to add alignment support for positioned items later.
It also removes grid specific logic from LayoutBox.

LayoutBox::ComputeInlineStaticDistance() was modified
as it got confused because the container of the positioned grid items
is not the grid container, but the grid area. That caused wrong values
when resolving "auto" in both left and right offset properties.

Note that after this patch we match Firefox behavior on these cases.

BUG= 618996 
TEST=fast/css-grid-layout/positioned-grid-items-sizing.html
TEST=external/wpt/css/css-grid-1/abspos/

Review-Url: https://codereview.chromium.org/2665133003
Cr-Commit-Position: refs/heads/master@{#470063}

[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-001-ref.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-001.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-002.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-003.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-004.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-005-ref.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-005.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-006-ref.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-006.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-007-ref.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-007.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-008-ref.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-008.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-009-ref.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-009.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-010.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-011-ref.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-011.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-012-ref.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-012.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-013-ref.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-013.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-014-ref.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-014.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-015-ref.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-015.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-016-ref.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-016.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-017-ref.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-017.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/fast/css-grid-layout/positioned-grid-items-sizing-expected.html
[add] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/LayoutTests/fast/css-grid-layout/positioned-grid-items-sizing.html
[modify] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/Source/core/layout/LayoutBox.cpp
[modify] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/Source/core/layout/LayoutBox.h
[modify] https://crrev.com/e48a88ace117744e50c9f9769b40b9d702f286bf/third_party/WebKit/Source/core/layout/LayoutGrid.cpp

Comment 8 by r...@igalia.com, May 8 2017

Status: Fixed (was: Assigned)
The original patch was very complex and finally had some issues.
After not a small amount of time, a new version of the patch has just landed.
So this issue is fixed.

Both the original example reported in the bug, plus Rachel's example work as expected now.

Comment 9 by yio...@gmail.com, May 9 2017 

Before that we can used .three {right: 0;} fixed this problem.
►

Sign in to add a comment