<!DOCTYPE html>
<head>
<link href="resources/grid.css" rel="stylesheet"/>
<link href="resources/grid-alignment.css" rel="stylesheet"/>
<style>
.grid {
font: 10px/1 Ahem;
}
.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</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>
testGridDefinitionsValues(gridAutoAndAuto, "10px 90px", "10px");
testGridDefinitionsValues(gridFixedMaxContentAndFixedMaxContent, "20px 80px", "10px");
</script>
</body>