1083848-3-inline-background-repeat.html (998B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 @font-face { 7 font-family: dejavu; 8 src: url(../fonts/DejaVuSansMono.woff); 9 } 10 .test { 11 margin: 10px; 12 border: 1px solid gray; 13 font: 16px/24px dejavu; 14 word-break: break-all; 15 width: 10em; 16 height: 6.5em; 17 /* we use text-orientation:upright to improve the chances that our 18 glyphs will have an advance of exactly 1em, as the reference 19 rendering relies on this */ 20 text-orientation: upright; 21 color: rgba(0,0,255,0.2); 22 } 23 24 .v-lr { writing-mode:vertical-lr; } 25 .v-rl { writing-mode:vertical-rl; } 26 27 .bgtest { 28 background: url(4colors.png); /* A square divided into a 2x2 grid of 4 colors; */ 29 /* only the two left squares (blue & cyan) should show */ 30 background-size: 32px; 31 } 32 </style> 33 </head> 34 35 <body> 36 37 <div class="test v-lr">ABCD<span class="bgtest">EFGHIJKLMNOPQRSTU</span>VWXYZ</div> 38 39 <div class="test v-rl">ABCD<span class="bgtest">EFGHIJKLMNOPQRSTU</span>VWXYZ</div> 40 41 </body> 42 </html>