flex-sizing-columns-min-max-width-001.html (4620B)
1 <!DOCTYPE HTML> 2 <title>CSS Grid Layout Test: min and max width when computing the flex column</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/width-keyword-classes.css" rel="stylesheet"> 8 <meta name="assert" content="This test ensures that minimum and maximum widths are used to compute the flex fraction for grid columns."/> 9 <style> 10 .grid { 11 margin: 3px; 12 grid: 50px / minmax(10px, 1fr) minmax(10px, 4fr); 13 grid-column-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 <script src="/resources/testharness.js"></script> 24 <script src="/resources/testharnessreport.js"></script> 25 <script src="/resources/check-layout-th.js"></script> 26 <body onload="checkLayout('.grid')"> 27 28 <p>This test PASS if all the grids in the same row look the same.</p> 29 30 <div class="grid float" style="max-width: 70px" data-expected-height="64" data-expected-width="84"> 31 <div class="item" data-expected-height="50" data-expected-width="10"></div> 32 <div class="item" data-expected-height="50" data-expected-width="27"></div> 33 </div> 34 <div class="grid float" style="min-width: 70px; max-width: 60px" data-expected-height="64" data-expected-width="84"> 35 <div class="item" data-expected-height="50" data-expected-width="10"></div> 36 <div class="item" data-expected-height="50" data-expected-width="27"></div> 37 </div> 38 <div class="grid float" style="width: 70px" data-expected-height="64" data-expected-width="84"> 39 <div class="item" data-expected-height="50" data-expected-width="10"></div> 40 <div class="item" data-expected-height="50" data-expected-width="27"></div> 41 </div> 42 43 <br clear="all"> 44 45 <div class="grid float" style="min-width: 108px" data-expected-height="64" data-expected-width="122"> 46 <div class="item" data-expected-height="50" data-expected-width="15"></div> 47 <div class="item" data-expected-height="50" data-expected-width="60"></div> 48 </div> 49 <div class="grid float" style="min-width: 108px; max-width: 60px" data-expected-height="64" data-expected-width="122"> 50 <div class="item" data-expected-height="50" data-expected-width="15"></div> 51 <div class="item" data-expected-height="50" data-expected-width="60"></div> 52 </div> 53 <div class="grid float" style="width: 108px" data-expected-height="64" data-expected-width="122"> 54 <div class="item" data-expected-height="50" data-expected-width="15"></div> 55 <div class="item" data-expected-height="50" data-expected-width="60"></div> 56 </div> 57 58 <br clear="all"> 59 60 <div class="grid float min-width-max-content" data-expected-height="64" data-expected-width="97"> 61 <div class="item" data-expected-height="50" data-expected-width="10"></div> 62 <div class="item" data-expected-height="50" data-expected-width="40"></div> 63 </div> 64 <div class="grid float min-width-max-content max-width-min-content" data-expected-height="64" data-expected-width="97"> 65 <div class="item" data-expected-height="50" data-expected-width="10"></div> 66 <div class="item" data-expected-height="50" data-expected-width="40"></div> 67 </div> 68 <div class="grid float max-content" data-expected-height="64" data-expected-width="97"> 69 <div class="item" data-expected-height="50" data-expected-width="10"></div> 70 <div class="item" data-expected-height="50" data-expected-width="40"></div> 71 </div> 72 73 <br clear="all"> 74 75 <div class="float min-content"> 76 <div class="grid min-width-max-content" data-expected-height="64" data-expected-width="97"> 77 <div class="item" data-expected-height="50" data-expected-width="10"></div> 78 <div class="item" data-expected-height="50" data-expected-width="40"></div> 79 </div> 80 </div> 81 <div class="float max-content"> 82 <div class="grid min-width-max-content max-width-min-content" data-expected-height="64" data-expected-width="97"> 83 <div class="item" data-expected-height="50" data-expected-width="10"></div> 84 <div class="item" data-expected-height="50" data-expected-width="40"></div> 85 </div> 86 </div> 87 <div class="float fit-content"> 88 <div class="grid max-content" data-expected-height="64" data-expected-width="97"> 89 <div class="item" data-expected-height="50" data-expected-width="10"></div> 90 <div class="item" data-expected-height="50" data-expected-width="40"></div> 91 </div> 92 </div> 93 94 </body>