flex-sizing-rows-min-max-height-001.html (4650B)
1 <!DOCTYPE HTML> 2 <title>CSS Grid Layout Test: min and max height when computing the flex row</title> 3 <link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/> 4 <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-flex-tracks"/> 5 <link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=660690"/> 6 <link href="/css/support/grid.css" rel="stylesheet"/> 7 <link href="/css/support/height-keyword-classes.css" rel="stylesheet"> 8 <meta name="assert" content="This test ensures that minimum and maximum heights are used to compute the flex fraction for grid rows."/> 9 <style> 10 .grid { 11 margin: 3px; 12 grid: minmax(10px, 1fr) minmax(10px, 4fr) / 50px; 13 grid-row-gap: 33px; 14 border: 5px dashed; 15 padding: 2px; 16 } 17 18 .float { float: left; } 19 20 .item:nth-child(1) { background-color: purple; } 21 .item:nth-child(2) { background-color: blue; } 22 </style> 23 24 <script src="/resources/testharness.js"></script> 25 <script src="/resources/testharnessreport.js"></script> 26 <script src="/resources/check-layout-th.js"></script> 27 <body onload="checkLayout('.grid')"> 28 <div id="log"></div> 29 30 <p>This test PASS if all the grids in the same row look the same.</p> 31 32 <div class="grid float" style="max-height: 70px" data-expected-width="64" data-expected-height="84"> 33 <div class="item" data-expected-width="50" data-expected-height="10"></div> 34 <div class="item" data-expected-width="50" data-expected-height="27"></div> 35 </div> 36 <div class="grid float" style="min-height: 70px; max-height: 60px" data-expected-width="64" data-expected-height="84"> 37 <div class="item" data-expected-width="50" data-expected-height="10"></div> 38 <div class="item" data-expected-width="50" data-expected-height="27"></div> 39 </div> 40 <div class="grid float" style="height: 70px" data-expected-width="64" data-expected-height="84"> 41 <div class="item" data-expected-width="50" data-expected-height="10"></div> 42 <div class="item" data-expected-width="50" data-expected-height="27"></div> 43 </div> 44 45 <br clear="all"> 46 47 <div class="grid float" style="min-height: 108px" data-expected-width="64" data-expected-height="122"> 48 <div class="item" data-expected-width="50" data-expected-height="15"></div> 49 <div class="item" data-expected-width="50" data-expected-height="60"></div> 50 </div> 51 <div class="grid float" style="min-height: 108px; max-height: 60px" data-expected-width="64" data-expected-height="122"> 52 <div class="item" data-expected-width="50" data-expected-height="15"></div> 53 <div class="item" data-expected-width="50" data-expected-height="60"></div> 54 </div> 55 <div class="grid float" style="height: 108px" data-expected-width="64" data-expected-height="122"> 56 <div class="item" data-expected-width="50" data-expected-height="15"></div> 57 <div class="item" data-expected-width="50" data-expected-height="60"></div> 58 </div> 59 60 <br clear="all"> 61 62 <div class="grid float min-height-max-content" data-expected-width="64" data-expected-height="97"> 63 <div class="item" data-expected-width="50" data-expected-height="10"></div> 64 <div class="item" data-expected-width="50" data-expected-height="40"></div> 65 </div> 66 <div class="grid float min-height-max-content max-height-min-content" data-expected-width="64" data-expected-height="97"> 67 <div class="item" data-expected-width="50" data-expected-height="10"></div> 68 <div class="item" data-expected-width="50" data-expected-height="40"></div> 69 </div> 70 <div class="grid float max-content" data-expected-width="64" data-expected-height="97"> 71 <div class="item" data-expected-width="50" data-expected-height="10"></div> 72 <div class="item" data-expected-width="50" data-expected-height="40"></div> 73 </div> 74 75 <br clear="all"> 76 77 <div class="float min-content"> 78 <div class="grid min-height-max-content" data-expected-width="64" data-expected-height="97"> 79 <div class="item" data-expected-width="50" data-expected-height="10"></div> 80 <div class="item" data-expected-width="50" data-expected-height="40"></div> 81 </div> 82 </div> 83 <div class="float max-content"> 84 <div class="grid min-height-max-content max-height-min-content" data-expected-width="64" data-expected-height="97"> 85 <div class="item" data-expected-width="50" data-expected-height="10"></div> 86 <div class="item" data-expected-width="50" data-expected-height="40"></div> 87 </div> 88 </div> 89 <div class="float fit-content"> 90 <div class="grid max-content" data-expected-width="64" data-expected-height="97"> 91 <div class="item" data-expected-width="50" data-expected-height="10"></div> 92 <div class="item" data-expected-width="50" data-expected-height="40"></div> 93 </div> 94 </div> 95 96 </body>