<!DOCTYPE html>
<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
<link href="resources/grid.css" rel="stylesheet">
<style>
.columnsSmallerThanContentBox { grid-template-columns: 80px; }
.columnsSameAsContentBox { grid-template-columns: 100px; }
.columnsBiggerThanContentBox { grid-template-columns: 120px; }
.columnsSameAsMarginBox { grid-template-columns: 140px; }
.columnsBiggerThanMarginBox { grid-template-columns: 150px; }

.rowsSmallerThanContentBox { grid-template-rows: 20px; }
.rowsEqualAsContentBox { grid-template-rows: 25px; }
.rowsBiggerThanContentBox { grid-template-rows: 50px; }
.rowsSameAsMarginBox { grid-template-rows: 65px; }
.rowsBiggerThanMarginBox { grid-template-rows: 100px; }

.container {
    position: relative;
    width: 200px;
    height: 100px;
    border: 1px solid black;
}

.item {
    font: 25px/1 Ahem;
    margin: 20px;
    background-color: blue;
}

.fitContentOnlyHeight { width: auto; align-items: start; }
.fitContentOnlyWidth { height: auto; justify-items: start; }
</style>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.grid')">

<p>This test checks min-width|height auto does not interfere in margins computation, properly placing items inside their grid area.</p>

<!-- Checking min-width: auto logic -->
<p>Stretching allowed in both axis | column smaller than content-box, row bigger than margin-box</p>
<div class="container">
    <div class="grid columnsSmallerThanContentBox rowsBiggerThanMarginBox">
        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="40" data-expected-height="60">XXXX</div>
    </div>
</div>

<p>Stretching allowed in both axis | column of same size than content-box, row bigger than margin-box</p>
<div class="container">
    <div class="grid columnsSameAsContentBox rowsBiggerThanMarginBox">
        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="60" data-expected-height="60">XXXX</div>
    </div>
</div>

<p>Stretching allowed in both axis | column bigger than content-box, row bigger than margin-box</p>
<div class="container">
    <div class="grid columnsBiggerThanContentBox rowsBiggerThanMarginBox">
        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="80" data-expected-height="60">XXXX</div>
    </div>
</div>

<p>Stretching allowed in both axis | column of same size as margin-box, row bigger than margin-box</p>
<div class="container">
    <div class="grid columnsSameAsMarginBox rowsBiggerThanMarginBox">
        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
    </div>
</div>

<p>Stretching allowed in both axis | column bigger than content-box, row bigger than margin-box</p>
<div class="container">
    <div class="grid columnsBiggerThanMarginBox rowsBiggerThanMarginBox">
        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="60">XXXX</div>
    </div>
</div>

<!-- Checking shrink-to-fit in row-axis -->
<p>Stretching allowed in column axis, fitContent in row-axis | column smaller than content-box, row bigger than margin-box</p>
<div class="container">
    <div class="grid fit-content fitContentOnlyWidth columnsSmallerThanContentBox rowsBiggerThanMarginBox">
        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
    </div>
</div>

<p>Stretching allowed in column axis, fitContent in row-axis | column of same size than content-box, row bigger than margin-box</p>
<div class="container">
    <div class="grid fit-content fitContentOnlyWidth columnsSameAsContentBox rowsBiggerThanMarginBox">
        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
    </div>
</div>

<p>Stretching allowed in column axis, fitContent in row-axis | column bigger than content-box, row bigger than margin-box</p>
<div class="container">
    <div class="grid fit-content fitContentOnlyWidth columnsBiggerThanContentBox rowsBiggerThanMarginBox">
        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
    </div>
</div>

<p>Stretching allowed in column axis, fitContent in row-axis | column of same size as margin-box, row bigger than margin-box</p>
<div class="container">
    <div class="grid fit-content fitContentOnlyWidth columnsSameAsMarginBox rowsBiggerThanMarginBox">
        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
    </div>
</div>

<p>Stretching allowed in column axis, fitContent in row-axis | column bigger than content-box, row bigger than margin-box</p>
<div class="container">
    <div class="grid fit-content fitContentOnlyWidth columnsBiggerThanMarginBox rowsBiggerThanMarginBox">
        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
    </div>
</div>

<!-- Checking stretch in column-axis -->
<p>Stretching allowed in both axis | row smaller than content-box, column bigger than margin-box</p>
<div class="container">
    <div class="grid rowsSmallerThanContentBox columnsBiggerThanMarginBox">
        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="0">XXXX</div>
    </div>
</div>

<p>Stretching allowed in both axis | row of same size than content-box, column bigger than margin-box</p>
<div class="container">
    <div class="grid rowsSameAsContentBox columnsBiggerThanMarginBox">
        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
    </div>
</div>

<p>Stretching allowed in both axis | row bigger than content-box, column bigger column margin-box</p>
<div class="container">
    <div class="grid rowsBiggerThanContentBox columnsBiggerThanMarginBox">
        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="10">XXXX</div>
    </div>
</div>

<p>Stretching allowed in both axis | row of same size as margin-box, column bigger than margin-box</p>
<div class="container">
    <div class="grid rowsSameAsMarginBox columnsBiggerThanMarginBox">
        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
    </div>
</div>

<p>Stretching allowed in both axis | row bigger than margin-box, column bigger column margin-box</p>
<div class="container">
    <div class="grid rowsBiggerThanMarginBox columnsBiggerThanMarginBox">
        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="60">XXXX</div>
    </div>
</div>

<!-- Checking min-height: auto logic -->
<p>Stretching allowed in row axis, fitContent in column-axis | row smaller than content-box, column bigger than margin-box</p>
<div class="container">
    <div class="grid fit-content fitContentOnlyHeight rowsSmallerThanContentBox columnsBiggerThanMarginBox">
        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
    </div>
</div>

<p>Stretching allowed in row axis, fitContent in column-axis | row of same size than content-box, column bigger than margin-box</p>
<div class="container">
    <div class="grid fit-content fitContentOnlyHeight rowsSameAsContentBox columnsBiggerThanMarginBox">
        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
    </div>
</div>

<p>Stretching allowed in column axis, fitContent in row-axis | row bigger than content-box, column bigger than margin-box</p>
<div class="container">
    <div class="grid fit-content fitContentOnlyHeight rowsBiggerThanContentBox columnsBiggerThanMarginBox">
        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
    </div>
</div>

<p>Stretching allowed in row axis, fitContent in column-axis | row of same size as margin-box, column bigger than margin-box</p>
<div class="container">
    <div class="grid fit-content fitContentOnlyHeight rowsSameAsMarginBox columnsBiggerThanMarginBox">
        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
    </div>
</div>

<p>Stretching allowed in column axis, fitContent in row-axis | row bigger than margin-box, column bigger than margin-box</p>
<div class="container">
    <div class="grid fit-content fitContentOnlyHeight rowsBiggerThanMarginBox columnsBiggerThanMarginBox">
        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
    </div>
</div>
