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