blob: 1319372934e7d6c01b053851bd7382a9b7bbe887 [file] [log] [blame]
<!DOCTYPE html>
<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">
<link href="resources/grid-alignment.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;
}
.autoWidth { width: auto; }
.autoHeight { height: auto; }
</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 autoHeight justifyItemsStart 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 autoHeight justifyItemsStart 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 autoHeight justifyItemsStart 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 autoHeight justifyItemsStart 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 autoHeight justifyItemsStart 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 autoWidth alignItemsStart 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 autoWidth alignItemsStart 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 autoWidth alignItemsStart 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 autoWidth alignItemsStart 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 autoWidth alignItemsStart 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>