blob: 9ecd605588e01de273fd0e6c83f72a189273e67f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
<!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);
}
</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>
<script src="resources/grid-definitions-parsing-utils.js"></script>
<script src="resources/grid-columns-rows-get-set.js"></script>
</body>
</html>
|
