64 lines
1.8 KiB
HTML
64 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
|
|
<link href="resources/grid.css" rel="stylesheet">
|
|
<style>
|
|
.frGrid {
|
|
grid: 1fr / 1fr;
|
|
font: 50px/1 Ahem;
|
|
border: 50px solid magenta;
|
|
width: 300px;
|
|
}
|
|
|
|
.item {
|
|
border: 50px solid rgba(0, 255, 250, 0.5);
|
|
}
|
|
|
|
.borderMargin {
|
|
border: 20px solid blue;
|
|
margin: 30px;
|
|
}
|
|
|
|
.frRowsGrid {
|
|
grid-auto-columns: 100px;
|
|
grid-auto-rows: minmax(0, 1fr);
|
|
}
|
|
|
|
.frColsGrid {
|
|
grid-auto-columns: minmax(0, 1fr);
|
|
grid-auto-rows: 100px;
|
|
}
|
|
|
|
span {
|
|
background: yellow;
|
|
border: 10px solid;
|
|
}
|
|
|
|
.child {
|
|
height:40px;
|
|
width:40px;
|
|
}
|
|
|
|
</style>
|
|
<script src="../../resources/check-layout.js"></script>
|
|
|
|
<body onload="checkLayout('.grid')">
|
|
|
|
<div class="grid frGrid" data-expected-width="400" data-expected-height="250" data-expected-client-width="300" data-expected-client-height="150">
|
|
<div class="item" data-expected-width="300" data-expected-height="150" data-expected-client-width="200" data-expected-client-height="50">X</div>
|
|
</div>
|
|
|
|
<div class="grid borderMargin fit-content frRowsGrid" data-expected-width="140" data-expected-height="100" data-expected-client-width="100" data-expected-client-height="60">
|
|
<span data-expected-width="100" data-expected-height="60" data-expected-client-width="80" data-expected-client-height="40">
|
|
<div class="child"></div>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="grid borderMargin fit-content frColsGrid" data-expected-width="100" data-expected-height="140" data-expected-client-width="60" data-expected-client-height="100">
|
|
<span data-expected-width="60" data-expected-height="100" data-expected-client-width="40" data-expected-client-height="80">
|
|
<div class="child"></div>
|
|
</span>
|
|
</div>
|
|
|
|
</body>
|