flex-aspect-ratio-026.html (4030B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS aspect-ratio: Test flex item's resolved height/min-height with border-box box-sizing in a column flex container</title> 4 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 5 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 6 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> 7 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum"> 8 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> 9 <link rel="match" href="../../reference/ref-filled-green-200px-square.html" /> 10 <style> 11 .flexContainer { 12 display: flex; 13 flex-direction: column; 14 float: left; 15 height: 1px; 16 } 17 .item { 18 background: green; 19 padding-left: 15px; 20 padding-top: 10px; 21 box-sizing: border-box; 22 } 23 .item > div { 24 height: 190px; /* Set the content size suggestion for flex item. */ 25 } 26 </style> 27 28 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 29 30 <!-- In all of the subtests here, each flex item's automatic minimum height is 31 resolved directly from its content size suggestion. Notably, these items 32 *do not* get a "transferred size suggestion", because they are all 33 *non-replaced* elements; and "transferred size suggestion" is only used 34 for resolving automatic minimum sizes on *replaced* elements. However, 35 note that we do "transfer" sizes through the aspect ratio, as part of 36 computing the content size suggestion and/or flex base size. --> 37 38 <!-- In the following four flex containers, the aspect-ratio works with border-box. --> 39 <div class="flexContainer" style="height: auto;"> 40 <!-- The border-box width 25px is transferred to the main axis, 41 yielding a resolved flex base size (border-box) of 200px. --> 42 <div class="item" style="min-height:0; width: 25px; aspect-ratio: 1/8;"><div></div></div> 43 </div> 44 45 <div class="flexContainer"> 46 <!-- The content size suggestion is 190px, i.e. the height of the item's 47 child div. --> 48 <div class="item" style="width: 25px; aspect-ratio: 1/1;"><div></div></div> 49 </div> 50 51 <div class="flexContainer"> 52 <!-- The content size suggestion is 190px, i.e. the height of the item's 53 child div. --> 54 <div class="item" style="min-width: 25px; aspect-ratio: 1/1;"><div></div></div> 55 </div> 56 57 <div class="flexContainer"> 58 <!-- The content size suggestion is 200px because the border-box max-width 59 25px is transferred to the main axis as the upper bound of its 60 border-box height. --> 61 <div class="item" style="max-width: 25px; width: 100px; aspect-ratio: 1/8;"> 62 <div style="height: 500px"></div> 63 </div> 64 </div> 65 66 <!-- In the following four flex containers, the aspect-ratio works with content-box 67 because its value contains 'auto'. --> 68 <div class="flexContainer" style="height: auto;"> 69 <!-- The content-box width 10px is transferred to the main axis, 70 yielding a resolved flex base size (content-box) of 190px. --> 71 <div class="item" style="min-height:0; width: 25px; aspect-ratio: auto 1/19;"><div></div></div> 72 </div> 73 74 <div class="flexContainer"> 75 <!-- The content size suggestion is 190px, i.e. the height of the item's 76 child div. --> 77 <div class="item" style="width: 25px; aspect-ratio: auto 1/1;"><div></div></div> 78 </div> 79 80 <div class="flexContainer"> 81 <!-- The content size suggestion is 190px, i.e. the height of the item's 82 child div. --> 83 <div class="item" style="min-width: 25px; aspect-ratio: auto 1/1;"><div></div></div> 84 </div> 85 86 <div class="flexContainer"> 87 <!-- The content size suggestion is 190px because the content-box max-width 88 10px is transferred to the main axis as the upper bound of its 89 content-box height.--> 90 <div class="item" style="max-width: 25px; width: 100px; aspect-ratio: auto 1/19;"> 91 <div style="height: 500px"></div> 92 </div> 93 </div> 94 </html>