| <!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."); |
| testGridDefinitionsValues(document.getElementById("gridContentStart"), "300px 200px 100px", "150px 100px 50px"); |
| testGridDefinitionsValues(document.getElementById("gridContentCenter"), "300px 200px 100px", "150px 100px 50px"); |
| testGridDefinitionsValues(document.getElementById("gridContentEnd"), "300px 200px 100px", "150px 100px 50px"); |
| testGridDefinitionsValues(document.getElementById("gridContentSpaceBetween"), "300px 200px 100px", "150px 100px 50px"); |
| testGridDefinitionsValues(document.getElementById("gridContentSpaceAround"), "300px 200px 100px", "150px 100px 50px"); |
| testGridDefinitionsValues(document.getElementById("gridContentSpaceEvenly"), "300px 200px 100px", "150px 100px 50px"); |
| testGridDefinitionsValues(document.getElementById("gridContentStretch"), "300px 200px 100px", "150px 100px 50px"); |
| |
| testGridDefinitionsValues(document.getElementById("gridGapsContentStart"), "300px 200px 100px", "150px 100px 50px"); |
| testGridDefinitionsValues(document.getElementById("gridGapsContentCenter"), "300px 200px 100px", "150px 100px 50px"); |
| testGridDefinitionsValues(document.getElementById("gridGapsContentEnd"), "300px 200px 100px", "150px 100px 50px"); |
| testGridDefinitionsValues(document.getElementById("gridGapsContentSpaceBetween"), "300px 200px 100px", "150px 100px 50px"); |
| testGridDefinitionsValues(document.getElementById("gridGapsContentSpaceAround"), "300px 200px 100px", "150px 100px 50px"); |
| testGridDefinitionsValues(document.getElementById("gridGapsContentSpaceEvenly"), "300px 200px 100px", "150px 100px 50px"); |
| testGridDefinitionsValues(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; |
| testGridDefinitionsValues(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> |
