Skip to content

GitLab

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

[css-grid] Use max size to compute auto repeat tracks 

When available size is indefinite we should use max size to compute
the number of auto repeat tracks.

The spec text is very clear
(https://drafts.csswg.org/css-grid/#auto-repeat):
> When auto-fill is given as the repetition number,
> if the grid container has a definite size or **max size**
> in the relevant axis...

So far we were not doing that for widths,
in this patch we modify LayoutGrid::ComputeAutoRepeatTracksCount()
to do the same than for heights.

We also take advantage to fix problems related to min|max sizes
and box-sizing property, that were inconsistent for columns and rows.

BUG=957932
TEST=external/wpt/css/css-grid/grid-definition/grid-auto-repeat-max-size-001.html
TEST=external/wpt/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html
TEST=external/wpt/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html
TEST=external/wpt/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html
TEST=external/wpt/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html

Change-Id: I9cce24d38f1a00bea8fa04e42645c777c57e486e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1588388Reviewed-by: default avatarOriol Brufau <obrufau@igalia.com>
Reviewed-by: default avatarJavier Fernandez <jfernandez@igalia.com>
Commit-Queue: Manuel Rego <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#658809}
parent a18903ec
Hide whitespace changes
Inline Side-by-side
Showing with 379 additions and 19 deletions
third_party/blink/renderer/core/layout/layout_grid.cc
View file @ bfb85a97
......@@ -579,32 +579,51 @@ size_t LayoutGrid::ComputeAutoRepeatTracksCount(
if (!auto_repeat_track_list_length)
return 0;
if (!is_row_axis) {
if (!available_size) {
const Length& max_length = StyleRef().LogicalMaxHeight();
if (!max_length.IsMaxSizeNone()) {
available_size = ConvertLayoutUnitToOptional(
ConstrainContentBoxLogicalHeightByMinMax(
AvailableLogicalHeightUsing(max_length,
kExcludeMarginBorderPadding),
LayoutUnit(-1)));
bool needs_to_fulfill_minimum_size = false;
if (!available_size) {
const Length& max_size = is_row_axis ? StyleRef().LogicalMaxWidth()
: StyleRef().LogicalMaxHeight();
base::Optional<LayoutUnit> containing_block_available_size;
LayoutUnit available_max_size = LayoutUnit();
if (max_size.IsSpecified()) {
if (max_size.IsPercentOrCalc()) {
containing_block_available_size =
is_row_axis ? ContainingBlockLogicalWidthForContent()
: ContainingBlockLogicalHeightForContent(
kExcludeMarginBorderPadding);
}
LayoutUnit max_size_value = ValueForLength(
max_size, containing_block_available_size.value_or(LayoutUnit()));
available_max_size =
is_row_axis
? AdjustContentBoxLogicalWidthForBoxSizing(max_size_value)
: AdjustContentBoxLogicalHeightForBoxSizing(max_size_value);
}
}
bool needs_to_fulfill_minimum_size = false;
if (!available_size) {
const Length& min_size = is_row_axis ? StyleRef().LogicalMinWidth()
: StyleRef().LogicalMinHeight();
if (!min_size.IsSpecified())
if (!available_max_size && !min_size.IsSpecified())
return auto_repeat_track_list_length;
LayoutUnit containing_block_available_size =
is_row_axis ? ContainingBlockLogicalWidthForContent()
: ContainingBlockLogicalHeightForContent(
kExcludeMarginBorderPadding);
available_size = ValueForLength(min_size, containing_block_available_size);
needs_to_fulfill_minimum_size = true;
LayoutUnit available_min_size = LayoutUnit();
if (min_size.IsSpecified()) {
if (!containing_block_available_size && min_size.IsPercentOrCalc()) {
containing_block_available_size =
is_row_axis ? ContainingBlockLogicalWidthForContent()
: ContainingBlockLogicalHeightForContent(
kExcludeMarginBorderPadding);
}
LayoutUnit min_size_value = ValueForLength(
min_size, containing_block_available_size.value_or(LayoutUnit()));
available_min_size =
is_row_axis
? AdjustContentBoxLogicalWidthForBoxSizing(min_size_value)
: AdjustContentBoxLogicalHeightForBoxSizing(min_size_value);
if (!max_size.IsSpecified())
needs_to_fulfill_minimum_size = true;
}
available_size = std::max(available_min_size, available_max_size);
}
LayoutUnit auto_repeat_tracks_size;
......
third_party/blink/web_tests/external/wpt/css/css-grid/grid-definition/grid-auto-repeat-max-size-001.html 0 → 100644
View file @ bfb85a97
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Auto repeat tracks and max sizes</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
<meta name="assert" content="This test checks that auto repeat tracks use max size when size is indefinite to compute the number of tracks.">
<link rel="stylesheet" href="support/grid.css">
<style>
.grid {
position: relative;
display: grid;
grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
max-width: 300px;
max-height: 200px;
}
.border {
border: 10px solid;
}
.border-box {
box-sizing: border-box;
}
.item {
background: lime;
/* Place item on the last cell. */
grid-column: -2;
grid-row: -2;
}
</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" data-expected-width="300" data-expected-height="200">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100">
<div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid border" data-expected-width="320" data-expected-height="220">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid border" style="width: 200px; height: 100px;" data-expected-width="220" data-expected-height="120">
<div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid border" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid border" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid border border-box" data-expected-width="300" data-expected-height="170">
<div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid border border-box" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100">
<div class="item" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid border border-box" style="width: min-content; height: min-content;" data-expected-width="220" data-expected-height="170">
<div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid border border-box" style="width: max-content; height: max-content;" data-expected-width="220" data-expected-height="170">
<div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
</div>
</body>
third_party/blink/web_tests/external/wpt/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html 0 → 100644
View file @ bfb85a97
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Auto repeat tracks and percentage max sizes</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
<meta name="assert" content="This test checks that auto repeat tracks use percentage max size when size is indefinite to compute the number of tracks.">
<link rel="stylesheet" href="support/grid.css">
<style>
.grid {
position: relative;
display: grid;
grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
max-width: 50%;
max-height: 80%;
}
.wrapper {
width: 600px;
height: 250px;
}
.item {
background: lime;
/* Place item on the last cell. */
grid-column: -2;
grid-row: -2;
}
</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="wrapper">
<div class="grid" data-expected-width="300" data-expected-height="200">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
</div>
<div class="wrapper">
<div class="grid" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100">
<div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
</div>
</div>
<div class="wrapper">
<div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
</div>
<div class="wrapper">
<div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
</div>
</body>
third_party/blink/web_tests/external/wpt/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html 0 → 100644
View file @ bfb85a97
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Auto repeat tracks with min and max sizes</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
<meta name="assert" content="This test checks that auto repeat tracks don't overflow the grid container size when max size is definite, even if min size is bigger than that.">
<link rel="stylesheet" href="support/grid.css">
<style>
.grid {
position: relative;
display: grid;
grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
max-width: 100px;
min-width: 250px;
max-height: 50px;
min-height: 125px;
float: left;
}
.border {
border: 10px solid;
}
.border-box {
box-sizing: border-box;
}
.item {
background: lime;
/* Place item on the last cell. */
grid-column: -2;
grid-row: -2;
}
</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" data-expected-width="250" data-expected-height="125">
<div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid" style="width: 200px; height: 100px;" data-expected-width="250" data-expected-height="125">
<div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid" style="width: min-content; height: min-content;" data-expected-width="250" data-expected-height="125">
<div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid" style="width: max-content; height: max-content;" data-expected-width="250" data-expected-height="125">
<div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
</div>
</body>
third_party/blink/web_tests/external/wpt/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html 0 → 100644
View file @ bfb85a97
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Auto repeat tracks and min sizes</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
<meta name="assert" content="This test checks that auto repeat tracks use min size when available to compute the number of tracks.">
<link rel="stylesheet" href="support/grid.css">
<style>
.grid {
position: relative;
display: grid;
grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
min-width: 300px;
min-height: 200px;
float: left;
}
.border {
border: 10px solid;
}
.border-box {
box-sizing: border-box;
}
.item {
background: lime;
/* Place item on the last cell. */
grid-column: -2;
grid-row: -2;
}
</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" data-expected-width="300" data-expected-height="200">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid border" data-expected-width="320" data-expected-height="220">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid border" style="width: 200px; height: 100px;" data-expected-width="320" data-expected-height="220">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid border" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid border" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid border border-box" data-expected-width="320" data-expected-height="220">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid border border-box" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200">
<div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid border border-box" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
<div class="grid border border-box" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
</body>
third_party/blink/web_tests/external/wpt/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html 0 → 100644
View file @ bfb85a97
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Auto repeat tracks and percentage min sizes</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
<meta name="assert" content="This test checks that auto repeat tracks use percentage min size when available to compute the number of tracks.">
<link rel="stylesheet" href="support/grid.css">
<style>
.grid {
position: relative;
display: grid;
grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
min-width: 50%;
min-height: 80%;
float: left;
}
.wrapper {
width: 600px;
height: 250px;
}
.item {
background: lime;
/* Place item on the last cell. */
grid-column: -2;
grid-row: -2;
}
</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="wrapper">
<div class="grid" data-expected-width="300" data-expected-height="200">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
</div>
<div class="wrapper">
<div class="grid" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
</div>
<div class="wrapper">
<div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
</div>
<div class="wrapper">
<div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200">
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
</div>
</div>
</body>
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