flexbox-collapsed-item-horiz-002.html (3394B)
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 multi-line flex container creates struts, and that they can migrate between lines</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-002-ref.html"> 12 <meta charset="utf-8"> 13 <style> 14 .flexContainer { 15 display: flex; 16 flex-wrap: wrap; 17 18 /* These let us show where each flex line begins (and hence, how tall 19 the flex lines end up) */ 20 align-content: flex-start; 21 align-items: flex-start; 22 23 width: 30px; 24 background: yellow; 25 border: 1px dotted black; 26 float: left; 27 margin: 5px; 28 } 29 .collapsedItem { 30 visibility: collapse; 31 width: 15px; 32 height: 25px; 33 } 34 .halfWidthItem { 35 width: 15px; 36 height: 15px; 37 background: teal; 38 } 39 .fullWidthItem { 40 width: 30px; 41 height: 20px; 42 background: purple; 43 } 44 .veryTallItem { 45 width: 15px; 46 height: 40px; 47 background: olive; 48 } 49 </style> 50 </head> 51 <body> 52 <!-- FIRST ROW: --> 53 <!-- One collapsed flex item, at the beginning of a flex line, which 54 ends up establishing its flex line's cross size: --> 55 <div class="flexContainer"> 56 <div class="collapsedItem"></div> 57 <div class="halfWidthItem"></div> 58 <div class="fullWidthItem"></div> 59 </div> 60 <!-- ...and now with it being at the end of that flex line: --> 61 <div class="flexContainer"> 62 <div class="halfWidthItem"></div> 63 <div class="collapsedItem"></div> 64 <div class="fullWidthItem"></div> 65 </div> 66 67 <div style="clear: both"></div> 68 69 <!-- SECOND ROW: --> 70 <!-- One collapsed flex item, initially in its own line. It ends 71 up being merged into another line after it collapses, due to its 72 (post-collapse) zero main-size. --> 73 <div class="flexContainer"> 74 <div class="collapsedItem"></div> 75 <div class="fullWidthItem"></div> 76 <div class="fullWidthItem"></div> 77 </div> 78 <div class="flexContainer"> 79 <div class="fullWidthItem"></div> 80 <div class="collapsedItem"></div> 81 <div class="fullWidthItem"></div> 82 </div> 83 <div class="flexContainer"> 84 <div class="fullWidthItem"></div> 85 <div class="fullWidthItem"></div> 86 <div class="collapsedItem"></div> 87 </div> 88 89 <div style="clear: both"></div> 90 91 <!-- THIRD ROW: --> 92 <!-- One collapsed flex item, initially in a line with an even-taller item. 93 The collapsed item ends up shifting into another line after it 94 collapses, but it carries the taller item's cross size with it, as its 95 strut size. --> 96 <div class="flexContainer"> 97 <div class="fullWidthItem"></div> 98 <div class="collapsedItem"></div> 99 <div class="veryTallItem"></div> 100 </div> 101 <!-- ...and now with two (differently-sized) struts in first line: 102 (the one that's taller - due to being initially grouped with the tall 103 item - wins out.) --> 104 <div class="flexContainer"> 105 <div class="collapsedItem"></div> 106 <div class="fullWidthItem"></div> 107 <div class="collapsedItem"></div> 108 <div class="veryTallItem"></div> 109 </div> 110 </body> 111 </html>