1130907-intrinsic-sizing-2.html (2125B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Test for intrinsic sizing of float around contents with border</title> 6 <style> 7 body { font-family: sans-serif; line-height: 1.4em; } 8 .h, .v-lr, .v-rl { float: left; border: 2px solid blue; margin: 1.5em; padding: 1px; } 9 .sw { text-orientation: sideways-right; } 10 span { display: inline-block; } 11 br { clear: both; } 12 .h { writing-mode: horizontal-tb; } 13 .v-lr { writing-mode: vertical-lr; } 14 .v-rl { writing-mode: vertical-rl; } 15 .a { border-inline-start: 1.5em solid transparent; } 16 .b { border-inline-end: 1.5em solid transparent; } 17 .c { border-block-start: 1.5em solid transparent; } 18 .d { border-block-end: 1.5em solid transparent; } 19 </style> 20 </head> 21 <body> 22 <p>In each case, the blue border should neatly enclose the text.</p> 23 <div class="h"> 24 <span>12<b class="a">33</b>21</span> 25 </div> 26 <div class="h"> 27 <span>12<b class="b">33</b>21</span> 28 </div> 29 <div class="h"> 30 <span>12<b class="c">33</b>21</span> 31 </div> 32 <div class="h"> 33 <span>12<b class="d">33</b>21</span> 34 </div> 35 <br> 36 <div class="v-lr"> 37 <div>12<b class="a">33</b>21</div> 38 </div> 39 <div class="v-lr"> 40 <div>12<b class="b">33</b>21</div> 41 </div> 42 <div class="v-lr"> 43 <div>12<b class="c">33</b>21</div> 44 </div> 45 <div class="v-lr"> 46 <div>12<b class="d">33</b>21</div> 47 </div> 48 <div class="v-lr sw"> 49 <div>12<b class="c">33</b>21</div> 50 </div> 51 <div class="v-lr sw"> 52 <div>12<b class="d">33</b>21</div> 53 </div> 54 <br> 55 <div class="v-rl"> 56 <div>12<b class="a">33</b>21</div> 57 </div> 58 <div class="v-rl"> 59 <div>12<b class="b">33</b>21</div> 60 </div> 61 <div class="v-rl"> 62 <div>12<b class="c">33</b>21</div> 63 </div> 64 <div class="v-rl"> 65 <div>12<b class="d">33</b>21</div> 66 </div> 67 <div class="v-rl sw"> 68 <div>12<b class="c">33</b>21</div> 69 </div> 70 <div class="v-rl sw"> 71 <div>12<b class="d">33</b>21</div> 72 </div> 73 </body> 74 </html>