Google Git
Sign in
webkit / WebKit / 15e4da4b5ce83fcfe6de6863df44c60571019d5f / . / LayoutTests / fast / css-grid-layout / min-width-height-auto-and-margins.html
blob: 3316e3206856fc2e2d83bfe8c5c4b5e320d3d190 [file] [log] [blame]
<!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>