table-as-item-cross-size.html (1348B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Flexbox: Correct cross size of Table with 'align-self: stretch'</title> 5 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-stretch"> 6 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> 7 <meta name="assert" content="This test ensures that flexbox computes a correct cross size of a <table> flex item with align-self: stretch."> 8 <style> 9 .container { 10 display: flex; 11 flex-direction: column; 12 height: 100px; 13 width: 50px; 14 } 15 .first { 16 flex: 1 1 auto; 17 background-color: blue; 18 } 19 .test { 20 flex: 0 0 auto; 21 background-color: green; 22 display: flex; 23 } 24 td { 25 padding: 23px; 26 } 27 </style> 28 </head> 29 <script src="/resources/testharness.js"></script> 30 <script src="/resources/testharnessreport.js"></script> 31 <script src="/resources/check-layout-th.js"></script> 32 <body onload="checkLayout('.test')"> 33 <div id=log></div> 34 <div class="container"> 35 <div class="first"> 36 </div> 37 <!-- This wrapper div is a row flexbox. It should get a height of 50px, matching the height 38 of the inner table. In particular, it should not be 0 on the basis that tables don't 39 have an intrinsic block-size. --> 40 <div class="test" data-expected-height=50> 41 <table> 42 <tr><td></td></tr> 43 </table> 44 </div> 45 </div> 46 </body> 47 </html>