297 lines
9.9 KiB
HTML
297 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
|
|
<link href="resources/grid.css" rel="stylesheet">
|
|
<style>
|
|
.wrapper {
|
|
position: relative;
|
|
clear: both;
|
|
}
|
|
|
|
.grid {
|
|
font: 10px/1 Ahem;
|
|
width: fit-content;
|
|
}
|
|
|
|
.abspos {
|
|
position: absolute;
|
|
}
|
|
|
|
.fixedSize {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
.oneRow100 {
|
|
grid-template-rows: 100%;
|
|
}
|
|
|
|
.oneRow50 {
|
|
grid-template-rows: 50%;
|
|
}
|
|
|
|
.twoRows {
|
|
grid-template-rows: 100px 50%;
|
|
}
|
|
</style>
|
|
<script src="../../resources/testharness.js"></script>
|
|
<script src="../../resources/testharnessreport.js"></script>
|
|
<script src="../../resources/check-layout-th.js"></script>
|
|
<body onload="checkLayout('.grid')">
|
|
<div id="log"></div>
|
|
|
|
<p>This test checks that percentage rows behave as "auto" if the height of the grid container is indefinite.</p>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid oneRow100" data-expected-width="40" data-expected-height="10">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
|
|
XX X
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid fixedSize oneRow100" data-expected-width="200" data-expected-height="200">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="200">
|
|
XX X
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid abspos oneRow100" data-expected-width="40" data-expected-height="10">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
|
|
XX X
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid max-content oneRow100" data-expected-width="40" data-expected-height="10">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
|
|
XX X
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid fit-content oneRow100" data-expected-width="40" data-expected-height="10">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
|
|
XX X
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid min-content oneRow100" data-expected-width="40" data-expected-height="10">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
|
|
XX X
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid oneRow50" data-expected-width="40" data-expected-height="10">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
|
|
XX X
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid fixedSize oneRow50" data-expected-width="200" data-expected-height="200">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
|
|
XX X
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid abspos oneRow50" data-expected-width="40" data-expected-height="10">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
|
|
XX X
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid max-content oneRow50" data-expected-width="40" data-expected-height="10">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
|
|
XX X
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid fit-content oneRow50" data-expected-width="40" data-expected-height="10">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
|
|
XX X
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid min-content oneRow50" data-expected-width="40" data-expected-height="10">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
|
|
XX X
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid twoRows" data-expected-width="40" data-expected-height="110">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
|
|
</div>
|
|
<div class="secondRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
|
|
XX X
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid fixedSize twoRows" data-expected-width="200" data-expected-height="200">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
|
|
</div>
|
|
<div class="secondRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100">
|
|
XX X
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid abspos twoRows" data-expected-width="40" data-expected-height="110">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
|
|
</div>
|
|
<div class="secondRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
|
|
XX X
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid max-content twoRows" data-expected-width="40" data-expected-height="110">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
|
|
</div>
|
|
<div class="secondRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
|
|
XX X
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid fit-content twoRows" data-expected-width="40" data-expected-height="110">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
|
|
</div>
|
|
<div class="secondRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
|
|
XX X
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid min-content twoRows" data-expected-width="40" data-expected-height="110">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
|
|
</div>
|
|
<div class="secondRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
|
|
XX X
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid twoRows" data-expected-width="40" data-expected-height="100">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
|
|
XX X
|
|
</div>
|
|
<div class="secondRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid fixedSize twoRows" data-expected-width="200" data-expected-height="200">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
|
|
XX X
|
|
</div>
|
|
<div class="secondRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid abspos twoRows" data-expected-width="40" data-expected-height="100">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
|
|
XX X
|
|
</div>
|
|
<div class="secondRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid max-content twoRows" data-expected-width="40" data-expected-height="100">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
|
|
XX X
|
|
</div>
|
|
<div class="secondRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid fit-content twoRows" data-expected-width="40" data-expected-height="100">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
|
|
XX X
|
|
</div>
|
|
<div class="secondRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid min-content twoRows" data-expected-width="40" data-expected-height="100">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
|
|
XX X
|
|
</div>
|
|
<div class="secondRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|