Skip to content

GitLab

T
tangled
Commit 897a1265 authored by Manuel Rego Casasnovas's avatar Manuel Rego Casasnovas Committed by Commit Bot
Browse files
Options

[css-grid] Apply content alignment during second pass 

When we integrated content alignment in the track sizing algorithm
(r566412) we forgot to do it too when the 2nd pass is needed.

The patch is very simple and just adds the calls to apply
content alignment in LayoutGrid::RepeatTracksSizingIfNeeded()
for each axis.

The spec also mentions it in the new 3 and 4 steps:
https://drafts.csswg.org/css-grid/#algo-overview
So the new code just aligns with the spec.

BUG=870634
TEST=external/wpt/css/css-grid/alignment/grid-content-alignment-second-pass-001.html

Change-Id: Iccbcea5da1011eae37b4923bb78334cddc76d027
Reviewed-on: https://chromium-review.googlesource.com/1161925Reviewed-by: default avatarSergio Villar <svillar@igalia.com>
Commit-Queue: Manuel Rego <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#580890}
parent 7829ea79
Hide whitespace changes
Inline Side-by-side
Showing with 71 additions and 0 deletions
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-content-alignment-second-pass-001.html 0 → 100644
View file @ 897a1265
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Content alignment second pass</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
<meta name="flags" content="ahem dom">
<meta name="assert" content="This test checks that content alignment is properly applied when the size of the tracks changes in the second pass of the track sizing algorithm.">
<link rel="stylesheet" href="../../support/grid.css">
<link rel="stylesheet" href="../../support/alignment.css">
<style>
.grid {
position: relative;
width: 100px;
height: 50px;
font: 25px/1 Ahem;
margin: 10px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onLoad="checkLayout('.grid');">
<div id="log"></div>
<div class="grid">
<div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX X</div>
</div>
<div class="grid contentStretch">
<div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX X</div>
</div>
<div class="grid contentStart">
<div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
</div>
<div class="grid contentCenter">
<div class="firstRowFirstColumn verticalLR" data-offset-x="25" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
</div>
<div class="grid contentEnd">
<div class="firstRowFirstColumn verticalLR" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
</div>
<div class="grid contentSpaceBetween">
<div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
<div class="firstRowSecondColumn" data-offset-x="75" data-offset-y="0" data-expected-width="25" data-expected-height="50">X</div>
</div>
<div class="grid contentSpaceEvenly" style="width: 105px;">
<div class="firstRowFirstColumn verticalLR" data-offset-x="10" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
<div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="0" data-expected-width="25" data-expected-height="50">X</div>
</div>
<div class="grid contentSpaceAround" style="width: 115px;">
<div class="firstRowFirstColumn verticalLR" data-offset-x="10" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
<div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="50">X</div>
</div>
</body>
third_party/blink/renderer/core/layout/layout_grid.cc
View file @ 897a1265
...@@ -262,7 +262,13 @@ void LayoutGrid::RepeatTracksSizingIfNeeded( ...@@ -262,7 +262,13 @@ void LayoutGrid::RepeatTracksSizingIfNeeded(
// Hence we need to repeat computeUsedBreadthOfGridTracks for both, columns // Hence we need to repeat computeUsedBreadthOfGridTracks for both, columns
// and rows, to determine the final values. // and rows, to determine the final values.
ComputeTrackSizesForDefiniteSize(kForColumns, available_space_for_columns); ComputeTrackSizesForDefiniteSize(kForColumns, available_space_for_columns);
ComputeContentPositionAndDistributionOffset(
kForColumns, track_sizing_algorithm_.FreeSpace(kForColumns).value(),
NonCollapsedTracks(kForColumns));
ComputeTrackSizesForDefiniteSize(kForRows, available_space_for_rows); ComputeTrackSizesForDefiniteSize(kForRows, available_space_for_rows);
ComputeContentPositionAndDistributionOffset(
kForRows, track_sizing_algorithm_.FreeSpace(kForRows).value(),
NonCollapsedTracks(kForRows));
} }
void LayoutGrid::UpdateBlockLayout(bool relayout_children) { void LayoutGrid::UpdateBlockLayout(bool relayout_children) {
......
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