contain-intrinsic-size-008.html (1061B)
1 <!doctype html> 2 <meta charset="utf8"> 3 <title>CSS contain-intrinsic-size: writing modes</title> 4 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> 6 <link rel="match" href="contain-intrinsic-size-008-ref.html"> 7 <meta name="assert" content="contain-intrinsic-size specifies physical dimensions, and respects writing modes"> 8 9 <style> 10 .border { 11 border: 1px solid blue; 12 width: max-content; 13 margin: 5px; 14 } 15 16 .box { 17 background: lightblue; 18 contain-intrinsic-size: 55px 66px; 19 contain: size; 20 border-style: solid; 21 border-color: black; 22 border-width: 2px 3px 5px 7px; 23 padding: 11px 13px 17px 19px; 24 } 25 .verticalrl { 26 writing-mode: vertical-rl; 27 } 28 .verticallr { 29 writing-mode: vertical-lr; 30 } 31 .horizontaltb { 32 writing-mode: horizontal-tb; 33 } 34 </style> 35 36 <div class=border><div class="box verticalrl">Lorem</div></div> 37 <div class=border><div class="box verticallr">Ipsum</div></div> 38 <div class=border><div class="box horizontaltb">Dolor</div></div>