Skip to content

GitLab

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

[css-grid] Fix percentage track sizing functions in size containment 

When finding the intrinsic sizes of a grid container, track sizing
functions that contain percentages would be indefinite, and thus should
be treated as 'auto'.

This is done in GridTrackSizingAlgorithm::CalculateGridTrackSize, but
there was an early return if the grid container had size containment.
Then, instead of being treated as 'auto', the track sizing function used
to just resolve the percentage against 0.

Additionally, a track sizing function of '1fr' is supposed to be treated
as 'minmax(auto, 1fr)', since only max track sizing functions can be
flexible. This fixup was also skipped, though this didn't affect the
final result.

This patch fixes these problems by removing the early return and adding
some asserts.

BUG=1069310

TEST=external/wpt/css/css-contain/contain-size-grid-003.html
TEST=external/wpt/css/css-contain/contain-size-grid-004.html

Change-Id: I1b8d8645a3fdf6c697c503184b35cc8cd12925a9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2144019
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Reviewed-by: default avatarJavier Fernandez <jfernandez@igalia.com>
Cr-Commit-Position: refs/heads/master@{#759431}
parent 389c67c9
Hide whitespace changes
Inline Side-by-side
Showing with 217 additions and 5 deletions
third_party/blink/renderer/core/layout/grid_track_sizing_algorithm.cc
View file @ f9b790bb
...@@ -941,8 +941,6 @@ GridTrackSize GridTrackSizingAlgorithm::CalculateGridTrackSize( ...@@ -941,8 +941,6 @@ GridTrackSize GridTrackSizingAlgorithm::CalculateGridTrackSize(
GridLength min_track_breadth = track_size.MinTrackBreadth(); GridLength min_track_breadth = track_size.MinTrackBreadth();
GridLength max_track_breadth = track_size.MaxTrackBreadth(); GridLength max_track_breadth = track_size.MaxTrackBreadth();
if (strategy_->IsComputingSizeContainment())
return GridTrackSize(min_track_breadth, max_track_breadth);
// If the logical width/height of the grid container is indefinite, percentage // If the logical width/height of the grid container is indefinite, percentage
// values are treated as <auto>. // values are treated as <auto>.
...@@ -971,11 +969,14 @@ GridTrackSize GridTrackSizingAlgorithm::CalculateGridTrackSize( ...@@ -971,11 +969,14 @@ GridTrackSize GridTrackSizingAlgorithm::CalculateGridTrackSize(
LayoutUnit GridTrackSizingAlgorithm::InitialBaseSize( LayoutUnit GridTrackSizingAlgorithm::InitialBaseSize(
const GridTrackSize& track_size) const { const GridTrackSize& track_size) const {
const GridLength& grid_length = track_size.MinTrackBreadth(); const GridLength& grid_length = track_size.MinTrackBreadth();
if (grid_length.IsFlex())
return LayoutUnit(); // TODO(obrufau): https://github.com/w3c/csswg-drafts/issues/2611 may allow
// flexible lengths to be used as min track sizing functions.
DCHECK(!grid_length.IsFlex());
const Length& track_length = grid_length.length(); const Length& track_length = grid_length.length();
if (track_length.IsSpecified()) { if (track_length.IsSpecified()) {
DCHECK(!grid_length.HasPercentage() || AvailableSpace());
return ValueForLength(track_length, return ValueForLength(track_length,
AvailableSpace().value_or(LayoutUnit())); AvailableSpace().value_or(LayoutUnit()));
} }
...@@ -994,6 +995,7 @@ LayoutUnit GridTrackSizingAlgorithm::InitialGrowthLimit( ...@@ -994,6 +995,7 @@ LayoutUnit GridTrackSizingAlgorithm::InitialGrowthLimit(
const Length& track_length = grid_length.length(); const Length& track_length = grid_length.length();
if (track_length.IsSpecified()) { if (track_length.IsSpecified()) {
DCHECK(!grid_length.HasPercentage() || AvailableSpace());
return ValueForLength(track_length, return ValueForLength(track_length,
AvailableSpace().value_or(LayoutUnit())); AvailableSpace().value_or(LayoutUnit()));
} }
......
third_party/blink/web_tests/external/wpt/css/css-contain/contain-size-grid-003.html
View file @ f9b790bb
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
</div> </div>
<div class="grid" style="grid: calc(50px - 10%) / calc(100px + 20%);" <div class="grid" style="grid: calc(50px - 10%) / calc(100px + 20%);"
data-expected-width="100" data-expected-height="50"> data-expected-width="0" data-expected-height="0">
</div> </div>
<div class="grid" style="grid: fit-content(50px) / fit-content(100px);" <div class="grid" style="grid: fit-content(50px) / fit-content(100px);"
......
third_party/blink/web_tests/external/wpt/css/css-contain/contain-size-grid-004.html 0 → 100644
View file @ f9b790bb
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Size containment on grid containers with percentages</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
<meta name="assert" content="Checks that grid containers with size containment and their grid items are sized correctly when the track sizing functions contain percentages.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.grid {
display: grid;
contain: size;
font: 75px/1 Ahem;
}
.min-content {
height: min-content;
width: min-content;
}
.max-content {
height: max-content;
width: max-content;
}
.fixed {
height: 100px;
width: 100px;
}
.percent {
grid: 50% / 200%;
}
.calc {
grid: calc(100px + 50%) / calc(100px + 200%);
}
.minmax-percent-fixed {
grid: minmax(50%, 100px) / minmax(200%, 100px);
}
.minmax-fixed-percent {
grid: minmax(100px, 50%) / minmax(100px, 200%);
}
.minmax-percent-flex {
grid: minmax(50%, 1fr) / minmax(200%, 1fr);
}
.minmax-percent-intrinsic {
grid: minmax(50%, min-content) / minmax(200%, min-content);
}
.minmax-intrinsic-percent {
grid: minmax(min-content, 50%) / minmax(min-content, 200%);
}
.fit-content {
grid: fit-content(50%) / fit-content(200%);
}
</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 percent min-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="0" data-expected-width="0"></div>
</div>
<div class="grid percent min-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="0" data-expected-width="0">XXXX</div>
</div>
<div class="grid percent max-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="0" data-expected-width="0"></div>
</div>
<div class="grid percent max-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="0" data-expected-width="0">XXXX</div>
</div>
<div class="grid percent fixed" data-expected-height="100" data-expected-width="100">
<div data-expected-height="50" data-expected-width="200"></div>
</div>
<div class="grid percent fixed" data-expected-height="100" data-expected-width="100">
<div data-expected-height="50" data-expected-width="200">XXXX</div>
</div>
<div class="grid calc min-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="100" data-expected-width="100"></div>
</div>
<div class="grid calc min-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="100" data-expected-width="100">XXXX</div>
</div>
<div class="grid calc max-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="100" data-expected-width="100"></div>
</div>
<div class="grid calc max-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="100" data-expected-width="100">XXXX</div>
</div>
<div class="grid calc fixed" data-expected-height="100" data-expected-width="100">
<div data-expected-height="150" data-expected-width="300"></div>
</div>
<div class="grid calc fixed" data-expected-height="100" data-expected-width="100">
<div data-expected-height="150" data-expected-width="300">XXXX</div>
</div>
<div class="grid minmax-percent-fixed min-content" data-expected-height="100" data-expected-width="0">
<div data-expected-height="100" data-expected-width="0"></div>
</div>
<div class="grid minmax-percent-fixed min-content" data-expected-height="100" data-expected-width="0">
<div data-expected-height="100" data-expected-width="0">XXXX</div>
</div>
<div class="grid minmax-percent-fixed max-content" data-expected-height="100" data-expected-width="100">
<div data-expected-height="100" data-expected-width="200"></div>
</div>
<div class="grid minmax-percent-fixed max-content" data-expected-height="100" data-expected-width="100">
<div data-expected-height="100" data-expected-width="200">XXXX</div>
</div>
<div class="grid minmax-percent-fixed fixed" data-expected-height="100" data-expected-width="100">
<div data-expected-height="100" data-expected-width="200"></div>
</div>
<div class="grid minmax-percent-fixed fixed" data-expected-height="100" data-expected-width="100">
<div data-expected-height="100" data-expected-width="200">XXXX</div>
</div>
<div class="grid minmax-fixed-percent min-content" data-expected-height="100" data-expected-width="100">
<div data-expected-height="100" data-expected-width="100"></div>
</div>
<div class="grid minmax-fixed-percent min-content" data-expected-height="100" data-expected-width="100">
<div data-expected-height="100" data-expected-width="100">XXXX</div>
</div>
<div class="grid minmax-fixed-percent max-content" data-expected-height="100" data-expected-width="100">
<div data-expected-height="100" data-expected-width="100"></div>
</div>
<div class="grid minmax-fixed-percent max-content" data-expected-height="100" data-expected-width="100">
<div data-expected-height="100" data-expected-width="100">XXXX</div>
</div>
<div class="grid minmax-fixed-percent fixed" data-expected-height="100" data-expected-width="100">
<div data-expected-height="100" data-expected-width="100"></div>
</div>
<div class="grid minmax-fixed-percent fixed" data-expected-height="100" data-expected-width="100">
<div data-expected-height="100" data-expected-width="100">XXXX</div>
</div>
<div class="grid minmax-percent-flex min-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="0" data-expected-width="0"></div>
</div>
<div class="grid minmax-percent-flex min-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="0" data-expected-width="0">XXXX</div>
</div>
<div class="grid minmax-percent-flex max-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="0" data-expected-width="0"></div>
</div>
<div class="grid minmax-percent-flex max-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="0" data-expected-width="0">XXXX</div>
</div>
<div class="grid minmax-percent-flex fixed" data-expected-height="100" data-expected-width="100">
<div data-expected-height="100" data-expected-width="200"></div>
</div>
<div class="grid minmax-percent-flex fixed" data-expected-height="100" data-expected-width="100">
<div data-expected-height="100" data-expected-width="200">XXXX</div>
</div>
<div class="grid minmax-intrinsic-percent min-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="0" data-expected-width="0"></div>
</div>
<div class="grid minmax-intrinsic-percent min-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="75" data-expected-width="300">XXXX</div>
</div>
<div class="grid minmax-intrinsic-percent max-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="0" data-expected-width="0"></div>
</div>
<div class="grid minmax-intrinsic-percent max-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="75" data-expected-width="300">XXXX</div>
</div>
<div class="grid minmax-intrinsic-percent fixed" data-expected-height="100" data-expected-width="100">
<div data-expected-height="50" data-expected-width="100"></div>
</div>
<div class="grid minmax-intrinsic-percent fixed" data-expected-height="100" data-expected-width="100">
<div data-expected-height="75" data-expected-width="300">XXXX</div>
</div>
<div class="grid minmax-percent-intrinsic min-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="0" data-expected-width="0"></div>
</div>
<div class="grid minmax-percent-intrinsic min-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="0" data-expected-width="0">XXXX</div>
</div>
<div class="grid minmax-percent-intrinsic max-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="0" data-expected-width="0"></div>
</div>
<div class="grid minmax-percent-intrinsic max-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="0" data-expected-width="0">XXXX</div>
</div>
<div class="grid minmax-percent-intrinsic fixed" data-expected-height="100" data-expected-width="100">
<div data-expected-height="50" data-expected-width="200"></div>
</div>
<div class="grid minmax-percent-intrinsic fixed" data-expected-height="100" data-expected-width="100">
<div data-expected-height="75" data-expected-width="200">XXXX</div>
</div>
<div class="grid fit-content min-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="0" data-expected-width="0"></div>
</div>
<div class="grid fit-content min-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="75" data-expected-width="300">XXXX</div>
</div>
<div class="grid fit-content max-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="0" data-expected-width="0"></div>
</div>
<div class="grid fit-content max-content" data-expected-height="0" data-expected-width="0">
<div data-expected-height="75" data-expected-width="300">XXXX</div>
</div>
<div class="grid fit-content fixed" data-expected-height="100" data-expected-width="100">
<div data-expected-height="0" data-expected-width="0"></div>
</div>
<div class="grid fit-content fixed" data-expected-height="100" data-expected-width="100">
<div data-expected-height="75" data-expected-width="300">XXXX</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