1130907-intrinsic-sizing-1.html (1674B)
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 .a { border-inline-start: 2em solid #ff0; } 15 .b { border-inline-end: 2em solid #ff0; } 16 .c { border-block-start: 2em solid #ff0; } 17 .d { border-block-end: 2em solid #ff0; } 18 </style> 19 </head> 20 <body> 21 <p>In each case, the blue border should neatly enclose the text and its yellow border-block.</p> 22 <div class="h"> 23 <span class="a">123321</span> 24 </div> 25 <div class="h"> 26 <span class="b">123321</span> 27 </div> 28 <div class="h"> 29 <span class="c">123321</span> 30 </div> 31 <div class="h"> 32 <span class="d">123321</span> 33 </div> 34 <br> 35 <div class="v-lr"> 36 <span class="a">123321</span> 37 </div> 38 <div class="v-lr"> 39 <span class="b">123321</span> 40 </div> 41 <div class="v-lr"> 42 <span class="c">123321</span> 43 </div> 44 <div class="v-lr"> 45 <span class="d">123321</span> 46 </div> 47 <br> 48 <div class="v-rl"> 49 <span class="a">123321</span> 50 </div> 51 <div class="v-rl"> 52 <span class="b">123321</span> 53 </div> 54 <div class="v-rl"> 55 <span class="c">123321</span> 56 </div> 57 <div class="v-rl"> 58 <span class="d">123321</span> 59 </div> 60 </body> 61 </html>