1151993-1-orthogonal-block-size.html (1640B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Bug 1151993 - sizing of orthogonal block</title> 6 <style> 7 .outer { 8 width: 400px; 9 height: 300px; 10 border: 1px solid silver; 11 overflow: visible; 12 display: inline-block; 13 margin: 10px; 14 vertical-align: top; 15 } 16 .v-lr { 17 writing-mode: vertical-lr; 18 background: yellow; 19 font-weight: bold; 20 width: 100px; 21 } 22 span { 23 display: inline-block; 24 height: 40px; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="outer"> 30 <p>Lorem ipsum dolor sit amet, illum harum sed cu, ex mea delectus recteque. 31 Sit aperiri incorrupte cu. Et eam ullum minim disputando, no usu stet postea.</p> 32 <div class="v-lr"><span class="test"></span></div> <!-- single line: shrink-wrapped --> 33 <p>Cu ornatus accusam nam, minim impedit omittantur vel ne. 34 Qui detraxit temporibus contentiones te.</p> 35 </div> 36 <div class="outer"> 37 <p>Lorem ipsum dolor sit amet, illum harum sed cu, ex mea delectus recteque. 38 Sit aperiri incorrupte cu. Et eam ullum minim disputando, no usu stet postea.</p> 39 <div class="v-lr"> 40 <span></span> <span></span> <span></span> <span></span> <span></span> 41 <span></span> <span></span> <span></span> <span></span> <span></span> 42 <span></span> <span></span> <span></span> <span></span> <span></span> 43 </div> <!-- multi-line: use containing block's height as inline size --> 44 <p>Cu ornatus accusam nam, minim impedit omittantur vel ne. 45 Qui detraxit temporibus contentiones te.</p> 46 </div> 47 </body> 48 </html>