97 lines
2.1 KiB
HTML
97 lines
2.1 KiB
HTML
<!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>
|