| <!DOCTYPE html> |
| <html> |
| <head> |
| <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet"> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <link href="resources/grid-alignment.css" rel="stylesheet"> |
| <style> |
| .definite { |
| /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */ |
| width: 800px; |
| height: 600px; |
| } |
| .gridItem { |
| grid-column: 1; |
| grid-row: 1; |
| width: 7px; |
| height: 11px; |
| } |
| .gridItem2 { |
| grid-column: 1; |
| grid-row: 1; |
| width: 17px; |
| height: 3px; |
| } |
| .gridWithNone { |
| grid-template-columns: none; |
| grid-template-rows: none; |
| } |
| .gridWithFixed { |
| grid-template-columns: 10px; |
| grid-template-rows: 15px; |
| } |
| .gridWithPercent { |
| grid-template-columns: 50%; |
| grid-template-rows: 25%; |
| } |
| .gridWithAuto { |
| grid-template-columns: auto; |
| grid-template-rows: auto; |
| } |
| .gridWithEM { |
| grid-template-columns: 10em; |
| grid-template-rows: 15em; |
| font: 10px Ahem; |
| } |
| .gridWithViewPortPercentage { |
| grid-template-columns: 8vw; |
| grid-template-rows: 10vh; |
| } |
| .gridWithFitContent { |
| grid-template-columns: -webkit-fit-content; |
| grid-template-rows: -webkit-fit-content; |
| } |
| .gridWithFitAvailable { |
| grid-template-columns: -webkit-fit-available; |
| grid-template-rows: -webkit-fit-available; |
| } |
| .gridWithMinMax { |
| grid-template-columns: minmax(10%, 15px); |
| grid-template-rows: minmax(20px, 50%); |
| } |
| .gridWithMinContent { |
| grid-template-columns: min-content; |
| grid-template-rows: min-content; |
| } |
| .gridWithMaxContent { |
| grid-template-columns: max-content; |
| grid-template-rows: max-content; |
| } |
| .gridWithFraction { |
| grid-template-columns: 1fr; |
| grid-template-rows: 2fr; |
| } |
| .gridWithCalc { |
| grid-template-columns: calc(150px); |
| grid-template-rows: calc(75px); |
| } |
| .gridWithCalcComplex { |
| grid-template-columns: calc(50% + 150px); |
| grid-template-rows: calc(65% + 75px); |
| } |
| .gridWithCalcInsideMinMax { |
| grid-template-columns: minmax(10%, calc(15px)); |
| grid-template-rows: minmax(calc(20px), 50%); |
| } |
| .gridWithCalcComplexInsideMinMax { |
| grid-template-columns: minmax(10%, calc(50% + 15px)); |
| grid-template-rows: minmax(calc(20px + 10%), 50%); |
| } |
| .gridWithAutoInsideMinMax { |
| grid-template-columns: minmax(auto, 20px); |
| grid-template-rows: minmax(max-content, auto); |
| } |
| .gridWithFitContentFunction { |
| grid-template-columns: fit-content(30%); |
| grid-template-rows: fit-content(20px): |
| } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <div class="grid definite gridWithNone" id="gridWithNoneElement"></div> |
| <div class="grid definite gridWithFixed" id="gridWithFixedElement"></div> |
| <div class="grid definite gridWithPercent" id="gridWithPercentElement"></div> |
| <div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize"></div> |
| <div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSizeWithChildren"> |
| <div class="gridItem"></div> |
| </div> |
| <div class="grid definite gridWithAuto contentStart" id="gridWithAutoElement"></div> |
| <div class="grid definite gridWithAuto contentStart" id="gridWithAutoWithoutSizeElement"></div> |
| <div class="grid definite gridWithAuto contentStart fontSpec" id="gridWithAutoWithChildrenElement"> |
| <div class="gridItem"></div> |
| </div> |
| <div class="grid definite gridWithEM" id="gridWithEMElement"></div> |
| <div class="grid definite gridWithViewPortPercentage" id="gridWithViewPortPercentageElement"></div> |
| <div class="grid definite gridWithFitContent" id="gridWithFitContentElement"></div> |
| <div class="grid definite gridWithFitAvailable" id="gridWithFitAvailableElement"></div> |
| <div class="grid definite gridWithMinMax" id="gridWithMinMaxElement"></div> |
| <div class="grid definite gridWithMinContent" id="gridWithMinContentElement"></div> |
| <div class="grid definite gridWithMinContent" id="gridWithMinContentWithChildrenElement"> |
| <div class="gridItem"></div> |
| <div class="gridItem2"></div> |
| </div> |
| <div class="grid definite gridWithMaxContent" id="gridWithMaxContentElement"></div> |
| <div class="grid definite gridWithMaxContent" id="gridWithMaxContentWithChildrenElement"> |
| <div class="gridItem"></div> |
| <div class="gridItem2"></div> |
| </div> |
| <div class="grid definite gridWithFraction" id="gridWithFractionElement"></div> |
| <div class="grid definite gridWithCalc" id="gridWithCalcElement"></div> |
| <div class="grid definite gridWithCalcComplex" id="gridWithCalcComplexElement"></div> |
| <div class="grid definite gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMaxElement"></div> |
| <div class="grid definite gridWithCalcComplexInsideMinMax" id="gridWithCalcComplexInsideMinMaxElement"></div> |
| <div class="grid definite gridWithAutoInsideMinMax contentStart" id="gridWithAutoInsideMinMaxElement"> |
| <div class="gridItem"></div> |
| </div> |
| <div class="grid definite gridWithFitContentFunction contentStart" id="gridWithFitContentFunctionElement"> |
| <div class="gridItem"></div> |
| </div> |
| <script src="resources/grid-definitions-parsing-utils.js"></script> |
| <script src="resources/grid-columns-rows-get-set.js"></script> |
| </body> |
| </html> |
