Commit 1d01cbaf authored by Oriol Brufau's avatar Oriol Brufau Committed by Commit Bot

[css-grid] Use min-content size for intrinsic maximums resolution

By mistake the specification used to say that, for items spanning
multiple tracks, the growth limits of the tracks with an intrinsic max
track sizing function should grow to accommodate the minimum
contribution of the item.

But this was a mistake, because an intrinsic max track sizing function
can only be min-content or max-content. So instead of distributing the
minimum contribution, it should be the min-content contribution.

The spec has been fixed and there is a CSSWG resolution in
https://github.com/w3c/csswg-drafts/issues/4790

This patch fixes the problem by reverting r424527. The change is likely
web compatible, since it only affects a rare edge case with 'minmax()'
where the min sizing function is 'auto' or a fixed value smaller than
the min-content contribution, the max sizing function is 'min-content',
and an item whose minimum contribution is forced to be different than
the min-content contribution, and spans multiple tracks.

Bug: 1122084

TEST=external/wpt/css/css-grid/layout-algorithm/grid-intrinsic-track-sizes-001.html
TEST=fast/css-grid-layout/grid-intrinsic-maximums.html

Change-Id: I1efd6e48b55fc71f37f8303c731bfbf601ca4c70
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2377499Reviewed-by: default avatarManuel Rego <rego@igalia.com>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/master@{#803871}
parent 245ef327
......@@ -1268,9 +1268,9 @@ LayoutUnit GridTrackSizingAlgorithm::ItemSizeForTrackSizeComputationPhase(
LayoutBox& grid_item) const {
switch (phase) {
case kResolveIntrinsicMinimums:
case kResolveIntrinsicMaximums:
return strategy_->MinSizeForChild(grid_item);
case kResolveContentBasedMinimums:
case kResolveIntrinsicMaximums:
return strategy_->MinContentForChild(grid_item);
case kResolveMaxContentMinimums:
case kResolveMaxContentMaximums:
......
This is a testharness.js-based test.
PASS 'grid' with: grid-template-columns: auto; and grid-template-rows: auto;
PASS 'grid' with: grid-template-columns: min-content; and grid-template-rows: min-content;
PASS 'grid' with: grid-template-columns: max-content; and grid-template-rows: max-content;
PASS 'grid' with: grid-template-columns: minmax(0, auto); and grid-template-rows: minmax(0, auto);
PASS 'grid' with: grid-template-columns: minmax(0, min-content); and grid-template-rows: minmax(0, min-content);
PASS 'grid' with: grid-template-columns: minmax(0, max-content); and grid-template-rows: minmax(0, max-content);
PASS 'grid' with: grid-template-columns: minmax(auto, 10px); and grid-template-rows: minmax(auto, 10px);
PASS 'grid' with: grid-template-columns: minmax(min-content, 10px); and grid-template-rows: minmax(min-content, 10px);
PASS 'grid' with: grid-template-columns: minmax(max-content, 10px); and grid-template-rows: minmax(max-content, 10px);
PASS 'grid' with: grid-template-columns: auto auto; and grid-template-rows: auto auto;
PASS 'grid' with: grid-template-columns: min-content min-content; and grid-template-rows: min-content min-content;
PASS 'grid' with: grid-template-columns: max-content max-content; and grid-template-rows: max-content max-content;
PASS 'grid' with: grid-template-columns: minmax(0, auto) minmax(0, auto); and grid-template-rows: minmax(0, auto) minmax(0, auto);
FAIL 'grid' with: grid-template-columns: minmax(0, min-content) minmax(0, min-content); and grid-template-rows: minmax(0, min-content) minmax(0, min-content); assert_in_array: gridTemplateColumns value "6px 6px" not in array ["15px 15px"]
PASS 'grid' with: grid-template-columns: minmax(0, max-content) minmax(0, max-content); and grid-template-rows: minmax(0, max-content) minmax(0, max-content);
PASS 'grid' with: grid-template-columns: minmax(auto, 4px) minmax(auto, 4px); and grid-template-rows: minmax(auto, 4px) minmax(auto, 4px);
PASS 'grid' with: grid-template-columns: minmax(auto, 10px) minmax(auto, 10px); and grid-template-rows: minmax(auto, 10px) minmax(auto, 10px);
PASS 'grid' with: grid-template-columns: minmax(min-content, 10px) minmax(min-content, 10px); and grid-template-rows: minmax(min-content, 10px) minmax(min-content, 10px);
PASS 'grid' with: grid-template-columns: minmax(max-content, 10px) minmax(max-content, 10px); and grid-template-rows: minmax(max-content, 10px) minmax(max-content, 10px);
PASS 'grid' with: grid-template-columns: 20px auto; and grid-template-rows: 20px auto;
PASS 'grid' with: grid-template-columns: 20px min-content; and grid-template-rows: 20px min-content;
PASS 'grid' with: grid-template-columns: 20px max-content; and grid-template-rows: 20px max-content;
PASS 'grid' with: grid-template-columns: 20px minmax(0, auto); and grid-template-rows: 20px minmax(0, auto);
FAIL 'grid' with: grid-template-columns: 20px minmax(0, min-content); and grid-template-rows: 20px minmax(0, min-content); assert_in_array: gridTemplateColumns value "20px 0px" not in array ["20px 10px"]
PASS 'grid' with: grid-template-columns: 20px minmax(0, max-content); and grid-template-rows: 20px minmax(0, max-content);
PASS 'grid' with: grid-template-columns: 20px minmax(auto, 30px); and grid-template-rows: 20px minmax(auto, 30px);
PASS 'grid' with: grid-template-columns: 20px minmax(min-content, 6px); and grid-template-rows: 20px minmax(min-content, 6px);
PASS 'grid' with: grid-template-columns: 20px minmax(min-content, 40px); and grid-template-rows: 20px minmax(min-content, 40px);
PASS 'grid' with: grid-template-columns: 20px minmax(max-content, 6px); and grid-template-rows: 20px minmax(max-content, 6px);
PASS 'grid' with: grid-template-columns: 20px minmax(max-content, 30px); and grid-template-rows: 20px minmax(max-content, 30px);
PASS 'grid' with: grid-template-columns: max-content min-content; and grid-template-rows: max-content min-content;
Harness: the test ran to completion.
......@@ -40,7 +40,7 @@
<div class="float">
<div class="grid" style="grid-template: 20px / 10px 5px;">
<div class="grid" style="grid-template: 20px / 35px 5px;">
<div class="item" style="min-width: 15px;">XXXX XXXX</div>
<div class="abs col1"></div>
<div class="abs col2"></div>
......@@ -52,11 +52,14 @@
<div class="abs col2"></div>
</div>
<!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=818401 -->
<!--
<div class="grid" style="grid-template: 20px / 85px 5px;">
<div class="item min-width-max-content">XXXX XXXX</div>
<div class="abs col1"></div>
<div class="abs col2"></div>
</div>
-->
<div class="grid" style="grid-template: 20px / 5px 85px;">
<div class="item" style="min-width: 15px;">XXXX XXXX</div>
......@@ -80,7 +83,7 @@
<div class="float">
<div class="grid" style="grid-template: 20px / repeat(2, 5px) 80px;">
<div class="grid" style="grid-template: 20px / 17.5px 5px 67.5px;">
<div class="item" style="min-width: 15px;">XXXX XXXX</div>
<div class="abs col1"></div>
<div class="abs col2"></div>
......@@ -94,14 +97,17 @@
<div class="abs col3"></div>
</div>
<!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=818401 -->
<!--
<div class="grid" style="grid-template: 20px / calc(85px / 2) 5px calc(85px / 2);">
<div class="item min-width-max-content">XXXX XXXX</div>
<div class="abs col1"></div>
<div class="abs col2"></div>
<div class="abs col3"></div>
</div>
-->
<div class="grid" style="grid-template: 20px / 90px repeat(2, 5px);">
<div class="grid" style="grid-template: 20px / 77.5px 5px 17.5px;">
<div class="item" style="min-width: 15px;">XXXX XXXX</div>
<div class="abs col1"></div>
<div class="abs col2"></div>
......@@ -115,12 +121,15 @@
<div class="abs col3"></div>
</div>
<!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=818401 -->
<!--
<div class="grid" style="grid-template: 20px / calc(105px/2) 5px calc(85px/2);" style="justify-items: start">
<div class="item min-width-max-content">XXXX XXXX</div>
<div class="abs col1"></div>
<div class="abs col2"></div>
<div class="abs col3"></div>
</div>
-->
</div>
......
......@@ -58,11 +58,14 @@
<div class="abs col2"></div>
</div>
<!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=818401 -->
<!--
<div class="grid gridMinContent">
<div class="item min-width-max-content">XXXX XXXX</div>
<div class="abs col1"></div>
<div class="abs col2"></div>
</div>
-->
<div class="grid gridMaxContent">
<div class="item" style="min-width: 15px;">XXXX XXXX</div>
......@@ -100,12 +103,15 @@
<div class="abs col3"></div>
</div>
<!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=818401 -->
<!--
<div class="grid gridMinMaxContent">
<div class="item min-width-max-content">XXXX XXXX</div>
<div class="abs col1"></div>
<div class="abs col2"></div>
<div class="abs col3"></div>
</div>
-->
<div class="grid gridAutoMinContent">
<div class="item" style="min-width: 15px;">XXXX XXXX</div>
......@@ -121,12 +127,15 @@
<div class="abs col3"></div>
</div>
<!-- Fails due to https://bugs.chromium.org/p/chromium/issues/detail?id=818401 -->
<!--
<div class="grid gridAutoMinContent" style="justify-items: start">
<div class="item min-width-max-content">XXXX XXXX</div>
<div class="abs col1"></div>
<div class="abs col2"></div>
<div class="abs col3"></div>
</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