Skip to content

GitLab

T
tangled
Commit 5c2e03af authored by Oriol Brufau's avatar Oriol Brufau Committed by Commit Bot
Browse files
Options

[css-grid] Set available column space before grid items prelayout 

Before running the grid track sizing algorithm, there is a prelayout
step which takes care of the baseline alignment of the items.
In order to do that, we estimate the size of the grid area, since we
have not calculated the final size yet.

The problem was that, when calculating this estimate, the available
column space had not been set yet. So if a column had a percentage track
sizing function, it would be treated as auto and the estimated size
would be wrong.

This patch sets the available column space so that we can resolve
percentage track sizing functions and get a more correct estimate.

Bug: 1121761

TEST=external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-008.html

Change-Id: Ic4410b0a80b92afa5adfd62187ec236bd4fd3ba0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2375649
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Reviewed-by: default avatarJavier Fernandez <jfernandez@igalia.com>
Cr-Commit-Position: refs/heads/master@{#801631}
parent d5088ab4
Show whitespace changes
Inline Side-by-side
Showing with 54 additions and 0 deletions
third_party/blink/renderer/core/layout/layout_grid.cc
View file @ 5c2e03af
...@@ -304,6 +304,8 @@ void LayoutGrid::UpdateBlockLayout(bool relayout_children) { ...@@ -304,6 +304,8 @@ void LayoutGrid::UpdateBlockLayout(bool relayout_children) {
LayoutUnit available_space_for_columns = AvailableLogicalWidth(); LayoutUnit available_space_for_columns = AvailableLogicalWidth();
PlaceItemsOnGrid(track_sizing_algorithm_, available_space_for_columns); PlaceItemsOnGrid(track_sizing_algorithm_, available_space_for_columns);
track_sizing_algorithm_.SetAvailableSpace(kForColumns,
available_space_for_columns);
PerformGridItemsPreLayout(track_sizing_algorithm_); PerformGridItemsPreLayout(track_sizing_algorithm_);
// 1- First, the track sizing algorithm is used to resolve the sizes of the // 1- First, the track sizing algorithm is used to resolve the sizes of the
......
third_party/blink/web_tests/TestExpectations
View file @ 5c2e03af
...@@ -3852,6 +3852,7 @@ crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/sel ...@@ -3852,6 +3852,7 @@ crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/sel
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-005.html [ Failure ] crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-005.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-006.html [ Failure ] crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-006.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-007.html [ Failure ] crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-007.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-008.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-001.html [ Failure ] crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-001.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-002.html [ Failure ] crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-002.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-003.html [ Failure ] crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-003.html [ Failure ]
......
third_party/blink/web_tests/external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-008-ref.html 0 → 100644
View file @ 5c2e03af
<!DOCTYPE html>
<meta charset="utf-8">
<style>
div {
float: left;
width: 200px;
height: 200px;
background: green;
}
</style>
<div></div>
<div style="margin-top: 100px"></div>
third_party/blink/web_tests/external/wpt/css/css-grid/alignment/self-baseline/grid-self-baseline-008.html 0 → 100644
View file @ 5c2e03af
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: baseline context and self alignment</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1121761">
<link rel="match" href="grid-self-baseline-008-ref.html">
<link rel="stylesheet" href="/css/support/alignment.css">
<meta name="assert" content="Test baseline alignment with percentage track sizing functions and grid items being or containing replaced elements with aspect ratio and percentage sizes." />
<style>
.grid {
display: grid;
width: 400px;
grid-template-columns: 25% 25% 25% 25%;
line-height: 0;
}
.percent {
width: 100%;
}
canvas {
background: green;
}
</style>
<div class="grid alignItemsBaseline">
<canvas width="100" height="200"></canvas>
<canvas width="200" height="400" class="percent"></canvas>
<div>
<canvas width="100" height="100" class="percent"></canvas>
<canvas width="100" height="100" class="percent"></canvas>
</div>
<div class="percent">
<canvas width="100" height="100" class="percent"></canvas>
<canvas width="100" height="100" class="percent"></canvas>
</div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment