<!DOCTYPE html>
<link href="resources/grid.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>

<!-- 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>
