block-size-with-min-or-max-content-table-1a.html (1773B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: Basic cases of width/height (block axis) 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-h { height: 1px; } 34 .big-h { height: 150px; } 35 .small-w { width: 1px; } 36 .big-w { width: 150px; } 37 </style> 38 </head> 39 <body> 40 <div class="container"> 41 <table class="big-w max-width-min-content"> 42 <td><div class="item"></div></td> 43 </table> 44 <table class="big-w max-width-max-content"> 45 <td><div class="item"></div></td> 46 </table> 47 48 <table class="small-w min-width-min-content"> 49 <td><div class="item"></div></td> 50 </table> 51 <table class="small-w min-width-max-content"> 52 <td><div class="item"></div></td> 53 </table> 54 </div> 55 56 <table class="big-h max-height-min-content"> 57 <td><div class="item"></div></td> 58 </table> 59 <table class="big-h max-height-max-content"> 60 <td><div class="item"></div></td> 61 </table> 62 63 <table class="small-h min-height-min-content"> 64 <td><div class="item"></div></td> 65 </table> 66 <table class="small-h min-height-max-content"> 67 <td><div class="item"></div></td> 68 </table> 69 </body> 70 </html>