OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <link href="resources/grid.css" rel="stylesheet"> |
| 3 <style> |
| 4 .indefiniteSizeGrid { |
| 5 font: 10px/1 Ahem; |
| 6 } |
| 7 .gridWithPercent { |
| 8 grid-template-columns: 25%; |
| 9 grid-template-rows: 30%; |
| 10 } |
| 11 .gridWithPercentInMinOfMinMax { |
| 12 grid-template-columns: minmax(20%, max-content); |
| 13 grid-template-rows: minmax(100%, 15px); |
| 14 } |
| 15 .gridWithPercentInMinOfMinMax2 { |
| 16 grid-template-columns: minmax(20%, 50px); |
| 17 grid-template-rows: minmax(100%, max-content); |
| 18 } |
| 19 .gridWithPercentInMaxOfMinMax { |
| 20 grid-template-columns: minmax(min-content, 25%); |
| 21 grid-template-rows: minmax(0px, 1%); |
| 22 } |
| 23 .gridWithPercentInMaxOfMinMax2 { |
| 24 grid-template-columns: minmax(20px, 25%); |
| 25 grid-template-rows: minmax(min-content, 1%); |
| 26 } |
| 27 .gridWithPercentsInMinMax { |
| 28 grid-template-columns: minmax(25%, 50%); |
| 29 grid-template-rows: minmax(10%, 90%); |
| 30 } |
| 31 </style> |
| 32 <script src="../../resources/check-layout.js"></script> |
| 33 <body onload="checkLayout('.indefiniteSizeGrid');"> |
| 34 <p>This test checks that percentages of indefinite sizes are treated as min-cont
ent (for the min track sizing function) or max-content (for the max track sizing
function).</p> |
| 35 <div style="position: relative;"> |
| 36 <div class="indefiniteSizeGrid gridWithPercent" data-expected-width="30" dat
a-expected-height="20"> |
| 37 <div class="firstRowFirstColumn">XXX<br>XXX</div> |
| 38 </div> |
| 39 </div> |
| 40 <div style="position: relative;"> |
| 41 <div class="indefiniteSizeGrid gridWithPercentInMinOfMinMax" data-expected-w
idth="30" data-expected-height="15"> |
| 42 <div class="firstRowFirstColumn">XXX</div> |
| 43 <div class="firstRowFirstColumn">XX XX</div> |
| 44 </div> |
| 45 </div> |
| 46 <div style="position: relative;"> |
| 47 <div class="indefiniteSizeGrid gridWithPercentInMinOfMinMax2" data-expected-
width="30" data-expected-height="20"> |
| 48 <div class="firstRowFirstColumn">XXX</div> |
| 49 <div class="firstRowFirstColumn">XX XX</div> |
| 50 </div> |
| 51 </div> |
| 52 <div style="position: relative;"> |
| 53 <div class="indefiniteSizeGrid gridWithPercentInMaxOfMinMax" data-expected-w
idth="40" data-expected-height="20"> |
| 54 <div class="firstRowFirstColumn">XXXX<br>X</div> |
| 55 </div> |
| 56 </div> |
| 57 <div style="position: relative;"> |
| 58 <div class="indefiniteSizeGrid gridWithPercentInMaxOfMinMax2" data-expected-
width="20" data-expected-height="20"> |
| 59 <div class="firstRowFirstColumn">XXXX<br>X</div> |
| 60 </div> |
| 61 </div> |
| 62 <div style="position: relative;"> |
| 63 <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> |
| 66 </div> |
| 67 </body> |
OLD | NEW |