38 lines
1.4 KiB
HTML
38 lines
1.4 KiB
HTML
<!DOCTYPE HTML>
|
|
<link href="resources/grid.css" rel="stylesheet">
|
|
<style>
|
|
.grid {
|
|
grid: minmax(5px, 1fr) minmax(5px, 2fr) / 50px;
|
|
}
|
|
|
|
#fromIndefinite { height: auto; }
|
|
#toIndefinite { height: 90px; }
|
|
</style>
|
|
<script src="../../resources/check-layout.js"></script>
|
|
<p>Tests how a change in grid's height requires evaluating again whether the grid has indefinite or definite height.</p>
|
|
|
|
<p>The grid bellow had initially 'height: auto' (indefinite) and has been changed to '90px' (definite).</p>
|
|
<div class="constrainedContainer">
|
|
<div id="fromIndefinite" class="grid">
|
|
<div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
|
|
<div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="60"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr style="margin-top: 150px;">
|
|
|
|
<p>The grid bellow had initially 'height: 90px' (definite) and has been changed to 'auto' (indefinite).</p>
|
|
<div class="constrainedContainer">
|
|
<div id="toIndefinite" class="grid">
|
|
<div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="5"></div>
|
|
<div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.body.offsetLeft;
|
|
document.getElementById("toIndefinite").style.height = "auto";
|
|
document.getElementById("fromIndefinite").style.height = "90px";
|
|
checkLayout(".grid");
|
|
</script>
|