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

Issue 704713 link

Starred by 1 user
Status: Fixed
Owner:
jfernan...@igalia.com
Closed: Jun 2018
Cc:
█ msten...@opera.com
r...@igalia.com
cbiesin...@chromium.org
svil...@igalia.com
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug



Sign in to add a comment

[css-grid] Baseline Alignment may affect the grid's intrinsic size

Project Member Reported by jfernan...@igalia.com, Mar 23 2017 
According to the CSS Box Alignment specification, the result of Baseline-Self alignment and Baseline-Content alignment may affect the min-content contribution of some grid items.

https://drafts.csswg.org/css-align/#baseline-align-content
https://drafts.csswg.org/css-align/#baseline-align-self

Hence, it may happen that the grid container's intrinsic size is altered during the layout. 

This issue is quite polemic, as it's widely accepted that intrinsic size should not depend on layout. In any case, Firefox implementes the behavior defined in the spec so we should do it as well. 

In addition, there are other cases that may affect the grid's intrinsic size, like the presence of orthogonal grid items.

Comment 1 by jfernan...@igalia.com, Mar 23 2017

Cc: cbiesin...@chromium.org svil...@igalia.com r...@igalia.com msten...@opera.com
Owner: jfernan...@igalia.com
Since it's well known that we are reluctant to execute any layout logic during intrinsic size computation, and updating the intrinsic size after layout, I filed an issue to the spec, so we can discuss there any change that could avoid us introducing such behavior in the engine. 

https://github.com/w3c/csswg-drafts/issues/1039
Project Member

Comment 2 by bugdroid1@chromium.org, May 29 2018 

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

commit 6534acd9b94a260ccf88ccdfd7ab8b3859349082
Author: Javier Fernandez <jfernandez@igalia.com>
Date: Tue May 29 13:33:15 2018

[css-grid] Baseline alignment inside the tracks sizing algorithm

We have identified several cases where the Baseline Alignment accounts
for the grid's intrinsic size. Since we depend on the track sizing
algorithm to compute the grid's intrinsic size, the only way to handle
all these cases is to integrate the baseline alignment logic in the
algorithm.

Additionally, the CSSWG has identified several cases that can't be
solved properly; such cases have in common that they imply cyclic
dependencies between the item's and grid area's size. The CSSWG has
resolved that these items don't participate in baseline alignment:

https://github.com/w3c/csswg-drafts/issues/1365

There are also other related issues with some examples and relevant
discussions about this topic:

https://github.com/w3c/csswg-drafts/issues/1039
https://github.com/w3c/csswg-drafts/issues/1409

Bug:  704713 
Change-Id: I817b16eb43aa76f4827deb8f1f20efb7fde3dc22
Reviewed-on: https://chromium-review.googlesource.com/923261
Commit-Queue: Javier Fernandez <jfernandez@igalia.com>
Reviewed-by: Sergio Villar <svillar@igalia.com>
Cr-Commit-Position: refs/heads/master@{#562406}
[add] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html
[add] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html
[add] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html
[add] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html
[add] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html
[add] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html
[add] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html
[add] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html
[add] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html
[add] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html
[add] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/external/wpt/css/support/grid.css
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-02-expected.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-02.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-03-expected.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-03.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-04-expected.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-04.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-05-expected.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-05.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-06-expected.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-06.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-two-dimensional.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-02-expected.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-02.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-03-expected.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-03.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-04-expected.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-04.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-05-expected.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-05.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-06-expected.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-06.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-02-expected.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-02.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-03-expected.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-03.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-04-expected.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-04.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-05-expected.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-05.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-06-expected.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-06.html
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/blink/renderer/core/layout/grid_baseline_alignment.cc
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/blink/renderer/core/layout/grid_baseline_alignment.h
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/blink/renderer/core/layout/grid_layout_utils.cc
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/blink/renderer/core/layout/grid_layout_utils.h
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/blink/renderer/core/layout/grid_track_sizing_algorithm.cc
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/blink/renderer/core/layout/grid_track_sizing_algorithm.h
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/blink/renderer/core/layout/layout_grid.cc
[modify] https://crrev.com/6534acd9b94a260ccf88ccdfd7ab8b3859349082/third_party/blink/renderer/core/layout/layout_grid.h

Comment 3 by jfernan...@igalia.com, Jun 7 2018

Status: Fixed (was: Untriaged)
This issue should be FIXED now.
►

Sign in to add a comment