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 <style> | 3 <style> |
4 .indefiniteSizeGrid { | 4 .indefiniteSizeGrid { |
5 font: 10px/1 Ahem; | 5 font: 10px/1 Ahem; |
| 6 width: -webkit-min-content; |
6 } | 7 } |
7 .gridWithPercent { | 8 .gridWithPercent { |
8 grid-template-columns: 25%; | 9 grid-template-columns: 25%; |
9 grid-template-rows: 30%; | 10 grid-template-rows: 30%; |
10 } | 11 } |
11 .gridWithPercentInMinOfMinMax { | 12 .gridWithPercentInMinOfMinMax { |
12 grid-template-columns: minmax(20%, max-content); | 13 grid-template-columns: minmax(20%, max-content); |
13 grid-template-rows: minmax(100%, 15px); | 14 grid-template-rows: minmax(100%, 15px); |
14 } | 15 } |
15 .gridWithPercentInMinOfMinMax2 { | 16 .gridWithPercentInMinOfMinMax2 { |
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
58 <div class="indefiniteSizeGrid gridWithPercentInMaxOfMinMax2" data-expected-
width="20" data-expected-height="20"> | 59 <div class="indefiniteSizeGrid gridWithPercentInMaxOfMinMax2" data-expected-
width="20" data-expected-height="20"> |
59 <div class="firstRowFirstColumn">XXXX<br>X</div> | 60 <div class="firstRowFirstColumn">XXXX<br>X</div> |
60 </div> | 61 </div> |
61 </div> | 62 </div> |
62 <div style="position: relative;"> | 63 <div style="position: relative;"> |
63 <div class="indefiniteSizeGrid gridWithPercentsInMinMax" data-expected-width
="40" data-expected-height="40"> | 64 <div class="indefiniteSizeGrid gridWithPercentsInMinMax" data-expected-width
="40" data-expected-height="40"> |
64 <div class="firstRowFirstColumn">XXX<br>XX XX<br>XXXX</div> | 65 <div class="firstRowFirstColumn">XXX<br>XX XX<br>XXXX</div> |
65 </div> | 66 </div> |
66 </div> | 67 </div> |
67 </body> | 68 </body> |
OLD | NEW |