1130907-intrinsic-sizing-1-ref.html (1979B)
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 div { float: left; border: 2px solid blue; margin: 5px; padding: 1px; } 9 span { display: inline-block; } 10 br { clear: both; } 11 .h { writing-mode: horizontal-tb; } 12 .v-lr { writing-mode: vertical-lr; } 13 .v-rl { writing-mode: vertical-rl; } 14 .y { background: yellow; color: transparent; } 15 .i { inline-size: 2em; } 16 .b { block-size: 2em; inline-size: 100%; } 17 </style> 18 </head> 19 <body> 20 <p>In each case, the blue border should neatly enclose the text and its yellow border-block.</p> 21 <div class="h"> 22 <span><span class="y i" style="inline-size:2em;">x</span>123321</span> 23 </div> 24 <div class="h"> 25 <span>123321<span class="y i" style="inline-size:2em;">x</span></span> 26 </div> 27 <div class="h"> 28 <span><span class="y b">x</span><br>123321</span> 29 </div> 30 <div class="h"> 31 <span>123321<br><span class="y b">x</span></span> 32 </div> 33 <br> 34 <div class="v-lr"> 35 <span><span class="y i" style="inline-size:2em;">x</span>123321</span> 36 </div> 37 <div class="v-lr"> 38 <span>123321<span class="y i" style="inline-size:2em;">x</span></span> 39 </div> 40 <div class="v-lr"> 41 <span><span class="y b">x</span><br>123321</span> 42 </div> 43 <div class="v-lr"> 44 <span>123321<br><span class="y b">x</span></span> 45 </div> 46 <br> 47 <div class="v-rl"> 48 <span><span class="y i" style="inline-size:2em;">x</span>123321</span> 49 </div> 50 <div class="v-rl"> 51 <span>123321<span class="y i" style="inline-size:2em;">x</span></span> 52 </div> 53 <div class="v-rl"> 54 <span><span class="y b">x</span><br>123321</span> 55 </div> 56 <div class="v-rl"> 57 <span>123321<br><span class="y b">x</span></span> 58 </div> 59 </body> 60 </html>