152 lines
6.7 KiB
HTML
152 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<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">
|
|
<link href="resources/grid-alignment.css" rel="stylesheet">
|
|
<style>
|
|
.grid {
|
|
grid-template-columns: 20% 50% 30%;
|
|
grid-template-rows: 40%;
|
|
}
|
|
|
|
.fixedSize {
|
|
width: 400px;
|
|
height: 400px;
|
|
}
|
|
|
|
.calculatedSize {
|
|
width: calc(200px + 20%);
|
|
height: calc(300px + 10%);
|
|
}
|
|
|
|
.percentageSize {
|
|
width: 50%;
|
|
height: 50%;
|
|
}
|
|
|
|
.indefiniteHeight {
|
|
height: auto;
|
|
}
|
|
|
|
.firstRowFirstColumn {
|
|
color: blue;
|
|
background-color: cyan;
|
|
}
|
|
|
|
.firstRowSecondColumn {
|
|
color: green;
|
|
background-color: lime;
|
|
}
|
|
|
|
.firstRowThirdColumn {
|
|
color: brown;
|
|
background-color: yellow;
|
|
grid-column: 3;
|
|
grid-row: 1;
|
|
}
|
|
</style>
|
|
<script src="../../resources/check-layout.js"></script>
|
|
</head>
|
|
<body onload="checkLayout('.grid');">
|
|
<p>This test checks percentage track breadths are resolved properly regarding the container size.</p>
|
|
<div class="unconstrainedContainer">
|
|
<div class="grid">
|
|
<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="200" data-expected-height="4">XX</div>
|
|
<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="500" data-expected-height="4">XXXXX</div>
|
|
<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="300" data-expected-height="4">XXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fit-content indefiniteHeight">
|
|
<div class="grid">
|
|
<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="4">XX</div>
|
|
<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="4">XXXXX</div>
|
|
<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="4">XXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="unconstrainedContainer">
|
|
<div class="grid fixedSize">
|
|
<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
|
|
<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
|
|
<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="indefiniteHeight">
|
|
<div class="grid fixedSize">
|
|
<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
|
|
<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
|
|
<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fit-content indefiniteHeight">
|
|
<div class="grid calculatedSize">
|
|
<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="44" data-expected-height="4">XX</div>
|
|
<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="110" data-expected-height="4">XXXXX</div>
|
|
<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="66" data-expected-height="4">XXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="unconstrainedContainer">
|
|
<div class="grid calculatedSize">
|
|
<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
|
|
<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
|
|
<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fit-content indefiniteHeight">
|
|
<div class="grid percentageSize">
|
|
<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="10" data-expected-height="4">XX</div>
|
|
<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="25" data-expected-height="4">XXXXX</div>
|
|
<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="15" data-expected-height="4">XXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="unconstrainedContainer">
|
|
<div class="grid percentageSize">
|
|
<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="100" data-expected-height="200">XX</div>
|
|
<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="250" data-expected-height="200">XXXXX</div>
|
|
<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="150" data-expected-height="200">XXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fit-content indefiniteHeight">
|
|
<div class="grid fit-content indefiniteHeight">
|
|
<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="4">XX</div>
|
|
<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="4">XXXXX</div>
|
|
<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="4">XXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="unconstrainedContainer">
|
|
<div class="grid fit-content indefiniteHeight">
|
|
<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="4">XX</div>
|
|
<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="4">XXXXX</div>
|
|
<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="4">XXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="indefiniteHeight fit-content">
|
|
<div class="grid fit-content">
|
|
<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="4">XX</div>
|
|
<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="4">XXXXX</div>
|
|
<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="4">XXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="unconstrainedContainer">
|
|
<div class="grid fit-content">
|
|
<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="4">XX</div>
|
|
<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="4">XXXXX</div>
|
|
<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="4">XXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|