<!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>
