<!DOCTYPE HTML>
<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">
<style>
.grid {
    grid-template-columns: 300px 200px 100px;
    grid-template-rows: 150px 100px 50px;
    width: 800px;
    height: 500px;
}

.gaps {
    grid-gap: 10px 20px;
}

.autoFit {
    grid-template-columns: repeat(auto-fit, 75px);
    grid-template-rows: 25px;
}

.width300 { width: 300px; }

.item:first-child { background: lime; }
.item:last-child { background: blue; }
</style>

<div class="grid contentStart" id="gridContentStart"></div>
<div class="grid contentCenter" id="gridContentCenter"></div>
<div class="grid contentEnd" id="gridContentEnd"></div>
<div class="grid contentSpaceBetween" id="gridContentSpaceBetween"></div>
<div class="grid contentSpaceAround" id="gridContentSpaceAround"></div>
<div class="grid contentSpaceEvenly" id="gridContentSpaceEvenly"></div>
<div class="grid contentStretch" id="gridContentStretch"></div>

<div class="grid gaps contentStart" id="gridGapsContentStart"></div>
<div class="grid gaps contentCenter" id="gridGapsContentCenter"></div>
<div class="grid gaps contentEnd" id="gridGapsContentEnd"></div>
<div class="grid gaps contentSpaceBetween" id="gridGapsContentSpaceBetween"></div>
<div class="grid gaps contentSpaceAround" id="gridGapsContentSpaceAround"></div>
<div class="grid gaps contentSpaceEvenly" id="gridGapsContentSpaceEvenly"></div>
<div class="grid gaps contentStretch" id="gridGapsContentStretch"></div>

<div class="grid gaps width300 autoFit" id="gridAutoFitEmpty"></div>
<div class="grid gaps width300 autoFit" id="gridAutoFitFirstColumnChild"><div class="item"></div></div>
<div class="grid gaps width300 autoFit" id="gridAutoFitSecondColumnChild"><div class="item" style="grid-column: 2"></div></div>
<div class="grid gaps width300 autoFit" id="gridAutoFitThirdColumnChild"><div class="item" style="grid-column: 3"></div></div>
<div class="grid gaps width300 autoFit" id="gridAutoFitTwoConsecutiveChildren"><div class="item"></div><div class="item"></div></div>
<div class="grid gaps width300 autoFit" id="gridAutoFitTwoConsecutiveChildrenTwo">
    <div class="item" style="grid-column: 2"></div><div class="item"></div>
</div>
<div class="grid gaps width300 autoFit" id="gridAutoFitTwoAlternatingChildren">
    <div class="item"></div><div class="item" style="grid-column: 3"></div>
</div>

<script src="../../resources/js-test.js"></script>
<script src="resources/grid-definitions-parsing-utils.js"></script>
<script>
    description("Test that computed style for grid-template-columns and grid-template-rows works as expected with content alignment and gaps.");
    testGridTemplatesValues(document.getElementById("gridContentStart"), "300px 200px 100px", "150px 100px 50px");
    testGridTemplatesValues(document.getElementById("gridContentCenter"), "300px 200px 100px", "150px 100px 50px");
    testGridTemplatesValues(document.getElementById("gridContentEnd"), "300px 200px 100px", "150px 100px 50px");
    testGridTemplatesValues(document.getElementById("gridContentSpaceBetween"), "300px 200px 100px", "150px 100px 50px");
    testGridTemplatesValues(document.getElementById("gridContentSpaceAround"), "300px 200px 100px", "150px 100px 50px");
    testGridTemplatesValues(document.getElementById("gridContentSpaceEvenly"), "300px 200px 100px", "150px 100px 50px");
    testGridTemplatesValues(document.getElementById("gridContentStretch"), "300px 200px 100px", "150px 100px 50px");

    testGridTemplatesValues(document.getElementById("gridGapsContentStart"), "300px 200px 100px", "150px 100px 50px");
    testGridTemplatesValues(document.getElementById("gridGapsContentCenter"), "300px 200px 100px", "150px 100px 50px");
    testGridTemplatesValues(document.getElementById("gridGapsContentEnd"), "300px 200px 100px", "150px 100px 50px");
    testGridTemplatesValues(document.getElementById("gridGapsContentSpaceBetween"), "300px 200px 100px", "150px 100px 50px");
    testGridTemplatesValues(document.getElementById("gridGapsContentSpaceAround"), "300px 200px 100px", "150px 100px 50px");
    testGridTemplatesValues(document.getElementById("gridGapsContentSpaceEvenly"), "300px 200px 100px", "150px 100px 50px");
    testGridTemplatesValues(document.getElementById("gridGapsContentStretch"), "300px 200px 100px", "150px 100px 50px");

    function testGapsAlignmentWithAutoFit(id, expectedColumns, expectedRows) {
        var element = document.getElementById(id);
        var alignmentClasses = [ '', 'contentStart', 'contentCenter', 'contentEnd', 'contentSpaceAround', 'contentSpaceBetween', 'contentSpaceEvenly', 'contentStretch'];

        for (alignmentClass in alignmentClasses) {
            var originalClassName = element.className;
            element.className += " " + alignmentClass;
            testGridTemplatesValues(element, expectedColumns, expectedRows);
            element.className = originalClassName;
        }
    }

    testGapsAlignmentWithAutoFit('gridAutoFitEmpty', "0px 0px 0px", "25px");
    testGapsAlignmentWithAutoFit("gridAutoFitFirstColumnChild", "75px 0px 0px", "25px");
    testGapsAlignmentWithAutoFit("gridAutoFitSecondColumnChild", "0px 75px 0px", "25px");
    testGapsAlignmentWithAutoFit("gridAutoFitThirdColumnChild", "0px 0px 75px", "25px");
    testGapsAlignmentWithAutoFit("gridAutoFitTwoConsecutiveChildren", "75px 75px 0px", "25px");
    testGapsAlignmentWithAutoFit("gridAutoFitTwoConsecutiveChildrenTwo", "0px 75px 75px", "25px");
    testGapsAlignmentWithAutoFit("gridAutoFitTwoAlternatingChildren", "75px 0px 75px", "25px");

</script>