vert-block-size-small-or-larger-than-container-with-min-or-max-content-1.html (2631B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> 5 CSS Test: Different values of block sizing properties with max-content and min-content in vertical wm 6 </title> 7 <meta charset="utf-8"> 8 <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> 9 <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values"> 10 <link rel="match" href="vert-block-size-small-or-larger-than-container-with-min-or-max-content-1-ref.html"> 11 <meta name="flags" content="ahem"> 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 13 <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css"> 14 <style> 15 html,body { 16 margin: 0; 17 } 18 19 .container { 20 width: 200px; 21 height: 120px; 22 border: 2px solid blue; 23 writing-mode: vertical-lr; 24 } 25 26 .container > * { 27 border: 2px solid lime; 28 font-size: 15px; 29 30 font-family: Ahem; 31 font-size: 10px; 32 line-height: 15px; 33 } 34 35 .too-small { 36 width: 10px; 37 } 38 39 .too-big { 40 width: 120px; 41 } 42 </style> 43 </head> 44 <body> 45 <div style="display: inline-block;"> 46 <div class="container"> 47 <div class="width-min-content">width: min-content<br>on this box.</div> 48 <div class="width-max-content">width: max-content<br>on this box.</div> 49 </div> 50 51 <div class="container"> 52 <div class="too-small min-width-min-content"> 53 min-width: min-content<br>on this box. 54 </div> 55 <div class="too-small min-width-max-content"> 56 min-width: max-content<br>on this box. 57 </div> 58 </div> 59 60 <div class="container"> 61 <div class="too-big max-width-min-content"> 62 max-width: min-content<br>on this box. 63 </div> 64 65 <div class="too-big max-width-max-content"> 66 max-width: max-content<br>on this box. 67 </div> 68 </div> 69 </div> 70 71 <div style="display: inline-block;"> 72 <div class="container"> 73 <div class="block-min-content">block: min-content<br>on this box.</div> 74 <div class="block-max-content">block: max-content<br>on this box.</div> 75 </div> 76 77 <div class="container"> 78 <div class="too-small min-block-min-content"> 79 min-block: min-content<br>on this box. 80 </div> 81 <div class="too-small min-block-max-content"> 82 min-block: max-content<br>on this box. 83 </div> 84 </div> 85 86 <div class="container"> 87 <div class="too-big max-block-min-content"> 88 max-block: min-content<br>on this box. 89 </div> 90 91 <div class="too-big max-block-max-content"> 92 max-block: max-content<br>on this box. 93 </div> 94 </div> 95 </div> 96 </body> 97 </html>