flex-content-resolution-columns-002.html (7009B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Grid Layout Test: Auto repeat tracks, grid-template-columns and minmax sizes.</title> 4 <link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizes"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit"> 7 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=235258"> 8 <link rel="stylesheet" href="/fonts/ahem.css"> 9 <link rel="stylesheet" href="/css/support/grid.css"> 10 <meta name="assert" content="Test that resolving auto tracks on grid items inside containers using minmax() with grid-template-columns works properly." /> 11 12 <style> 13 .gridMaxMaxContent { 14 grid-template-columns: minmax(10px, max-content) minmax(10px, 1fr); 15 grid-template-rows: 50px; 16 } 17 18 .gridMinMinContent { 19 grid-template-columns: minmax(10px, 1fr) minmax(min-content, 50px); 20 grid-template-rows: 50px; 21 } 22 23 .gridWithIntrinsicSizeBiggerThanFlex { 24 grid-template-columns: minmax(min-content, 0.5fr) minmax(18px, 2fr); 25 grid-template-rows: 50px; 26 } 27 28 .gridShrinkBelowItemsIntrinsicSize { 29 grid-template-columns: minmax(0px, 1fr) minmax(0px, 2fr); 30 grid-template-rows: 50px; 31 } 32 33 .gridWithNonFlexingItems { 34 grid-template-columns: 40px minmax(min-content, 1fr) auto minmax(20px, 2fr); 35 grid-template-rows: 50px; 36 } 37 38 .firstRowThirdColumn { 39 grid-column: 3; 40 grid-row: 1; 41 } 42 .firstRowFourthColumn { 43 grid-column: 4; 44 grid-row: 1; 45 } 46 </style> 47 48 <script src="/resources/testharness.js"></script> 49 <script src="/resources/testharnessreport.js"></script> 50 <script src="/resources/check-layout-th.js"></script> 51 <script type="text/javascript"> 52 setup({ explicit_done: true }); 53 </script> 54 55 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 56 57 <div class="constrainedContainer"> 58 <div class="grid gridMaxMaxContent"> 59 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50">XXXXX</div> 60 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div> 61 </div> 62 </div> 63 64 <!-- Allow the extra logical space distribution to occur. --> 65 <div style="width: 40px; height: 10px"> 66 <div class="grid gridMaxMaxContent"> 67 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="30" data-expected-height="50">XXXXX</div> 68 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div> 69 </div> 70 </div> 71 72 <div style="width: 110px; height: 10px;"> 73 <div class="grid gridMaxMaxContent"> 74 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX</div> 75 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="60" data-expected-height="50"></div> 76 </div> 77 </div> 78 79 80 <div class="constrainedContainer"> 81 <div class="grid gridMinMinContent"> 82 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50">XX XX</div> 83 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="20" data-expected-height="50">XX XX</div> 84 </div> 85 </div> 86 87 <!-- Allow the extra logical space distribution to occur. --> 88 <div style="width: 40px; height: 10px"> 89 <div class="grid gridMinMinContent"> 90 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50">XX XX</div> 91 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="30" data-expected-height="50">XX XX</div> 92 </div> 93 </div> 94 95 <div style="width: 110px; height: 10px;"> 96 <div class="grid gridMinMinContent"> 97 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="60" data-expected-height="50">XX XX</div> 98 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="50" data-expected-height="50">XX XX</div> 99 </div> 100 </div> 101 102 103 <div style="width: 220px; height: 10px;"> 104 <div class="grid gridWithIntrinsicSizeBiggerThanFlex"> 105 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="200" data-expected-height="50"> 106 <div style="display: inline-block; width: 200px;"></div> 107 </div> 108 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="20" data-expected-height="50"></div> 109 </div> 110 </div> 111 112 113 <div style="width: 120px; height: 10px;"> 114 <div class="grid gridShrinkBelowItemsIntrinsicSize"> 115 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"> 116 <div style="display: inline-block; width: 200px;"></div> 117 </div> 118 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="80" data-expected-height="50">XXXXXXXXXX</div> 119 </div> 120 </div> 121 122 123 <!-- No space available for the <flex> --> 124 <div style="width: 220px; height: 10px;"> 125 <div class="grid gridWithNonFlexingItems"> 126 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div> 127 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"> 128 <div style="display: inline-block; width: 100px;"></div> 129 </div> 130 <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="100" data-expected-height="50">XXXXXXXXXX XXXXXXXXX</div> 131 <div class="sizedToGridArea firstRowFourthColumn" data-expected-width="20" data-expected-height="50"></div> 132 </div> 133 </div> 134 135 <!-- The second track should be sized after the min-content as the <flex> value should be too small. --> 136 <div style="width: 380px; height: 10px;"> 137 <div class="grid gridWithNonFlexingItems"> 138 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div> 139 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"> 140 <div style="display: inline-block; width: 100px;"></div> 141 </div> 142 <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50">XXXXXXXXXX XXXXXXXXX</div> 143 <div class="sizedToGridArea firstRowFourthColumn" data-expected-width="40" data-expected-height="50"></div> 144 </div> 145 </div> 146 147 <div style="width: 400px; height: 10px;"> 148 <div class="grid gridWithNonFlexingItems"> 149 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div> 150 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"> 151 <div style="display: inline-block; width: 100px;"></div> 152 </div> 153 <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50">XXXXXXXXXX XXXXXXXXX</div> 154 <div class="sizedToGridArea firstRowFourthColumn" data-expected-width="60" data-expected-height="50"></div> 155 </div> 156 </div> 157 158 </body> 159 </html>