row-005.html (6722B)
1 <!DOCTYPE html> 2 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> 3 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/check-layout-th.js"></script> 7 <meta name="assert" 8 content="min-content width is calculated correctly in a variety of scenarios with multiple flex items" /> 9 10 <style> 11 .zero-width { 12 width: 0px; 13 height: 100px; 14 margin-bottom: 20px; 15 } 16 17 .floating-flexbox { 18 display: flex; 19 outline: 5px solid blue; 20 height: 100px; 21 float: left; 22 } 23 24 .floating-flexbox>div:nth-child(1) { 25 background: yellow; 26 } 27 28 .floating-flexbox>div:nth-child(2) { 29 background: orange; 30 } 31 32 .floating-flexbox>div:nth-child(3) { 33 background: lightblue; 34 } 35 36 .floating-flexbox>div>div { 37 width: 100px; 38 } 39 </style> 40 41 <body onload="checkLayout('.floating-flexbox')"> 42 <div id="log"></div> 43 44 <div class="zero-width"> 45 <div class="floating-flexbox" data-expected-width="200"> 46 <!-- min contribution: 100 --> 47 <!-- desired fraction: -0.5 --> 48 <!-- chosen fraction <=0 and desired fraction <=0 and item can shrink, so it contributes its min-content contribution --> 49 <div style="flex: 1 1 200px; width:50px; min-width:0px;"> 50 <div></div> 51 </div> 52 <!-- chosen fraction <=0 and desired fraction <=0 and item can shrink, so it contributes its min-content contribution --> 53 <div style="flex: 1 1 400px; width:50px;"> 54 <div></div> 55 </div> 56 </div> 57 </div> 58 59 <div class="zero-width"> 60 <div class="floating-flexbox" data-expected-width="200"> 61 <!-- min contribution: 100 --> 62 <!-- min contribution - flex basis: -100 --> 63 <!-- desired fraction: -0.5 --> 64 <!-- chosen fraction <=0 and desired fraction <=0 and item can shrink, so it contributes its min-content contribution --> 65 <div style="flex: 1 1 200px; width:50px;"> 66 <div></div> 67 </div> 68 <!-- min contribution: 100 --> 69 <!-- min contribution - flex basis: -300 --> 70 <!-- desired fraction: -300/(2*400) = -0.375 --> 71 <!-- chosen fraction <=0 and desired fraction <=0 and item can shrink, so it contributes its min-content contribution --> 72 <div style="flex: 1 2 400px; width:50px;"> 73 <div></div> 74 </div> 75 </div> 76 </div> 77 78 <!-- This is same as above except for min-width auto is no longer in 79 effect. EdgeHTML renders it differently than the above. --> 80 <div class="zero-width"> 81 <div class="floating-flexbox" data-expected-width="200"> 82 <div style="flex: 1 1 200px; width:50px; min-width: 0px;"> 83 <div></div> 84 </div> 85 <div style="flex: 1 2 400px; width:50px; min-width: 0px;"> 86 <div></div> 87 </div> 88 </div> 89 </div> 90 91 <div class="zero-width"> 92 <!-- first item contributes 200px. second item contributes 100px --> 93 <div class="floating-flexbox" data-expected-width="300"> 94 <!-- min contribution: 100 --> 95 <!-- desired fraction: -inf --> 96 <!-- chosen fraction <= 0 and item can't shrink, so contribute flex basis --> 97 <div style="flex: 1 0 200px; width:50px;"> 98 <div></div> 99 </div> 100 <!-- min contribution: 100 --> 101 <!-- desired fraction: -0.75 --> 102 <!-- chosen fraction <= 0 and item CAN shrink, so contribute min contribution --> 103 <div style="flex: 1 1 400px; width:50px;"> 104 <div></div> 105 </div> 106 </div> 107 </div> 108 109 <div class="zero-width"> 110 <div class="floating-flexbox" data-expected-width="200"> 111 <!-- min contribution: 200 --> 112 <!-- min contribution - flex basis: 150 --> 113 <!-- desired fraction: 0 (because flex grow factor is 0) --> 114 <!-- chosen fraction <= 0 so contribute flex basis 50px --> 115 <!-- except flex basis is outside of used min/max, so contribute clamped flex basis = 100px --> 116 <div style="flex: 0 0 50px; width: 200px;"> 117 <div></div> 118 </div> 119 <!-- identical to above --> 120 <div style="flex: 0 0 50px; width: 200px;"> 121 <div></div> 122 </div> 123 </div> 124 </div> 125 126 <div class="zero-width"> 127 <!-- 200 + 400 = 600 --> 128 <div class="floating-flexbox" data-expected-width="600"> 129 <!-- min contribution: 200 --> 130 <!-- desired fraction: 150px --> 131 <!-- 50 + 1*150 = 200 --> 132 <div style="flex: 1 0 50px; width: 200px;"> 133 <div></div> 134 </div> 135 <!-- min contribution: 200 --> 136 <!-- desired fraction: 100px --> 137 <!-- 100 + 2*150 = 400 --> 138 <div style="flex: 2 0 100px; width: 200px;"> 139 <div></div> 140 </div> 141 </div> 142 </div> 143 144 <div class="zero-width"> 145 <!-- chosen fraction: 50px --> 146 <div class="floating-flexbox" data-expected-width="400"> 147 <!-- min contribution: 100 --> 148 <!-- desired fraction: -0.5 --> 149 <!-- final contribution = flex base size + product = 200px + 50px*0 = 200px --> 150 <div style="flex: 0 1 200px; width: 50px;"> 151 <div></div> 152 </div> 153 <!-- min contribution: 200 --> 154 <!-- desired fraction: (200px - 100px) / 2 = 50px --> 155 <!-- final contribution = flex base size + product = 100px + 50px*2 = 200px --> 156 <div style="flex: 2 0 100px; width: 200px;"> 157 <div></div> 158 </div> 159 </div> 160 </div> 161 <div class="zero-width"> 162 <!-- chosen fraction: 0 --> 163 <div class="floating-flexbox" data-expected-width="600"> 164 <!-- min contribution: 250 --> 165 <!-- wants to grow, but can't --> 166 <!-- desired fraction: 0 --> 167 <!-- final contribution: 100 --> 168 <div style="flex: 0 1 100px; width: 250px;"></div> 169 <!-- min contribution: 100 --> 170 <!-- wants to shrink, but can't --> 171 <!-- desired fraction: -inf --> 172 <!-- final contribution: 200 --> 173 <div style="flex: 1 0 200px; width: 100px;"></div> 174 <!-- min contribution: --> 175 <!-- doesn't have to change ---> 176 <!-- desired fraction: 0 --> 177 <!-- final contribution: 300 --> 178 <div style="flex: 1 1 300px; width: 300px;"></div> 179 </div> 180 </div> 181 182 <div class="zero-width"> 183 <!-- chosen fraction: 0 --> 184 <div class="floating-flexbox" data-expected-width="700"> 185 <!-- min contribution: 100 --> 186 <!-- wants to shrink, but can't --> 187 <!-- desired fraction: -inf --> 188 <!-- final contribution: 200 --> 189 <!-- In legacy and V2, this item gets 0 width. --> 190 <div style="flex: 0 10 300px; width: 200px;"></div> 191 <!-- min contribution: --> 192 <!-- doesn't have to change ---> 193 <!-- desired fraction: 0 --> 194 <!-- final contribution: 300 --> 195 <!-- In legacy and V2, this item gets all the width. --> 196 <div style="flex: 0 1 1000px; width: 500px;"> 197 </div> 198 </div> 199 </div> 200 201 </body>