| <!DOCTYPE html> |
| <html> |
| <head> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <style> |
| .gridGap { grid-gap: 20px 15px; } |
| .gridPercentGap { grid-gap: 10% 15%; } |
| .gridSimpleGap { grid-gap: 25px; } |
| .gridSimplePercentGap { grid-gap: 10%; } |
| .gridColumnGap { grid-column-gap: 2vw; } |
| .gridRowGap { grid-row-gap: 2em; } |
| .gridRowColumnGaps { |
| grid-row-gap: 12px; |
| grid-column-gap: 1rem; |
| } |
| .gridRowColumnPercentGaps { |
| grid-row-gap: 10%; |
| grid-column-gap: 15%; |
| } |
| .gridRowColumnInheritGaps { |
| grid-row-gap: inherit; |
| grid-column-gap: inherit; |
| } |
| .gridRowColumnInitialGaps { |
| grid-row-gap: initial; |
| grid-column-gap: initial; |
| } |
| .gridCalcGaps { |
| grid-row-gap: calc(10px + 3px); |
| grid-column-gap: calc(2px + 1vw); |
| } |
| .gridInvalidRowGap { grid-row-gap: -10px; } |
| .gridInvalidColumnGap { grid-column-gap: max-content; } |
| .gridInvalidMultipleRowColumnGaps { |
| grid-row-gap: 10px 1px; |
| grid-column-gap: 0px 0px 0px; |
| } |
| .gridInvalidLengthRowColumnGaps { |
| grid-row-gap: 2dpi; |
| grid-column-gap: 3rad; |
| } |
| .gridInvalidGridGap { grid-gap: 20px 20px 10px; } |
| .gridInvalidNoneGap { grid-gap: none; } |
| .gridInvalidImplicitGridGap { grid-gap: fit-content; } |
| |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| |
| <div class="grid" id="defaultGrid"></div> |
| <div class="grid gridGap" id="gridGap"></div> |
| <div class="grid gridPercentGap" id="gridPercentGap"></div> |
| <div class="grid gridSimpleGap" id="gridSimpleGap"></div> |
| <div class="grid gridSimplePercentGap" id="gridSimplePercentGap"></div> |
| <div class="grid gridColumnGap" id="gridColumnGap"></div> |
| <div class="grid gridRowGap" id="gridRowGap"></div> |
| <div class="grid gridCalcGaps" id="gridCalcGaps"></div> |
| <div class="grid gridRowColumnGaps" id="gridRowColumnGaps"></div> |
| <div class="grid gridRowColumnPercentGaps" id="gridRowColumnPercentGaps"></div> |
| <div class="grid gridSimpleGap"> |
| <div class="grid gridRowColumnInheritGaps" id="gridRowColumnInheritGaps"></div> |
| </div> |
| <div class="grid gridSimpleGap"> |
| <div class="grid gridRowColumnInitialGaps" id="gridRowColumnInitialGaps"></div> |
| </div> |
| <div class="grid gridInvalidRowGap" id="gridInvalidRowGap"></div> |
| <div class="grid gridInvalidColumnGap" id="gridInvalidColumnGap"></div> |
| <div class="grid gridInvalidMultipleRowColumnGaps" id="gridInvalidMultipleRowColumnGaps"></div> |
| <div class="grid gridInvalidGridGap" id="gridInvalidGridGap"></div> |
| <div class="grid gridInvalidNoneGap" id="gridInvalidNoneGap"></div> |
| <div class="grid gridInvalidImplicitGridGap" id="gridInvalidImplicitGridGap"></div> |
| <div class="grid gridInvalidLengthRowColumnGaps" id="gridInvalidLengthRowColumnGaps"></div> |
| |
| <script src="resources/grid-definitions-parsing-utils.js"></script> |
| <script> |
| |
| description('Test that setting and getting grid-column-gap and grid-row-gap works as expected'); |
| |
| debug("Test getting grid-column-gap and grid-row-gap set through CSS"); |
| |
| testGridGapDefinitionsValues("defaultGrid", "0px", "0px"); |
| testGridGapDefinitionsValues("gridGap", "20px", "15px"); |
| testGridGapDefinitionsValues("gridPercentGap", "10%", "15%"); |
| testGridGapDefinitionsValues("gridSimpleGap", "25px", "25px"); |
| testGridGapDefinitionsValues("gridSimplePercentGap", "10%", "10%"); |
| testGridGapDefinitionsValues("gridColumnGap", "0px", "16px"); |
| testGridGapDefinitionsValues("gridRowGap", "32px", "0px"); |
| testGridGapDefinitionsValues("gridCalcGaps", "13px", "10px"); |
| testGridGapDefinitionsValues("gridRowColumnGaps", "12px", "16px"); |
| testGridGapDefinitionsValues("gridRowColumnGaps", "12px", "16px"); |
| testGridGapDefinitionsValues("gridRowColumnPercentGaps", "10%", "15%"); |
| testGridGapDefinitionsValues("gridRowColumnInheritGaps", "25px", "25px"); |
| testGridGapDefinitionsValues("gridRowColumnInitialGaps", "0px", "0px"); |
| |
| debug(""); |
| debug("Test getting wrong values for grid-column-gap and grid-row-gap set through CSS"); |
| testGridGapDefinitionsValues("gridInvalidRowGap", "0px", "0px"); |
| testGridGapDefinitionsValues("gridInvalidColumnGap", "0px", "0px"); |
| testGridGapDefinitionsValues("gridInvalidMultipleRowColumnGaps", "0px", "0px"); |
| testGridGapDefinitionsValues("gridInvalidGridGap", "0px", "0px"); |
| testGridGapDefinitionsValues("gridInvalidNoneGap", "0px", "0px"); |
| testGridGapDefinitionsValues("gridInvalidImplicitGridGap", "0px", "0px"); |
| testGridGapDefinitionsValues("gridInvalidLengthRowColumnGaps", "0px", "0px"); |
| |
| </script> |
| </body> |
| </html> |
