min-width-height-auto.html | Explore in Territory

<!DOCTYPE html>
<html>
<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">
<style>
.grid {
    grid-template-columns: 5px;
    grid-template-rows: 5px;
}

.container {
    width: 200px;
    height: 100px;
}

.ahem {
    font: 25px/1 Ahem;
}

.minSmaller {
    min-width: 10px;
    min-height: 10px;
}

.minBigger {
    min-width: 150px;
    min-height: 75px;
}

.maxSmaller {
    max-width: 10px;
    max-height: 10px;
}

.maxBigger {
    max-width: 150px;
    max-height: 75px;
}

.minHeightSmaller { min-height: 12px; }
.minWidthSmaller { min-width: 12px; }
</style>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.grid')">

<p>This test checks min-width|height auto behavior for grids</p>

<div class="container">
    <div class="grid">
        <div class="ahem" data-expected-width="5" data-expected-height="5">XXXX</div>
    </div>
</div>

<div class="container">
    <div class="grid">
        <div class="ahem minSmaller" data-expected-width="10" data-expected-height="10">XXXX</div>
    </div>
</div>

<div class="container">
    <div class="grid">
        <div class="ahem minBigger" data-expected-width="150" data-expected-height="75">XXXX</div>
    </div>
</div>

<div class="container">
    <div class="grid">
        <div class="ahem maxSmaller" data-expected-width="5" data-expected-height="5">XXXX</div>
    </div>
</div>

<div class="container">
    <div class="grid">
        <div class="ahem maxBigger" data-expected-width="5" data-expected-height="5">XXXX</div>
    </div>
</div>

<!-- Verify that the same cases without 'stretch' work as expected as well. -->
<div class="container">
    <div class="grid itemsStart">
        <div class="ahem" data-expected-width="100" data-expected-height="25">XXXX</div>
    </div>
</div>

<div class="container">
    <div class="grid itemsStart">
        <div class="ahem minSmaller" data-expected-width="100" data-expected-height="25">XXXX</div>
    </div>
</div>

<div class="container">
    <div class="grid itemsStart">
        <div class="ahem minBigger" data-expected-width="150" data-expected-height="75">XXXX</div>
    </div>
</div>

<div class="container">
    <div class="grid itemsStart">
        <div class="ahem maxSmaller" data-expected-width="10" data-expected-height="10">XXXX</div>
    </div>
</div>

<div class="container">
    <div class="grid itemsStart">
        <div class="ahem maxBigger" data-expected-width="100" data-expected-height="25">XXXX</div>
    </div>
</div>

<!-- Verify we are applying correctly the min-content size. -->
<div class="container">
    <div class="grid">
        <div class="ahem" data-expected-width="5" data-expected-height="5">XXX X</div>
    </div>
</div>

<div class="container">
    <div class="grid itemsStart">
        <div class="ahem" data-expected-width="75" data-expected-height="50">XXX X</div>
    </div>
</div>

<!-- Check that min-width min-height behavior is preserved when using vertical writing modes -->
<div class="container">
    <div class="grid verticalLR">
        <div class="ahem" data-expected-width="5" data-expected-height="5">XXXX</div>
    </div>
</div>

<div class="container">
    <div class="grid verticalLR">
        <div class="ahem minHeightSmaller" data-expected-width="5" data-expected-height="12">XXXX</div>
    </div>
</div>

<div class="container">
    <div class="grid verticalLR">
        <div class="ahem minWidthSmaller" data-expected-width="12" data-expected-height="5">XXXX</div>
    </div>
</div>

</body>
</html>
chromium/third_party/blink/web_tests/fast/css-grid-layout/min-width-height-auto.html
