| <!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; |
| } |
| </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> |
| |
| <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"); |
| </script> |
