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