1130907-intrinsic-sizing-2-ref.html (1930B)
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 .i { inline-size: 1.5em; } 16 </style> 17 </head> 18 <body> 19 <p>In each case, the blue border should neatly enclose the text.</p> 20 <div class="h"> 21 <span>12<span class="i"></span><b>33</b>21</span> 22 </div> 23 <div class="h"> 24 <span>12<b>33</b><span class="i"></span>21</span> 25 </div> 26 <div class="h"> 27 <span>12<b>33</b>21</span> 28 </div> 29 <div class="h"> 30 <span>12<b>33</b>21</span> 31 </div> 32 <br> 33 <div class="v-lr"> 34 <span>12<span class="i"></span><b>33</b>21</span> 35 </div> 36 <div class="v-lr"> 37 <span>12<b>33</b><span class="i"></span>21</span> 38 </div> 39 <div class="v-lr"> 40 <span>12<b>33</b>21</span> 41 </div> 42 <div class="v-lr"> 43 <span>12<b>33</b>21</span> 44 </div> 45 <div class="v-lr sw"> 46 <span>12<b>33</b>21</span> 47 </div> 48 <div class="v-lr sw"> 49 <span>12<b>33</b>21</span> 50 </div> 51 <br> 52 <div class="v-rl"> 53 <span>12<span class="i"></span><b>33</b>21</span> 54 </div> 55 <div class="v-rl"> 56 <span>12<b>33</b><span class="i"></span>21</span> 57 </div> 58 <div class="v-rl"> 59 <span>12<b>33</b>21</span> 60 </div> 61 <div class="v-rl"> 62 <span>12<b>33</b>21</span> 63 </div> 64 <div class="v-rl sw"> 65 <span>12<b>33</b>21</span> 66 </div> 67 <div class="v-rl sw"> 68 <span>12<b>33</b>21</span> 69 </div> 70 </body> 71 </html>