OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <link href="resources/grid.css" rel="stylesheet"> | 4 <link href="resources/grid.css" rel="stylesheet"> |
5 <style> | 5 <style> |
6 .grid { | 6 .grid { |
7 grid-template-columns: 20% 50% 30%; | 7 grid-template-columns: 20% 50% 30%; |
8 grid-template-rows: 40%; | 8 grid-template-rows: 40%; |
9 } | 9 } |
10 | 10 |
(...skipping 10 matching lines...) Expand all Loading... |
21 .percentageSize { | 21 .percentageSize { |
22 width: 50%; | 22 width: 50%; |
23 height: 50%; | 23 height: 50%; |
24 } | 24 } |
25 | 25 |
26 .indefiniteSize { | 26 .indefiniteSize { |
27 width: -webkit-fit-content; | 27 width: -webkit-fit-content; |
28 height: auto; | 28 height: auto; |
29 } | 29 } |
30 | 30 |
31 .legacyIntrinsicSize { | 31 .fitContentSize { |
32 width: intrinsic; | 32 width: fit-content; |
33 height: intrinsic; | 33 height: fit-content; |
34 } | 34 } |
35 | 35 |
36 .firstRowFirstColumn { | 36 .firstRowFirstColumn { |
37 color: blue; | 37 color: blue; |
38 background-color: cyan; | 38 background-color: cyan; |
39 } | 39 } |
40 | 40 |
41 .firstRowSecondColumn { | 41 .firstRowSecondColumn { |
42 color: green; | 42 color: green; |
43 background-color: lime; | 43 background-color: lime; |
(...skipping 84 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
128 | 128 |
129 <div class="unconstrainedContainer"> | 129 <div class="unconstrainedContainer"> |
130 <div class="grid indefiniteSize"> | 130 <div class="grid indefiniteSize"> |
131 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width
="20" data-expected-height="10">XX</div> | 131 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width
="20" data-expected-height="10">XX</div> |
132 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt
h="50" data-expected-height="10">XXXXX</div> | 132 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt
h="50" data-expected-height="10">XXXXX</div> |
133 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width
="30" data-expected-height="10">XXX</div> | 133 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width
="30" data-expected-height="10">XXX</div> |
134 </div> | 134 </div> |
135 </div> | 135 </div> |
136 | 136 |
137 <div class="indefiniteSize"> | 137 <div class="indefiniteSize"> |
138 <div class="grid legacyIntrinsicSize"> | 138 <div class="grid fitContentSize"> |
139 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width
="20" data-expected-height="10">XX</div> | 139 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width
="20" data-expected-height="10">XX</div> |
140 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt
h="50" data-expected-height="10">XXXXX</div> | 140 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt
h="50" data-expected-height="10">XXXXX</div> |
141 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width
="30" data-expected-height="10">XXX</div> | 141 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width
="30" data-expected-height="10">XXX</div> |
142 </div> | 142 </div> |
143 </div> | 143 </div> |
144 | 144 |
145 <div class="unconstrainedContainer"> | 145 <div class="unconstrainedContainer"> |
146 <div class="grid legacyIntrinsicSize"> | 146 <div class="grid fitContentSize"> |
147 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width
="20" data-expected-height="10">XX</div> | 147 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width
="20" data-expected-height="10">XX</div> |
148 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt
h="50" data-expected-height="10">XXXXX</div> | 148 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt
h="50" data-expected-height="10">XXXXX</div> |
149 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width
="30" data-expected-height="10">XXX</div> | 149 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width
="30" data-expected-height="10">XXX</div> |
150 </div> | 150 </div> |
151 </div> | 151 </div> |
152 | 152 |
153 </body> | 153 </body> |
154 </html> | 154 </html> |
OLD | NEW |