flex-fragmented-with-float-descendant-001.html (1700B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test: Floats in fragmented flex container shouldn't improperly inflate overflow areas</title> 6 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1695509"> 8 <link rel="match" href="flex-fragmented-with-float-descendant-001-ref.html"> 9 <!-- This is a regression test for a Firefox bug where Firefox was improperly 10 contributing a float's stale position (at an intermediate point in 11 layout where it's pushed off the bottom of one column) to the overflow 12 areas. This test checks for this by using "outline" to visualize the 13 overflow areas, to ensure they're not unexpectedly large. --> 14 <style> 15 .multicol { 16 width: 300px; 17 columns: 100px auto; 18 max-height: 160px; 19 border: 3px solid pink; 20 } 21 .container { 22 display: flex; 23 } 24 .weird-flex-item { 25 border: 4px solid teal; 26 outline: 4px solid blue; 27 } 28 .tallFloat { 29 float: left; 30 border: 3px solid black; 31 height: 500px; 32 width: 100px; 33 background: yellow; 34 } 35 .float { 36 float: left; 37 background: cyan; 38 width: 100px; 39 } 40 .inside-float { 41 height: 30px; 42 width: 30px; 43 background: purple; 44 display: inline-block; 45 } 46 </style> 47 </head> 48 <body> 49 <div class="multicol"> 50 <div class="container"> 51 <div class="weird-flex-item"> 52 <div class="tallFloat"></div> 53 <br> 54 <div class="float"> 55 <div class="inside-float"> 56 </div> 57 </div> 58 </div> 59 </div> 60 </div> 61 </body> 62 </html>