flexbox-collapsed-item-horiz-001.html (2862B)
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 visibility:collapse on a flex item in a single-line flex container maintains the containers's cross size, but doesn't otherwise impact flex layout</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-001-ref.html"> 12 <meta charset="utf-8"> 13 <style> 14 .flexContainer { 15 display: flex; 16 background: yellow; 17 border: 1px dotted black; 18 float: left; 19 margin: 5px; 20 } 21 .flexContainer > * { 22 /* All flex items have 20px base size */ 23 width: 20px; 24 } 25 .collapse { 26 visibility: collapse; 27 } 28 .flexible { 29 flex: 1 auto; 30 } 31 .heightTall { 32 height: 40px; 33 background: purple; 34 } 35 .heightAuto { 36 background: teal; 37 } 38 .heightShort { 39 height: 10px; 40 background: pink; 41 } 42 </style> 43 </head> 44 <body> 45 <!-- FIRST ROW: --> 46 <!-- Just one (collapsed) flex item, which ends up establishing 47 the container's size (even though it's collapsed): --> 48 <div class="flexContainer"> 49 <div class="heightTall collapse"></div> 50 </div> 51 52 <div style="clear: both"></div> 53 54 <!-- SECOND ROW: --> 55 <!-- One collapsed flex item, one short flex item. 56 (Container ends up with collapsed item's height) --> 57 <div class="flexContainer"> 58 <div class="heightTall collapse"></div> 59 <div class="heightShort"></div> 60 </div> 61 <!-- (same, but with items in opposite order) --> 62 <div class="flexContainer"> 63 <div class="heightShort"></div> 64 <div class="heightTall collapse"></div> 65 </div> 66 67 <div style="clear: both"></div> 68 69 <!-- THIRD ROW: --> 70 <!-- One collapsed flex item, one stretched flex item. 71 (Container and stretched item end up with collapsed item's height) --> 72 <div class="flexContainer"> 73 <div class="heightTall collapse"></div> 74 <div class="heightAuto"></div> 75 </div> 76 <!-- (again, with items in opposite order) --> 77 <div class="flexContainer"> 78 <div class="heightAuto"></div> 79 <div class="heightTall collapse"></div> 80 </div> 81 82 <div style="clear: both"></div> 83 84 <!-- FOURTH ROW: --> 85 <!-- One collapsed flex item, one other flex item; both are flexible. 86 (The non-collapsed one should take all of the available width.) --> 87 <div class="flexContainer"> 88 <div class="heightAuto flexible collapse"></div> 89 <div class="heightTall flexible"></div> 90 </div> 91 <!-- (again, with items in opposite order) --> 92 <div class="flexContainer"> 93 <div class="heightTall flexible"></div> 94 <div class="heightAuto flexible collapse"></div> 95 </div> 96 97 </body> 98 </html>