Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-grid/grid-model/grid-container-sizing-constraints-001.html - WPT Dashboard Interop Dashboard
<!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">
<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>