| <!DOCTYPE html> |
| <head> |
| <link href="resources/grid.css" rel="stylesheet"/> |
| <style> |
| .grid { |
| font: 10px/1 Ahem; |
| } |
| |
| .gridContentSizedColumn { |
| grid-template-columns: minmax(min-content, 20px); |
| grid-template-rows: 10px; |
| } |
| |
| .gridContentSizedColumnFreeSpace { |
| grid-template-columns: minmax(min-content, 100px); |
| grid-template-rows: 10px; |
| } |
| |
| .gridContentSizedRow { |
| grid-template-columns: 40px; |
| grid-template-rows: minmax(max-content, 10px); |
| } |
| |
| .gridContentSizedRowFreeSpace { |
| grid-template-columns: 40px; |
| grid-template-rows: minmax(max-content, 100px); |
| } |
| |
| .definiteWidth { width: 80px; } |
| .definiteHeight { height: 80px; } |
| |
| .indefiniteWidth { float: left; } |
| .indefiniteHeight { height: auto; } |
| |
| </style> |
| <script src="resources/grid-definitions-parsing-utils.js"></script> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <!-- Grids with base-size > growth-limit --> |
| <div class="grid gridContentSizedColumn indefiniteWidth" id="gridContentSizedColumn"> |
| <div class="firstRowFirstColumn">XXXXX</div> |
| </div> |
| |
| <div class="grid gridContentSizedRow indefiniteHeight" id="gridContentSizedRow"> |
| <div class="firstRowFirstColumn">XXXX XXXX</div> |
| </div> |
| |
| <!-- Grids with base-size < growth-limit and some size constraints. --> |
| <div class="grid gridContentSizedColumnFreeSpace definiteWidth" id="gridContentSizedColumnFreeSpace"> |
| <div class="firstRowFirstColumn">XX XX</div> |
| </div> |
| |
| <div class="grid gridContentSizedRowFreeSpace definiteHeight" id="gridContentSizedRowFreeSpace"> |
| <div class="firstRowFirstColumn">XXXX XXXX</div> |
| </div> |
| |
| <div class="definiteWidth"> |
| <div class="grid gridContentSizedColumnFreeSpace" id="gridContentSizedColumnFreeSpaceParentDefinite"> |
| <div class="firstRowFirstColumn">XX XX</div> |
| </div> |
| </div> |
| |
| <div class="definiteHeight"> |
| <div class="grid gridContentSizedRowFreeSpace indefiniteHeight" id="gridContentSizedRowFreeSpaceParentDefinite"> |
| <div class="firstRowFirstColumn">XXXX XXXX</div> |
| </div> |
| </div> |
| |
| |
| <script> |
| debug("Check that tracks are not shrinked if the available space is indefinite."); |
| testGridTemplatesValues(document.getElementById("gridContentSizedColumn"), "50px", "10px"); |
| testGridTemplatesValues(document.getElementById("gridContentSizedRow"), "40px", "20px"); |
| |
| debug(""); |
| debug("Check that tracks use the available free space if available."); |
| testGridTemplatesValues(document.getElementById("gridContentSizedColumnFreeSpace"), "80px", "10px"); |
| testGridTemplatesValues(document.getElementById("gridContentSizedRowFreeSpace"), "40px", "80px"); |
| testGridTemplatesValues(document.getElementById("gridContentSizedColumnFreeSpaceParentDefinite"), "80px", "10px"); |
| testGridTemplatesValues(document.getElementById("gridContentSizedRowFreeSpaceParentDefinite"), "40px", "100px"); |
| |
| </script> |
| </body> |
