| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <link href="resources/grid.css" rel="stylesheet"> | 3 <link href="resources/grid.css" rel="stylesheet"> |
| 4 <link href="resources/grid-alignment.css" rel="stylesheet"> |
| 4 <style> | 5 <style> |
| 5 .gridMinMaxAutoWithColumnMinMaxAuto { | 6 .gridMinMaxAutoWithColumnMinMaxAuto { |
| 6 grid-template-columns: minmax(50px, 180px) auto; | 7 grid-template-columns: minmax(50px, 180px) auto; |
| 7 grid-template-rows: auto minmax(50px, 100px); | 8 grid-template-rows: auto minmax(50px, 100px); |
| 8 } | 9 } |
| 9 </style> | 10 </style> |
| 10 <script src="../../resources/check-layout.js"></script> | 11 <script src="../../resources/check-layout.js"></script> |
| 11 <body onload="checkLayout('.grid')"> | 12 <body onload="checkLayout('.grid')"> |
| 12 | 13 |
| 13 <p>Test that several different grid items along with several minmax tracks are p
roperly sized.</p> | 14 <p>Test that several different grid items along with several minmax tracks are p
roperly sized.</p> |
| 14 | 15 |
| 15 <div class="unconstrainedContainer" style="position: relative;"> | 16 <div class="unconstrainedContainer" style="position: relative;"> |
| 16 <div class="grid gridMinMaxAutoWithColumnMinMaxAuto"> | 17 <div class="grid gridMinMaxAutoWithColumnMinMaxAuto justifyContentStart"> |
| 17 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="180" d
ata-expected-height="10">XXXXX XXXXX</div> | 18 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="180" d
ata-expected-height="10">XXXXX XXXXX</div> |
| 18 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="170"
data-expected-height="10">XXXXX XXXXX XXXXX</div> | 19 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="170"
data-expected-height="10">XXXXX XXXXX XXXXX</div> |
| 19 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="180"
data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div> | 20 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="180"
data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div> |
| 20 <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="170"
data-expected-height="100">XXXXX XXXXX</div> | 21 <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="170"
data-expected-height="100">XXXXX XXXXX</div> |
| 21 </div> | 22 </div> |
| 22 </div> | 23 </div> |
| 23 | 24 |
| 24 <div class="constrainedContainer" style="position: relative;"> | 25 <div class="constrainedContainer" style="position: relative;"> |
| 25 <div class="grid gridMinMaxAutoWithColumnMinMaxAuto" style="height: 100%"> | 26 <div class="grid gridMinMaxAutoWithColumnMinMaxAuto" style="height: 100%"> |
| 26 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" da
ta-expected-height="30">XXXXX XXXXX</div> | 27 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" da
ta-expected-height="30">XXXXX XXXXX</div> |
| (...skipping 16 matching lines...) Expand all Loading... |
| 43 <div class="grid gridMinMaxAutoWithColumnMinMaxAuto"> | 44 <div class="grid gridMinMaxAutoWithColumnMinMaxAuto"> |
| 44 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="110" d
ata-expected-height="20">XXXXX XXXXX</div> | 45 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="110" d
ata-expected-height="20">XXXXX XXXXX</div> |
| 45 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="110"
data-expected-height="20">XXXXX XXXXX XXXXX</div> | 46 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="110"
data-expected-height="20">XXXXX XXXXX XXXXX</div> |
| 46 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="110"
data-expected-height="100">XXXXX XXXXX</div> | 47 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="110"
data-expected-height="100">XXXXX XXXXX</div> |
| 47 <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="110"
data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div> | 48 <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="110"
data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div> |
| 48 </div> | 49 </div> |
| 49 </div> | 50 </div> |
| 50 | 51 |
| 51 </body> | 52 </body> |
| 52 </html> | 53 </html> |
| OLD | NEW |