<!DOCTYPE html>
<style type="text/css">

.grid {
  display: grid;
  position: relative;
  width: 100px; /* Just to ensure a small number of repetitions. */
}

.emptyCols { grid-template-rows: 20px; }
.emptyRows { grid-template-columns: 10px; }
.emptyColsDueToAutoFit { grid-template-columns: repeat(auto-fit, [a] 20px [b]); }
.emptyRowsDueToAutoFit { grid-template-rows: repeat(auto-fit, [a] 20px [b]); }
.noRepetitionsCols { grid-template-columns: repeat(auto-fit, [a] 20px [b]) 10px 30px; }
.noRepetitionsRows { grid-template-rows: repeat(auto-fit, [a] 20px [b]) 10px 30px; }


.absposChild {
  position: absolute;
}

</style>


<script>
function runTest() {
     description("This test checks that, getting the computed style of a grid with only absolutelly positioned children and no tracks in some axis, does not CRASH.");
     testGridTemplatesValues(document.getElementById("grid1"), "none", "20px");
     testGridTemplatesValues(document.getElementById("grid2"), "10px", "none");
     testGridTemplatesValues(document.getElementById("grid3"), "none", "none");
     testGridTemplatesValues(document.getElementById("grid4"), "[a] 0px [b a] 0px [b a] 0px [b a] 0px [b a] 0px [b]", "none");
     testGridTemplatesValues(document.getElementById("grid5"), "none", "[a] 0px [b]");
     testGridTemplatesValues(document.getElementById("grid6"), "[a] 0px [b a] 0px [b a] 0px [b] 10px 30px", "none");
     testGridTemplatesValues(document.getElementById("grid7"), "none", "[a] 0px [b] 10px 30px");
}
</script>
<script src="../../resources/js-test.js"></script>
<script src="resources/grid-definitions-parsing-utils.js"></script>

<body onload="runTest()">

<div id="grid1" class="grid emptyCols"><div class="absposChild"></div></div>

<div id="grid2" class="grid emptyRows"><div class="absposChild"></div></div>

<div id="grid3" class="grid"><div class="absposChild"></div></div>

<div id="grid4" class="grid emptyColsDueToAutoFit"><div class="absposChild"></div></div>
<div id="grid5" class="grid emptyRowsDueToAutoFit"><div class="absposChild"></div></div>

<div id="grid6" class="grid noRepetitionsCols"><div class="absposChild"></div></div>
<div id="grid7" class="grid noRepetitionsRows"><div class="absposChild"></div></div>

</body>