layout/reftests/writing-mode/1083848-3-inline-background-repeat-ref.html

   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>