182 lines
8.8 KiB
HTML
182 lines
8.8 KiB
HTML
<!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>
|