blob: 47bde034536797cba3ecc6542e5098b29c773ed4 [file] [log] [blame]
<!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>