layout/reftests/writing-mode/1083848-1-inline-border-ref.html

   1 <!DOCTYPE html>
   2 <html lang="ja">
   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 blue;
  13   font-family: dejavu;
  14   font-size: 16px;
  15   word-break:break-all;
  16   text-orientation:upright;
  17   width:6.5em;
  18   height:6.5em;
  19 }
  20
  21 .h { writing-mode:horizontal-tb; width: 4.2em; }
  22 .v-lr { writing-mode:vertical-lr; }
  23 .v-rl { writing-mode:vertical-rl; }
  24
  25 b {
  26   background-color: yellow;
  27 }
  28
  29 .bh1 {
  30   border-left: 3px solid cyan;
  31 }
  32 .bh2 {
  33   border-right: 3px solid magenta;
  34 }
  35
  36 .bv1 {
  37   border-top: 3px solid cyan;
  38 }
  39 .bv2 {
  40   border-bottom: 3px solid magenta;
  41 }
  42 </style>
  43 </head>
  44
  45 <body>
  46
  47 <div class="test h">ABCDE<b class="bh1">F</b><b>GHIJKLMNOPQRS</b><b class="bh2">T</b>UVWXYZ</div>
  48
  49 <div class="test v-lr">ABCDE<b class="bv1">F</b><b>GHIJKLMNOPQRS</b><b class="bv2">T</b>UVWXYZ</div>
  50
  51 <div class="test v-rl">ABCDE<b class="bv1">F</b><b>GHIJKLMNOPQRS</b><b class="bv2">T</b>UVWXYZ</div>
  52
  53 </body>
  54 </html>