table-with-percent-intrinsic-width.html (2102B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Flexbox: table descendants</title> 5 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> 6 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1123100"> 7 <meta name="assert" content="Percentage sized flex table does not use percent for intrinsic, or layout size."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/check-layout-th.js"></script> 11 <style> 12 .container { 13 display:flex; 14 width: 200px; 15 } 16 .left { 17 width:200px; 18 background:yellow; 19 } 20 main table { 21 border-spacing: 0; 22 background: red; 23 } 24 .spacer { 25 display:inline-block; 26 width: 10px; 27 height: 10px; 28 background: green; 29 } 30 main td { 31 padding: 0; 32 } 33 </style> 34 </head> 35 <body> 36 <main> 37 <div class="container"> 38 <div class="left"> 39 </div> 40 <table style="width:100%" data-expected-width=100> 41 <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> 42 <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> 43 <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> 44 <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> 45 <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> 46 </table> 47 </div> 48 49 <div class="container"> 50 <div class="left"> 51 </div> 52 <table style="width:70%; flex-basis: 200px" data-expected-width=100> 53 <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> 54 <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> 55 <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> 56 <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> 57 <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> 58 </table> 59 </div> 60 </main> 61 <div id=log></div> 62 63 <script> 64 checkLayout("table"); 65 </script> 66 </body> 67 </html>