mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-12 14:20:14 +02:00
5074aeda0a
Automatic update from web-platform-tests[css-grid] Fix grid container sizing under min-content height The spec is quite clear (https://drafts.csswg.org/css-sizing/#valdef-width-min-content): "min-content If specified for the inline axis, use the min-content inline size; otherwise behaves as the property’s initial value." So if a grid container has "height: min-content" it should behave the same than with "height: auto". The patch removes ComputeIntrinsicLogicalContentHeightUsing() in LayoutGrid as we don't need a custom one anymore. We can also get rid of min_content_height_ and max_content_height_ attributes that were only used for this logic. BUG=906039 TEST=fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html TEST=fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html Change-Id: Ia67d1dac16fbb04e3225115c3f34c67975dc6f94 Reviewed-on: https://chromium-review.googlesource.com/c/1340311 Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Commit-Queue: Manuel Rego <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#610059} -- wpt-commits: dff98e8b5907a5355d9832901e78e4250011360c wpt-pr: 14100
110 lines
3.7 KiB
HTML
110 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Grid Layout Test: min|max-content sizing constraints on grid containers</title>
|
|
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
|
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#intrinsic-sizes">
|
|
<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#sizing-values">
|
|
<meta name="assert" content="The test checks the intrinsic size of a grid container when sized under different constraints. In inline axis min|max-content have some effect, however in block axis they behave as auto.">
|
|
<style>
|
|
.grid {
|
|
display: grid;
|
|
float: left;
|
|
background: lime;
|
|
}
|
|
|
|
.grid-columns-minmax-50-100 {
|
|
grid-template-columns: minmax(50px, 100px);
|
|
}
|
|
|
|
.grid-columns-minmax-100-200 {
|
|
grid-template-columns: minmax(100px, 200px);
|
|
}
|
|
|
|
.grid-rows-minmax-50-100 {
|
|
grid-template-rows: minmax(50px, 100px);
|
|
}
|
|
|
|
.min-content {
|
|
width: min-content;
|
|
height: min-content;
|
|
}
|
|
|
|
.max-content {
|
|
width: max-content;
|
|
height: max-content;
|
|
}
|
|
</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 grid-columns-minmax-50-100 grid-rows-minmax-50-100"
|
|
data-expected-width="100" data-expected-height="100"></div>
|
|
|
|
<div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100"
|
|
data-expected-width="100" data-expected-height="100"></div>
|
|
|
|
<div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100"
|
|
data-expected-width="100" data-expected-height="100"></div>
|
|
|
|
<div class="min-content">
|
|
<div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100"
|
|
data-expected-width="100" data-expected-height="100"></div>
|
|
</div>
|
|
|
|
<div class="max-content">
|
|
<div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
|
|
data-expected-width="100" data-expected-height="100"></div>
|
|
</div>
|
|
|
|
<div style="writing-mode: vertical-lr;">
|
|
|
|
<div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
|
|
data-expected-width="100" data-expected-height="100"></div>
|
|
|
|
<div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100"
|
|
data-expected-width="100" data-expected-height="100"></div>
|
|
|
|
<div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100"
|
|
data-expected-width="100" data-expected-height="100"></div>
|
|
|
|
<div class="min-content">
|
|
<div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100"
|
|
data-expected-width="100" data-expected-height="100"></div>
|
|
</div>
|
|
|
|
<div class="max-content">
|
|
<div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
|
|
data-expected-width="100" data-expected-height="100"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div style="writing-mode: vertical-rl;">
|
|
|
|
<div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
|
|
data-expected-width="100" data-expected-height="100"></div>
|
|
|
|
<div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100"
|
|
data-expected-width="100" data-expected-height="100"></div>
|
|
|
|
<div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100"
|
|
data-expected-width="100" data-expected-height="100"></div>
|
|
|
|
<div class="min-content">
|
|
<div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100"
|
|
data-expected-width="100" data-expected-height="100"></div>
|
|
</div>
|
|
|
|
<div class="max-content">
|
|
<div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
|
|
data-expected-width="100" data-expected-height="100"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|