| 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="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
="stylesheet"> |
| 5 <link href="resources/grid.css" rel="stylesheet"> | 5 <link href="resources/grid.css" rel="stylesheet"> |
| 6 <link href="resources/grid-alignment.css" rel="stylesheet"> |
| 6 <style> | 7 <style> |
| 7 .definite { | 8 .definite { |
| 8 /* Give an explicit size to the grid so that percentage grid tracks have a c
onsistent resolution */ | 9 /* Give an explicit size to the grid so that percentage grid tracks have a c
onsistent resolution */ |
| 9 width: 800px; | 10 width: 800px; |
| 10 height: 600px; | 11 height: 600px; |
| 11 } | 12 } |
| 12 | 13 |
| 13 .gridItem { | 14 .gridItem { |
| 14 grid-column: 1; | 15 grid-column: 1; |
| 15 grid-row: 1; | 16 grid-row: 1; |
| (...skipping 94 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 110 } | 111 } |
| 111 </style> | 112 </style> |
| 112 <script src="../../resources/js-test.js"></script> | 113 <script src="../../resources/js-test.js"></script> |
| 113 </head> | 114 </head> |
| 114 <body> | 115 <body> |
| 115 <div class="grid definite gridWithFixed" id="gridWithFixedElement"></div> | 116 <div class="grid definite gridWithFixed" id="gridWithFixedElement"></div> |
| 116 <div class="grid definite gridWithPercent" id="gridWithPercentElement"></div> | 117 <div class="grid definite gridWithPercent" id="gridWithPercentElement"></div> |
| 117 <div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize"> | 118 <div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize"> |
| 118 <div class="gridItem"></div> | 119 <div class="gridItem"></div> |
| 119 </div> | 120 </div> |
| 120 <div class="grid definite gridWithAuto" id="gridWithAutoElement"> | 121 <div class="grid definite gridWithAuto contentStart" id="gridWithAutoElement"> |
| 121 <div class="gridItem2"></div> | 122 <div class="gridItem2"></div> |
| 122 </div> | 123 </div> |
| 123 <div class="grid definite gridWithEM" id="gridWithEMElement"></div> | 124 <div class="grid definite gridWithEM" id="gridWithEMElement"></div> |
| 124 <div class="grid definite gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div> | 125 <div class="grid definite gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div> |
| 125 <div class="grid definite gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div> | 126 <div class="grid definite gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div> |
| 126 <div class="grid definite gridWithThreeItems" id="gridWithThreeItems"></div> | 127 <div class="grid definite gridWithThreeItems contentStart" id="gridWithThreeItem
s"></div> |
| 127 <div class="grid definite gridWithPercentAndViewportPercent" id="gridWithPercent
AndViewportPercent"></div> | 128 <div class="grid definite gridWithPercentAndViewportPercent" id="gridWithPercent
AndViewportPercent"></div> |
| 128 <div class="grid definite gridWithFitContentAndFitAvailable" id="gridWithFitCont
entAndFitAvailable"></div> | 129 <div class="grid definite gridWithFitContentAndFitAvailable" id="gridWithFitCont
entAndFitAvailable"></div> |
| 129 <div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContent"></di
v> | 130 <div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContent"></di
v> |
| 130 <div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContentWithCh
ildrenElement"> | 131 <div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContentWithCh
ildrenElement"> |
| 131 <div class="gridItem"></div> | 132 <div class="gridItem"></div> |
| 132 <div class="gridItem2"></div> | 133 <div class="gridItem2"></div> |
| 133 </div> | 134 </div> |
| 134 <div class="grid definite gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></
div> | 135 <div class="grid definite gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></
div> |
| 135 <div class="grid definite gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndM
inMaxContent"></div> | 136 <div class="grid definite gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndM
inMaxContent"></div> |
| 136 <div class="grid definite gridWithFractionFraction" id="gridWithFractionFraction
"></div> | 137 <div class="grid definite gridWithFractionFraction" id="gridWithFractionFraction
"></div> |
| 137 <div class="grid definite gridWithFractionMinMax" id="gridWithFractionMinMax"></
div> | 138 <div class="grid definite gridWithFractionMinMax" id="gridWithFractionMinMax"></
div> |
| 138 <div class="grid definite gridWithCalcCalc" id="gridWithCalcCalc"></div> | 139 <div class="grid definite gridWithCalcCalc" id="gridWithCalcCalc"></div> |
| 139 <div class="grid definite gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div> | 140 <div class="grid definite gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div> |
| 140 <div class="grid definite gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></di
v> | 141 <div class="grid definite gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></di
v> |
| 141 <div class="grid definite gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax
"></div> | 142 <div class="grid definite gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax
"></div> |
| 142 <div class="grid definite gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMax
"></div> | 143 <div class="grid definite gridWithAutoInsideMinMax contentStart" id="gridWithAut
oInsideMinMax"></div> |
| 143 <script src="resources/grid-definitions-parsing-utils.js"></script> | 144 <script src="resources/grid-definitions-parsing-utils.js"></script> |
| 144 <script src="resources/grid-columns-rows-get-set-multiple.js"></script> | 145 <script src="resources/grid-columns-rows-get-set-multiple.js"></script> |
| 145 </body> | 146 </body> |
| 146 </html> | 147 </html> |
| OLD | NEW |