OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
| 4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
="stylesheet"> |
4 <link href="resources/grid.css" rel="stylesheet"> | 5 <link href="resources/grid.css" rel="stylesheet"> |
5 <style> | 6 <style> |
6 .grid { | 7 .definite { |
7 /* Give an explicit size to the grid so that percentage grid tracks have a c
onsistent resolution */ | 8 /* Give an explicit size to the grid so that percentage grid tracks have a c
onsistent resolution */ |
8 width: 800px; | 9 width: 800px; |
9 height: 600px; | 10 height: 600px; |
10 } | 11 } |
11 | 12 |
12 .gridItem { | 13 .gridItem { |
13 grid-column: 1; | 14 grid-column: 1; |
14 grid-row: 1; | 15 grid-row: 1; |
15 width: 7px; | 16 width: 7px; |
16 height: 11px; | 17 height: 11px; |
(...skipping 87 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
104 font: 10px Ahem; | 105 font: 10px Ahem; |
105 } | 106 } |
106 .gridWithAutoInsideMinMax { | 107 .gridWithAutoInsideMinMax { |
107 grid-template-columns: minmax(auto, min-content) 30px; | 108 grid-template-columns: minmax(auto, min-content) 30px; |
108 grid-template-rows: calc(100px + 2em) minmax(10%, auto); | 109 grid-template-rows: calc(100px + 2em) minmax(10%, auto); |
109 } | 110 } |
110 </style> | 111 </style> |
111 <script src="../../resources/js-test.js"></script> | 112 <script src="../../resources/js-test.js"></script> |
112 </head> | 113 </head> |
113 <body> | 114 <body> |
114 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> | 115 <div class="grid definite gridWithFixed" id="gridWithFixedElement"></div> |
115 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> | 116 <div class="grid definite gridWithPercent" id="gridWithPercentElement"></div> |
116 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize"> | 117 <div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize"> |
117 <div class="gridItem"></div> | 118 <div class="gridItem"></div> |
118 </div> | 119 </div> |
119 <div class="grid gridWithAuto" id="gridWithAutoElement"> | 120 <div class="grid definite gridWithAuto" id="gridWithAutoElement"> |
120 <div class="gridItem2"></div> | 121 <div class="gridItem2"></div> |
121 </div> | 122 </div> |
122 <div class="grid gridWithEM" id="gridWithEMElement"></div> | 123 <div class="grid definite gridWithEM" id="gridWithEMElement"></div> |
123 <div class="grid gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div> | 124 <div class="grid definite gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div> |
124 <div class="grid gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div> | 125 <div class="grid definite gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div> |
125 <div class="grid gridWithThreeItems" id="gridWithThreeItems"></div> | 126 <div class="grid definite gridWithThreeItems" id="gridWithThreeItems"></div> |
126 <div class="grid gridWithPercentAndViewportPercent" id="gridWithPercentAndViewpo
rtPercent"></div> | 127 <div class="grid definite gridWithPercentAndViewportPercent" id="gridWithPercent
AndViewportPercent"></div> |
127 <div class="grid gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFit
Available"></div> | 128 <div class="grid definite gridWithFitContentAndFitAvailable" id="gridWithFitCont
entAndFitAvailable"></div> |
128 <div class="grid gridWithMinMaxContent" id="gridWithMinMaxContent"></div> | 129 <div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContent"></di
v> |
129 <div class="grid gridWithMinMaxContent" id="gridWithMinMaxContentWithChildrenEle
ment"> | 130 <div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContentWithCh
ildrenElement"> |
130 <div class="gridItem"></div> | 131 <div class="gridItem"></div> |
131 <div class="gridItem2"></div> | 132 <div class="gridItem2"></div> |
132 </div> | 133 </div> |
133 <div class="grid gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div> | 134 <div class="grid definite gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></
div> |
134 <div class="grid gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxCont
ent"></div> | 135 <div class="grid definite gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndM
inMaxContent"></div> |
135 <div class="grid gridWithFractionFraction" id="gridWithFractionFraction"></div> | 136 <div class="grid definite gridWithFractionFraction" id="gridWithFractionFraction
"></div> |
136 <div class="grid gridWithFractionMinMax" id="gridWithFractionMinMax"></div> | 137 <div class="grid definite gridWithFractionMinMax" id="gridWithFractionMinMax"></
div> |
137 <div class="grid gridWithCalcCalc" id="gridWithCalcCalc"></div> | 138 <div class="grid definite gridWithCalcCalc" id="gridWithCalcCalc"></div> |
138 <div class="grid gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div> | 139 <div class="grid definite gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div> |
139 <div class="grid gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div> | 140 <div class="grid definite gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></di
v> |
140 <div class="grid gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div> | 141 <div class="grid definite gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax
"></div> |
141 <div class="grid gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMax"></div> | 142 <div class="grid definite gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMax
"></div> |
142 <script src="resources/grid-definitions-parsing-utils.js"></script> | 143 <script src="resources/grid-definitions-parsing-utils.js"></script> |
143 <script src="resources/grid-columns-rows-get-set-multiple.js"></script> | 144 <script src="resources/grid-columns-rows-get-set-multiple.js"></script> |
144 </body> | 145 </body> |
145 </html> | 146 </html> |
OLD | NEW |