block-size-with-min-or-max-content-table-1b.html (1684B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: Basic cases of block-size with max-content and min-content in a table</title> 5 <meta charset="utf-8"> 6 <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> 7 <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values"> 8 <link rel="match" href="block-size-with-min-or-max-content-table-1-ref.html"> 9 <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css"> 10 <style> 11 html,body { 12 margin: 0; 13 } 14 15 table { 16 border: 2px solid black; 17 } 18 19 td { 20 border: 2px solid lime; 21 } 22 23 .item { 24 height: 50px; 25 width: 50px; 26 border: 1px solid blue; 27 } 28 29 .container { 30 writing-mode: vertical-lr; 31 } 32 33 .small { block-size: 1px; } 34 .big { block-size: 150px; } 35 </style> 36 </head> 37 <body> 38 <div class="container"> 39 <table class="big max-block-min-content"> 40 <td><div class="item"></div></td> 41 </table> 42 <table class="big max-block-max-content"> 43 <td><div class="item"></div></td> 44 </table> 45 46 <table class="small min-block-min-content"> 47 <td><div class="item"></div></td> 48 </table> 49 <table class="small min-block-max-content"> 50 <td><div class="item"></div></td> 51 </table> 52 </div> 53 54 <table class="big max-block-min-content"> 55 <td><div class="item"></div></td> 56 </table> 57 <table class="big max-block-max-content"> 58 <td><div class="item"></div></td> 59 </table> 60 61 <table class="small min-block-min-content"> 62 <td><div class="item"></div></td> 63 </table> 64 <table class="small min-block-max-content"> 65 <td><div class="item"></div></td> 66 </table> 67 </body> 68 </html>