New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 603423 link

Starred by 2 users

Issue metadata

Status: Fixed
Owner: ----
Closed: Nov 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 3
Type: Bug

Blocking:
issue 234199
issue 273898



Sign in to add a comment

[css-grid] Positioned items and alignment

Project Member Reported by r...@igalia.com, Apr 14 2016

Issue description


According to the css-align spec (https://drafts.csswg.org/css-align/#justify-abspos),
it should be possible to align positioned items too:
"Alignment Container
 The box’s containing block, as modified by the offset properties (top/right/bottom/left)."

Right now Blink (neither Firefox) supports alignment on positioned items.

Attaching a very simple example with the current and expected results.
Check it live at: http://jsbin.com/huqade/1/edit?html,css,output

 
positioned-items-alignment.html
408 bytes View Download
positioned-items-alignment-current.png
1.0 KB View Download
positioned-items-alignment-expected.png
1.0 KB View Download

Comment 1 Deleted

Comment 2 by dholb...@gmail.com, Nov 16 2016

> Right now Blink (neither Firefox) supports alignment on positioned items.

Update: Firefox 52 (which moves to the Aurora/Developer Edition channel at some point later this week) *does* now support CSS alignment of abspos grid children with {justify|align}-self, as of https://bugzilla.mozilla.org/show_bug.cgi?id=1269046

You can test this on Firefox Nightly (which is now at version 53), or on Developer Edition 52 when that goes out (later this week).

Is Chrome planning on implementing this before shipping Grid?

[deleted & re-posted comment to clarify that DevEdition isn't quite at version 52 yet]

Comment 3 by r...@igalia.com, Nov 16 2016

We've plans to work on this as you can find in the "Intent to ship" mail:
>   A few features are currently under development:
>   * Baseline alignment support.
>   * Alignment and orthogonal flows support for positioned grid items.

But note that positioned items behavior is marked as "at-risk" on the spec right now:
"* application of grid placement to absolutely-positioned boxes"

Comment 4 by yio...@gmail.com, Mar 1 2017

https://github.com/w3c/csswg-drafts/issues/440#issuecomment-280459999

"We can deploy a more targeted fix to preserve that, so that "auto" continues to look at the parent's *-items value."

https://bugzilla.mozilla.org/show_bug.cgi?id=1340309




Blocking: 234199
Status: Started (was: Available)
I'm working on this now.
Project Member

Comment 7 by bugdroid1@chromium.org, Nov 10 2017

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

commit 6dc4cef851061c3421ba4b05e51a37beb1364f38
Author: Javier Fernandez <jfernandez@igalia.com>
Date: Fri Nov 10 01:01:48 2017

[css-grid] Implement the alignment logic for positioned items

We are changing how we compute the grid area's size of positioned
items, trying to make the logic as independent as possible of the
grid container's direction.
 
The new way of placing absolute positioned elements in their grid area
is based on the previously computed area's size. This provide a
mechanism to place an item in its area respecting the offsets derived
from the Content Alignment CSS properties and, which is more important,
ignoring the grid container's direction.

Additionally, we use the already implemented alignment logic that's
used for regular grid items. This patch provides almost full alignment
capabilities for positioned objects, with the exception of 'stretch'.

It's worth mentioning that some of the test cases using vertical-rl
writing mode will fail because of the bug 779105.

Bug:  603423 ,  777978 

Change-Id: I8fb121418795244d13589d603007c70f58e1f2df
Reviewed-on: https://chromium-review.googlesource.com/672423
Reviewed-by: Manuel Rego Casasnovas <rego@igalia.com>
Commit-Queue: Javier Fernandez <jfernandez@igalia.com>
Cr-Commit-Position: refs/heads/master@{#515391}
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-column-axis-alignment-positioned-items-001.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-column-axis-alignment-positioned-items-002.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-column-axis-alignment-positioned-items-003.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-column-axis-alignment-positioned-items-004.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-column-axis-alignment-positioned-items-005.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-column-axis-alignment-positioned-items-006.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-column-axis-alignment-positioned-items-007.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-column-axis-alignment-positioned-items-008.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-column-axis-alignment-positioned-items-009.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-column-axis-alignment-positioned-items-010.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-column-axis-alignment-positioned-items-011.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-column-axis-alignment-positioned-items-012.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-column-axis-alignment-positioned-items-013.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-column-axis-alignment-positioned-items-014.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-column-axis-alignment-positioned-items-015.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-column-axis-alignment-positioned-items-016.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-row-axis-alignment-positioned-items-001.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-row-axis-alignment-positioned-items-002.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-row-axis-alignment-positioned-items-003.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-row-axis-alignment-positioned-items-004.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-row-axis-alignment-positioned-items-005.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-row-axis-alignment-positioned-items-006.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-row-axis-alignment-positioned-items-007.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-row-axis-alignment-positioned-items-008.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-row-axis-alignment-positioned-items-009.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-row-axis-alignment-positioned-items-010.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-row-axis-alignment-positioned-items-011.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-row-axis-alignment-positioned-items-012.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-row-axis-alignment-positioned-items-013.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-row-axis-alignment-positioned-items-014.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-row-axis-alignment-positioned-items-015.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-row-axis-alignment-positioned-items-016.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-non-static-positioned-items-001.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-non-static-positioned-items-002.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-non-static-positioned-items-003.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-non-static-positioned-items-004.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-non-static-positioned-items-005.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-non-static-positioned-items-006.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-non-static-positioned-items-007.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-non-static-positioned-items-008.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-non-static-positioned-items-009-expected.txt
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-non-static-positioned-items-009.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-non-static-positioned-items-010-expected.txt
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-non-static-positioned-items-010.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-non-static-positioned-items-011-expected.txt
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-non-static-positioned-items-011.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-non-static-positioned-items-012-expected.txt
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-non-static-positioned-items-012.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-001.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-002.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-003.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-004.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-005.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-006.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-007.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-008.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-009.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-010.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-011.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-012.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-013.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-014.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-015.html
[add] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-016.html
[modify] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/Source/core/layout/GridLayoutUtils.cpp
[modify] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/Source/core/layout/GridLayoutUtils.h
[modify] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/Source/core/layout/GridTrackSizingAlgorithm.cpp
[modify] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/Source/core/layout/LayoutGrid.cpp
[modify] https://crrev.com/6dc4cef851061c3421ba4b05e51a37beb1364f38/third_party/WebKit/Source/core/layout/LayoutGrid.h

Status: Fixed (was: Started)
This should be FIXED now.

Sign in to add a comment