flex-content-resolution-columns-001.html (7953B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Grid Layout Test: Auto repeat tracks, grid-template-columns and flexible lengths.</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 using <flex> values with grid-template-columns works properly." /> 11 12 <style> 13 .gridFlexContent { 14 grid-template-columns: 1fr 1fr; 15 grid-template-rows: 50px; 16 } 17 .gridMaxFlexContent { 18 grid-template-columns: minmax(30px, 2fr); 19 grid-template-rows: 50px; 20 } 21 .gridTwoMaxFlexContent { 22 grid-template-columns: minmax(10px, 1fr) minmax(10px, 2fr); 23 grid-template-rows: 50px; 24 } 25 .gridTwoDoubleMaxFlexContent { 26 grid-template-columns: minmax(10px, 0.5fr) minmax(10px, 2fr); 27 grid-template-rows: 50px; 28 } 29 .gridIgnoreSecondGridItem { 30 grid-template-columns: minmax(300px, 3fr) minmax(150px, 1fr); 31 grid-template-rows: 50px; 32 } 33 .gridRespectBaseSize { 34 grid-template-columns: minmax(75px, 1fr) minmax(0px, 2fr); 35 grid-template-rows: 50px; 36 } 37 .gridRespectProportions { 38 grid-template-columns: minmax(0px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr); 39 grid-template-rows: 50px; 40 } 41 .gridRespectBaseSizeProportions { 42 grid-template-columns: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr); 43 grid-template-rows: 50px; 44 } 45 .gridRespectBaseSizeBeforeProportions { 46 grid-template-columns: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr); 47 grid-template-rows: 50px; 48 } 49 .firstRowThirdColumn { 50 background-color: yellow; 51 grid-column: 3; 52 grid-row: 1; 53 } 54 </style> 55 56 <script src="/resources/testharness.js"></script> 57 <script src="/resources/testharnessreport.js"></script> 58 <script src="/resources/check-layout-th.js"></script> 59 <script type="text/javascript"> 60 setup({ explicit_done: true }); 61 </script> 62 63 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 64 65 <div class="constrainedContainer" style="position: relative"> 66 <div class="grid gridFlexContent"> 67 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="50">XXX</div> 68 <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="30" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX</div> 69 </div> 70 </div> 71 72 <div class="constrainedContainer"> 73 <div class="grid gridMaxFlexContent"> 74 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="30" data-expected-height="50"></div> 75 </div> 76 </div> 77 78 <!-- Allow the extra logical space distribution to occur. --> 79 <div style="width: 40px; height: 10px"> 80 <div class="grid gridMaxFlexContent"> 81 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div> 82 </div> 83 </div> 84 85 <div style="width: 100px; height: 10px;"> 86 <div class="grid gridMaxFlexContent"> 87 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="100" data-expected-height="50"></div> 88 </div> 89 </div> 90 91 92 <div class="constrainedContainer"> 93 <div class="grid gridTwoMaxFlexContent"> 94 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div> 95 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div> 96 </div> 97 </div> 98 99 <!-- Allow the extra logical space distribution to occur. --> 100 <div style="width: 60px; height: 10px"> 101 <div class="grid gridTwoMaxFlexContent"> 102 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="20" data-expected-height="50"></div> 103 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="40" data-expected-height="50"></div> 104 </div> 105 </div> 106 107 <div style="width: 120px; height: 10px;"> 108 <div class="grid gridTwoMaxFlexContent"> 109 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div> 110 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="80" data-expected-height="50"></div> 111 </div> 112 </div> 113 114 115 <div class="constrainedContainer"> 116 <div class="grid gridTwoDoubleMaxFlexContent"> 117 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div> 118 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div> 119 </div> 120 </div> 121 122 <!-- Allow the extra logical space distribution to occur. --> 123 <div style="width: 60px; height: 10px"> 124 <div class="grid gridTwoDoubleMaxFlexContent"> 125 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="12" data-expected-height="50"></div> 126 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="48" data-expected-height="50"></div> 127 </div> 128 </div> 129 130 <div style="width: 120px; height: 10px;"> 131 <div class="grid gridTwoDoubleMaxFlexContent"> 132 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="24" data-expected-height="50"></div> 133 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="96" data-expected-height="50"></div> 134 </div> 135 </div> 136 137 138 <!-- Custom test for a corner case. --> 139 <div style="width: 570px; height: 10px;"> 140 <div class="grid gridIgnoreSecondGridItem"> 141 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="420" data-expected-height="50"></div> 142 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="150" data-expected-height="50"></div> 143 </div> 144 </div> 145 146 <!-- Flex track length must be at least its baseSize. --> 147 <div style="width: 100px; height: 10px;"> 148 <div class="grid gridRespectBaseSize"> 149 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="75" data-expected-height="50"></div> 150 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="25" data-expected-height="50"></div> 151 </div> 152 </div> 153 154 <!-- Flex track lengths must be proportional to their flex factors.. --> 155 <div style="width: 275px; height: 10px;"> 156 <div class="grid gridRespectProportions"> 157 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="25" data-expected-height="50"></div> 158 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="50" data-expected-height="50"></div> 159 <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50"></div> 160 </div> 161 </div> 162 163 <!-- Flex track lengths must be proportional but still respecting their base sizes. --> 164 <div style="width: 350px; height: 10px;"> 165 <div class="grid gridRespectBaseSizeProportions"> 166 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div> 167 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div> 168 <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50"></div> 169 </div> 170 </div> 171 172 <!-- Not enough space to respect proportions, because minTrackBreadh it's a harder requirement --> 173 <div style="width: 275px; height: 10px;"> 174 <div class="grid gridRespectBaseSizeBeforeProportions"> 175 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div> 176 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="75" data-expected-height="50"></div> 177 <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="150" data-expected-height="50"></div> 178 </div> 179 </div> 180 181 </body> 182 </html>