OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <link href="resources/grid.css" rel="stylesheet"> | 2 <link href="resources/grid.css" rel="stylesheet"> |
3 <link href="resources/grid-alignment.css" rel="stylesheet"> | 3 <link href="resources/grid-alignment.css" rel="stylesheet"> |
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 <script src="../../resources/check-layout.js"></script> | 5 <script src="../../resources/check-layout.js"></script> |
6 <script src="../../resources/js-test.js"></script> | 6 <script src="../../resources/js-test.js"></script> |
7 <style> | 7 <style> |
8 .gridPercentAndFlexContent { grid-template: 50px / 50% minmax(30px, 2fr); } | 8 .gridPercentAndFlexContent { grid-template: 50px / 50% minmax(30px, 2fr); } |
9 .gridTwoDoubleMaxFlexContent { grid-template: 50px / minmax(10px, 0.5fr) minmax(
10px, 2fr); } | 9 .gridTwoDoubleMaxFlexContent { grid-template: 50px / minmax(10px, 0.5fr) minmax(
10px, 2fr); } |
10 .gridIgnoreSecondGridItem { grid-template: 50px / minmax(300px, 3fr) minmax(150p
x, 1fr); } | 10 .gridIgnoreSecondGridItem { grid-template: 50px / minmax(300px, 3fr) minmax(150p
x, 1fr); } |
11 | 11 |
12 .gridRowsPercentAndFlexContent { grid-template: minmax(30px, 2fr) 50% / 50px; } | 12 .gridRowsPercentAndFlexContent { grid-template: minmax(30px, 2fr) 50% / 50px; } |
13 .gridRowsTwoMaxFlexContent { grid-template: minmax(10px, 1fr) minmax(10px, 2fr)
/ 50px; } | 13 .gridRowsTwoMaxFlexContent { grid-template: minmax(10px, 1fr) minmax(10px, 2fr)
/ 50px; } |
14 .gridRowsTwoDoubleMaxFlexContent { grid-template: minmax(10px, 0.5fr) minmax(10p
x, 2fr) / 50px; } | 14 .gridRowsTwoDoubleMaxFlexContent { grid-template: minmax(10px, 0.5fr) minmax(10p
x, 2fr) / 50px; } |
15 | 15 |
16 .gridMinMaxFlexFixedAndMinContentAndFixed { grid-template-columns: minmax(0.5fr,
35px) min-content 25px; } | |
17 .gridMinContentAndMinMaxFixedMinContentAndFlex { grid-template-columns: min-cont
ent minmax(20px, min-content) 2fr; } | 16 .gridMinContentAndMinMaxFixedMinContentAndFlex { grid-template-columns: min-cont
ent minmax(20px, min-content) 2fr; } |
18 .gridMaxContentAndMinMaxFixedMaxContentAndFlex { grid-template-columns: max-cont
ent minmax(20px, max-content) 1fr; } | 17 .gridMaxContentAndMinMaxFixedMaxContentAndFlex { grid-template-columns: max-cont
ent minmax(20px, max-content) 1fr; } |
19 | 18 |
20 div.grid > div { font: 10px/1 Ahem; } | 19 div.grid > div { font: 10px/1 Ahem; } |
21 | 20 |
22 .gridRowColumnGaps { | 21 .gridRowColumnGaps { |
23 grid-row-gap: 33px; | 22 grid-row-gap: 33px; |
24 grid-column-gap: 19px; | 23 grid-column-gap: 19px; |
25 } | 24 } |
26 | 25 |
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
69 <div style="width: 10px;"> | 68 <div style="width: 10px;"> |
70 <div class="grid gridRowsPercentAndFlexContent gridRowColumnGaps" style="hei
ght: 150px" data-expected-width="10" data-expected-height="150"> | 69 <div class="grid gridRowsPercentAndFlexContent gridRowColumnGaps" style="hei
ght: 150px" data-expected-width="10" data-expected-height="150"> |
71 <div class="firstRowFirstColumn" data-expected-width="50" data-expected-
height="42"></div> | 70 <div class="firstRowFirstColumn" data-expected-width="50" data-expected-
height="42"></div> |
72 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5
0" data-expected-height="75"></div> | 71 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5
0" data-expected-height="75"></div> |
73 </div> | 72 </div> |
74 </div> | 73 </div> |
75 | 74 |
76 <!-- Check that gutters do not interfere with flex content resolution with conte
nt sized tracks --> | 75 <!-- Check that gutters do not interfere with flex content resolution with conte
nt sized tracks --> |
77 | 76 |
78 <div style="position: relative; width: 100px;"> | 77 <div style="position: relative; width: 100px;"> |
79 <div class="grid gridMinMaxFlexFixedAndMinContentAndFixed gridRowColumnGaps"
data-expected-width="100" data-expected-height="199"> | |
80 <div style="grid-column: 1 / span 2;" data-expected-width="54" data-expe
cted-height="20">XXXX XXXX</div> | |
81 <div style="grid-column: 2 / span 2; grid-row: 2;" data-expected-width="
44" data-expected-height="20">XXX XXX</div> | |
82 <div style="grid-column: 1 / -1; grid-row: 3;" data-expected-width="98"
data-expected-height="20">XXXXX XXXXX</div> | |
83 <div style="grid-column: 2 / span 2; grid-row: 4;" data-expected-width="
44" data-expected-height="40">XX XX XX XX</div> | |
84 </div> | |
85 </div> | |
86 | |
87 <div style="position: relative; width: 100px;"> | |
88 <div class="grid gridMinContentAndMinMaxFixedMinContentAndFlex gridRowColumn
Gaps" data-expected-width="100" data-expected-height="149"> | 78 <div class="grid gridMinContentAndMinMaxFixedMinContentAndFlex gridRowColumn
Gaps" data-expected-width="100" data-expected-height="149"> |
89 <div style="grid-column: 2 / span 2;" data-expected-width="80">XXXXX</di
v> | 79 <div style="grid-column: 2 / span 2;" data-expected-width="80">XXXXX</di
v> |
90 <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="100"
>XXX XXX XXX</div> | 80 <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="100"
>XXX XXX XXX</div> |
91 <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width="
40">XXXX XXXX</div> | 81 <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width="
40">XXXX XXXX</div> |
92 <div style="grid-column: 1; grid-row: 4;" data-expected-width="1" data-e
xpected-height="0"></div> | 82 <div style="grid-column: 1; grid-row: 4;" data-expected-width="1" data-e
xpected-height="0"></div> |
93 </div> | 83 </div> |
94 </div> | 84 </div> |
95 | 85 |
96 <div style="position: relative; width: 100px;"> | 86 <div style="position: relative; width: 100px;"> |
97 <div class="grid gridMaxContentAndMinMaxFixedMaxContentAndFlex gridRowColumn
Gaps" data-expected-width="100" data-expected-height="139"> | 87 <div class="grid gridMaxContentAndMinMaxFixedMaxContentAndFlex gridRowColumn
Gaps" data-expected-width="100" data-expected-height="139"> |
98 <div style="grid-column: 2 / span 2;" data-expected-width="39">XX</div> | 88 <div style="grid-column: 2 / span 2;" data-expected-width="39">XX</div> |
99 <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="109"
>XXX XXX XXX</div> | 89 <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="109"
>XXX XXX XXX</div> |
100 <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width="
90">XXXX XXXX</div> | 90 <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width="
90">XXXX XXXX</div> |
101 <div style="grid-column: 1; grid-row: 4;" data-expected-width="51" data-
expected-height="0"></div> | 91 <div style="grid-column: 1; grid-row: 4;" data-expected-width="51" data-
expected-height="0"></div> |
102 </div> | 92 </div> |
103 </div> | 93 </div> |
104 | 94 |
105 </body> | 95 </body> |
OLD | NEW |