Skip to content

GitLab

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

[css-grid] Clear size override in MinLogicalSizeForChild if needed 

Grid items can get an override for their containing block size, which
for example can affect percentage resolution.
However, sometimes we need to clear such overrides, which can be checked
using ShouldClearOverrideContainingBlockContentSizeForChild.
That's already done in LogicalHeightForChild, used by MinContentForChild
and MaxContentForChild.

But when the min track sizing function is 'auto', the code may use
MinLogicalSizeForChild instead of LogicalHeightForChild. And
MinLogicalSizeForChild didn't check if the override had to be cleared.

This patch makes it perform the check.

Bug: 1103592
Change-Id: Ie6012b5099c4988217228352dc552f7437f738d2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2299354Reviewed-by: default avatarJavier Fernandez <jfernandez@igalia.com>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/master@{#789122}
parent 3dc23a35
Hide whitespace changes
Inline Side-by-side
Showing with 141 additions and 0 deletions
third_party/blink/renderer/core/layout/grid_track_sizing_algorithm.cc
View file @ ad608868
......@@ -573,6 +573,15 @@ LayoutUnit GridTrackSizingAlgorithmStrategy::MinLogicalSizeForChild(
bool override_size_has_changed =
UpdateOverrideContainingBlockContentSizeForChild(
child, child_inline_direction, available_size);
GridTrackSizingDirection child_block_direction =
GridLayoutUtils::FlowAwareDirectionForChild(*GetLayoutGrid(), child,
kForRows);
if (ShouldClearOverrideContainingBlockContentSizeForChild(
*GetLayoutGrid(), child, child_block_direction)) {
SetOverrideContainingBlockContentSizeForChild(child, child_block_direction,
LayoutUnit(-1));
override_size_has_changed = true;
}
LayoutGridItemForMinSizeComputation(child, override_size_has_changed);
return child.ComputeLogicalHeightUsing(kMinSize, child_min_size,
......
third_party/blink/web_tests/external/wpt/css/css-grid/grid-items/grid-item-flex-container-001.html 0 → 100644
View file @ ad608868
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid item which is also a flex container</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1">
<meta name="assert" content="Checks that the grid is updated when the contents of the grid item flex container change their size dynamically.">
<style>
.grid {
display: grid;
width: 100px;
background: cyan;
}
.flex {
display: flex;
min-height: 0;
height: 100%;
}
.height200 {
height: 200px;
}
.height100 {
height: 100px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<div id="log"></div>
<pre>grid-template-rows: minmax(auto, auto);</pre>
<div class="grid" style="grid-template-rows: minmax(auto, auto);" data-expected-height="100" >
<div class="flex">
<div>
<div class="height200"></div>
</div>
</div>
</div>
<pre>grid-template-rows: minmax(min-content, auto);</pre>
<div class="grid" style="grid-template-rows: minmax(min-content, auto);" data-expected-height="100">
<div class="flex">
<div>
<div class="height200"></div>
</div>
</div>
</div>
<pre>grid-template-rows: minmax(max-content, auto);</pre>
<div class="grid" style="grid-template-rows: minmax(max-content, auto);" data-expected-height="100">
<div class="flex">
<div>
<div class="height200"></div>
</div>
</div>
</div>
<pre>grid-template-rows: minmax(auto, min-content);</pre>
<div class="grid" style="grid-template-rows: minmax(auto, min-content);" data-expected-height="100">
<div class="flex">
<div>
<div class="height200"></div>
</div>
</div>
</div>
<pre>grid-template-rows: minmax(min-content, min-content);</pre>
<div class="grid" style="grid-template-rows: minmax(min-content, min-content);" data-expected-height="100">
<div class="flex">
<div>
<div class="height200"></div>
</div>
</div>
</div>
<pre>grid-template-rows: minmax(max-content, min-content);</pre>
<div class="grid" style="grid-template-rows: minmax(max-content, min-content);" data-expected-height="100">
<div class="flex">
<div>
<div class="height200"></div>
</div>
</div>
</div>
<pre>grid-template-rows: minmax(auto, max-content);</pre>
<div class="grid" style="grid-template-rows: minmax(auto, max-content);" data-expected-height="100">
<div class="flex">
<div>
<div class="height200"></div>
</div>
</div>
</div>
<pre>grid-template-rows: minmax(min-content, max-content);</pre>
<div class="grid" style="grid-template-rows: minmax(min-content, max-content);" data-expected-height="100">
<div class="flex">
<div>
<div class="height200"></div>
</div>
</div>
</div>
<pre>grid-template-rows: minmax(max-content, max-content);</pre>
<div class="grid" style="grid-template-rows: minmax(max-content, max-content);" data-expected-height="100">
<div class="flex">
<div>
<div class="height200"></div>
</div>
</div>
</div>
<script>
// Force layout
document.body.offsetLeft;
// Change content sizes
for (let el of document.querySelectorAll(".height200")) {
el.className = "height100";
}
// Check final layout
checkLayout('.grid');
</script>
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