1083848-3-inline-background-repeat-ref.html (1573B)
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 .c { background: cyan; } 28 .b { background: blue; } 29 </style> 30 </head> 31 32 <body> 33 34 <div class="test v-lr">ABCD<span class="c">E</span><span class="b">F</span><span 35 class="c">G</span><span class="b">H</span><span class="c">I</span><span 36 class="b">J</span><span class="c">K</span><span class="b">L</span><span 37 class="c">M</span><span class="b">N</span><span class="c">O</span><span 38 class="b">P</span><span class="c">Q</span><span class="b">R</span><span 39 class="c">S</span><span class="b">T</span><span class="c">U</span>VWXYZ</div> 40 41 <div class="test v-rl">ABCD<span class="c">E</span><span class="b">F</span><span 42 class="c">G</span><span class="b">H</span><span class="c">I</span><span 43 class="b">J</span><span class="c">K</span><span class="b">L</span><span 44 class="c">M</span><span class="b">N</span><span class="c">O</span><span 45 class="b">P</span><span class="c">Q</span><span class="b">R</span><span 46 class="c">S</span><span class="b">T</span><span class="c">U</span>VWXYZ</div> 47 48 </body> 49 </html>