flex-minimum-height-flex-items-025.html (2161B)
1 <!DOCTYPE html> 2 <link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> 3 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> 4 <link rel="bookmark" href="https://crbug.com/1033476"> 5 <meta name="assert" content="Column flex item's height does not influence its min-height content size suggestion in a varitey of scenarios."> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/check-layout-th.js"></script> 10 11 <style> 12 .outer-column-flexbox { 13 display: flex; 14 flex-direction: column; 15 width: 100px; 16 margin-bottom: 10px; /* Just for visually spacing things out */ 17 } 18 </style> 19 20 <body onload="checkLayout('.outer-column-flexbox > div');"> 21 22 <div id=log></div> 23 24 <p>Test passes if there is a sequence of filled green squares.</p> 25 26 <!-- %height of descendant is not resolved against specified height for purposes of min-content sizing. --> 27 <div class=outer-column-flexbox> 28 <div style="flex-basis: 100px; height: 200px;" data-expected-height=100> 29 <div style="height: 100%; background: green;" data-expected-height=100></div> 30 </div> 31 </div> 32 33 <!-- Same as above, but with an orthogonal writing mode flex item. --> 34 <div class=outer-column-flexbox> 35 <div style="flex-basis: 100px; height: 200px; width: 100px; writing-mode: vertical-rl;" data-expected-height=100> 36 <div style="height: 100%; background: green;" data-expected-height=100></div> 37 </div> 38 </div> 39 40 <!-- Same as #1 but with a grid child of the flex item. --> 41 <div class=outer-column-flexbox> 42 <div style="flex-basis: 100px; height: 200px;" data-expected-height=100> 43 <div style="display: grid; height: 100%; background: green" data-expected-height=100></div> 44 </div> 45 </div> 46 47 <!-- Same as #1 but with a table child of the flex item that has a >0 intrinsic block size. --> 48 <div class=outer-column-flexbox> 49 <div style="flex-basis: 100px; height: 200px;" data-expected-height=100> 50 <table data-expected-height=100 style="height: 100%; width: 100%; background: green"> 51 <td> 52 <div style="height: 50px;"></div> 53 </td> 54 </table> 55 </div> 56 </div>