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