row-use-cases-001.html (8532B)
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 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <meta name="assert" 8 content="Requested use cases from our issue tracker that were duplicated or included in the bug report for the new algorithm. These are intentionally not very reduced from their original form with liberal pass conditions." /> 9 10 <style> 11 section.bugreport { 12 outline: 1px solid grey; 13 margin-bottom: 25px; 14 padding: 3px; 15 } 16 17 #bug423112 .container { 18 border: 1px solid lightgrey; 19 margin: 20px; 20 padding: 8px; 21 display: flex; 22 flex-flow: column; 23 } 24 25 #bug423112 .h-box { 26 display: flex; 27 flex-flow: row; 28 flex: none; 29 justify-content: flex-start; 30 align-items: stretch; 31 } 32 33 #bug423112 .auto { 34 flex: 0 0 auto; 35 } 36 37 #bug423112 .none { 38 flex: none; 39 } 40 41 #bug423112 .gap1-fails { 42 flex: 0 0 5px; 43 } 44 45 #bug423112 .gap2-fails { 46 flex: 0 0 30px; 47 } 48 49 #bug423112 .word { 50 display: inline-block; 51 height: 10px; 52 width: 35px; 53 background: orange; 54 } 55 56 #bug464210 .FlexOuterContainer { 57 border: 3px solid black; 58 display: flex; 59 margin: 1em; 60 } 61 62 #bug464210 .FlexInnerContainer { 63 border: 3px solid red; 64 display: flex; 65 flex: 0 0 auto; 66 } 67 68 #bug464210 .FlexItem { 69 background: rgba(0, 0, 0, .2); 70 flex: 0 0 100px; 71 } 72 73 #bug533627c3 .outer { 74 display: flex; 75 padding: 10px; 76 } 77 78 #bug533627c3 .middle, 79 #bug533627c3 .middle2 { 80 display: flex; 81 flex-shrink: 0; 82 background: red; 83 padding: 10px; 84 } 85 86 #bug533627c3 .inner { 87 flex-basis: 258px; 88 flex-shrink: 0; 89 display: flex; 90 flex-grow: 0; 91 background: green; 92 } 93 94 #bug533627c3 .inner2 { 95 width: 258px; 96 flex-shrink: 0; 97 display: flex; 98 flex-grow: 0; 99 background: green; 100 } 101 102 #bug441768 div { 103 display: flex; 104 } 105 106 #bug1144312 .grid-y { 107 flex-direction: column; 108 flex-wrap: wrap; 109 } 110 111 #bug1144312 .grid-x { 112 flex-direction: row 113 } 114 115 #bug1144312 .grid-x>* { 116 flex-basis: 0 117 } 118 119 #bug1144312 [class*=grid] { 120 display: flex; 121 gap: 1px 122 } 123 124 #bug1144312 .grid-y { 125 background: lightblue 126 } 127 128 #bug1144312 .grid-y:not(:first-child) { 129 margin-top: 1.5rem 130 } 131 132 #bug1144312 [class*=grid]>* { 133 flex-grow: 1; 134 border: 3px solid blue; 135 padding: 1px; 136 } 137 138 #bug1144312 .nowrap div { 139 border-color: purple 140 } 141 142 #bug1144312 .nowrap { 143 background: Thistle; 144 flex-wrap: nowrap; 145 } 146 147 #bug1144312 div { 148 font: 12px/1 Ahem; 149 } 150 151 </style> 152 153 <section id="bug423112" class="bugreport"> 154 <p>https://bugs.chromium.org/p/chromium/issues/detail?id=423112</p> 155 <div class="container"> 156 <div class="h-box"> 157 <div class="h-box"> 158 <input type="checkbox" class="none"> 159 <div class="gap2-fails"></div> 160 <span class="none" id="left-item"> 161 first checkbox example 162 </span> 163 </div> 164 <div class="h-box"> 165 <input type="checkbox" class="none" id="right-item"> 166 <div class="gap2-fails"></div> 167 <span class="auto"> 168 second checkbox example 169 </span> 170 </div> 171 </div> 172 </div> 173 </section> 174 175 <section id="bug464210" class="bugreport"> 176 <p>https://bugs.chromium.org/p/chromium/issues/detail?id=464210</p> 177 <div class="FlexOuterContainer"> 178 <div class="FlexInnerContainer"> 179 <div class="FlexItem">MMMMM</div> 180 <div id="right-item" class="FlexItem">MMMMM</div> 181 </div> 182 </div> 183 </section> 184 185 <section id="bug533627c3" class="bugreport"> 186 <p>https://bugs.chromium.org/p/chromium/issues/detail?id=533627#c3</p> 187 <div class="outer"> 188 <div class="middle"> 189 <div class="inner"> 190 hello 191 </div> 192 </div> 193 </div> 194 <div class="outer"> 195 <div class="middle2"> 196 <div class="inner2"> 197 hello 198 </div> 199 </div> 200 </div> 201 </section> 202 203 <section id="bug441768" class="bugreport"> 204 <p>https://bugs.chromium.org/p/chromium/issues/detail?id=441768 author wants 205 below blue block to have 0 width</p> 206 <div> 207 <!-- shipping: .middle has flex-basis=200px (from its max-content), and 208 used min-width=200px (from min-content) --> 209 <!-- author wants .middle flex-basis = 0, so author wants .middle 210 max-content = 0 --> 211 <!-- that means author also needs min-content = 0 --> 212 <!-- so width:200 item needs to contribute flex-basis to both min and max 213 --> 214 <div style="height: 100px; background: blue; align-self: flex-start;" 215 class="middle"> 216 <div style="width: 200px; flex: 0;"></div> 217 </div> 218 </div> 219 </section> 220 221 <section id="bug1144312" class="bugreport"> 222 <p>https://bugs.chromium.org/p/chromium/issues/detail?id=1144312</p> 223 <!-- This case needs max-content to use flex fractions. --> 224 <div class="grid-y" id="top"> 225 <!-- broke: grid-x intrinsic sizes are ("95", "154") --> 226 <!-- works: grid-x intrinsic sizes are ("165", "283") --> 227 <!-- broke: grid-x main inner size = 146--> 228 <!-- works: grid-x main inner size = 275--> 229 <!-- to determine its vertical flex basis, grid-x lays out with width set to max content*. Then, both of its items have flex basis 0 and same grow factor, so they get flexed to each have approximately half of first item's max-width. This makes "phantom whitespace" wrap, which makes it too tall. 230 * this doesn't happen in the nowrap case, which stretches grid-x's width. --> 231 <div class="grid-x"> 232 <!-- while laying out grid-x to get its flex-basis: 233 when laying out the two items for cross sizes: 234 broke: 1st gets 78px fixed inline size, returns height 48px 235 works: 1st gets 137px fixed inline size, returns height 28px 236 broke: 2nd gets 67px fixed inline size, returns height 8px 237 works: 2nd gets 137px fixed inline size, returns height 8px 238 --> 239 <div>phantom whitespace</div> 240 <div></div> 241 </div> 242 </div> 243 244 <div class="grid-y" id="middle"> 245 <div> 246 <div class="grid-x"> 247 <div>also phantom whitespace</div> 248 <div></div> 249 </div> 250 </div> 251 </div> 252 253 <div class="grid-y nowrap" id="bottom"> 254 <div class="grid-x"> 255 <div>no more phantom whitespace</div> 256 <div></div> 257 </div> 258 </div> 259 </section> 260 261 <section id="bug1154243" class="bugreport"> 262 <p>https://bugs.chromium.org/p/chromium/issues/detail?id=1154243</p> 263 <div 264 style="display: flex; width: min-content; border: 2px solid blue; font: 12px/1 Ahem;" 265 id="container"> 266 <!-- shipping: min-content width of container is sum of min-contents (2x 267 the width of the word "content") 268 author needs: each `flex: 0 0 auto` item contributes flex-basis to 269 container min-content because they can't shrink from their flex bases 270 --> 271 <div style="flex-shrink: 0">Test content</div> 272 <div style="background: yellow; flex-shrink: 0" id="right">Test content 273 </div> 274 </div> 275 </section> 276 277 <script> 278 test(_ => { 279 let left = bug423112.querySelector("#left-item"); 280 let right = bug423112.querySelector("#right-item"); 281 assert_less_than_equal(left.getBoundingClientRect().right, right.getBoundingClientRect().left); 282 }, "left < right"); 283 284 test(_ => { 285 const container = bug464210.querySelector(".FlexInnerContainer"); 286 const right = bug464210.querySelector("#right-item"); 287 assert_less_than_equal(right.getBoundingClientRect().right, container.getBoundingClientRect().right); 288 }, "no overflow"); 289 290 test(_ => { 291 const middle = bug533627c3.querySelector(".middle"); 292 const middle2 = bug533627c3.querySelector(".middle2"); 293 assert_equals(middle.offsetWidth, middle2.offsetWidth); 294 }, "same widths"); 295 296 test(_ => { 297 const middle = bug441768.querySelector(".middle"); 298 assert_equals(middle.offsetWidth, 0); 299 }, "zero width"); 300 301 test(_ => { 302 const top = bug1144312.querySelector("#top"); 303 const middle = bug1144312.querySelector("#middle"); 304 const bottom = bug1144312.querySelector("#bottom"); 305 assert_equals(top.offsetHeight, bottom.offsetHeight); 306 assert_equals(middle.offsetHeight, bottom.offsetHeight); 307 }, "same heights"); 308 309 test(_ => { 310 const container = bug1154243.querySelector("#container"); 311 const right = bug1154243.querySelector("#right"); 312 assert_less_than_equal(right.getBoundingClientRect().right, container.getBoundingClientRect().right) 313 }, "no overflow 2"); 314 315 </script>