145 lines
5.0 KiB
HTML
145 lines
5.0 KiB
HTML
<!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: 16px;
|
|
}
|
|
.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: fit-content;
|
|
grid-template-rows: 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-pre.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>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|