forked from mirrors/gecko-dev
1e9b8adc7d
Automatic update from web-platform-tests [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/+/2299354 Reviewed-by: Javier Fernandez <jfernandez@igalia.com> Commit-Queue: Oriol Brufau <obrufau@igalia.com> Cr-Commit-Position: refs/heads/master@{#789122} -- wpt-commits: a2cd0c973e85b634094d996d3e80ed2e53c8ea1d wpt-pr: 24626
132 lines
3.3 KiB
HTML
132 lines
3.3 KiB
HTML
<!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>
|