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