flexbox-collapsed-item-horiz-003.html (1806B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title>CSS Test: Testing that strut formation (from visibility:collapse) happens *after* lines have been stretched</title> 9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 10 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-visibility"> 11 <link rel="match" href="flexbox-collapsed-item-horiz-003-ref.html"> 12 <meta charset="utf-8"> 13 <style> 14 .flexContainer { 15 display: flex; 16 flex-wrap: wrap; 17 align-content: stretch; /* Initial value; just here for emphasis */ 18 width: 25px; 19 height: 60px; 20 background: yellow; 21 border: 1px dotted black; 22 float: left; 23 margin: 5px; 24 } 25 .collapsedItem { 26 visibility: collapse; 27 width: 10px; 28 } 29 .shortItem { 30 width: 25px; 31 height: 10px; 32 background: purple; 33 } 34 .tallItem { 35 width: 10px; 36 height: 30px; 37 background: olive; 38 } 39 </style> 40 </head> 41 <body> 42 <!-- In this testcase, the first flex line initially has a cross-size of 43 10px, and the second flex line has a cross-size of 30px. Both lines are 44 stretched by 10px each (to hit the container's total cross-size, 60px). 45 Then, we handle "visibility:collapse" and convert the collapsed item 46 into a strut with the second line's stretched cross-size (40px), and we 47 restart flex layout. This strut then ends up in the *first* line (since 48 it has 0 main-size), which means both flex lines end up being 40px tall. 49 --> 50 <div class="flexContainer"> 51 <div class="shortItem"></div> 52 <div class="collapsedItem"></div> 53 <div class="tallItem"></div> 54 </div> 55 </body> 56 </html>