| <!DOCTYPE html> |
| <head> |
| <link href="resources/grid.css" rel="stylesheet"/> |
| <link href="resources/grid-alignment.css" rel="stylesheet"/> |
| <style> |
| .grid { |
| font: 10px/1 Ahem; |
| grid-template-rows: auto; |
| } |
| .gridAutoAndAuto { |
| grid-template-columns: auto auto; |
| } |
| |
| .gridFixedMaxContentAndFixedMaxContent { |
| grid-template-columns: minmax(20px, max-content) minmax(10px, max-content); |
| } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <script src="resources/grid-definitions-parsing-utils.js"></script> |
| |
| <div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAuto"> |
| <div class="firstRowFirstColumn">X X</div> |
| <div class="firstRowBothColumn">XXXXXX XXX</div> |
| </div> |
| |
| <div class="grid gridFixedMaxContentAndFixedMaxContent" id="gridFixedMaxContentAndFixedMaxContent"> |
| <div class="firstRowFirstColumn">XX</div> |
| <div class="firstRowBothColumn">XXXX X XXX</div> |
| </div> |
| |
| <script> |
| testGridTemplatesValues(gridAutoAndAuto, "30px 70px", "10px"); |
| testGridTemplatesValues(gridFixedMaxContentAndFixedMaxContent, "20px 80px", "10px"); |
| </script> |
| |
| </body> |
