blob: 503401300521c9fb72916245acc6bafdb46f216e [file] [log] [blame]
<!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>