third_party/WebKit/LayoutTests/fast/text/orientation-sideways.html

   1 <style>
   2     body { overflow: hidden; }
   3     .vertical-rl { -webkit-writing-mode: vertical-rl; padding: 10px 0; }
   4     .vertical-lr { -webkit-writing-mode: vertical-lr; }
   5
   6     .upright { -webkit-text-orientation: upright; color: blue; }
   7     .sideways { -webkit-text-orientation: sideways; color: brown; }
   8     .sideways-right { -webkit-text-orientation: sideways-right; color: teal; }
   9
  10     .hiragino { font-family: "hiragino mincho pron"; }
  11     .times { font-family: "times"; }
  12 </style>
  13 <body style="font-size: 24px;">
  14     <!--
  15         U+653B and U+6BBB are CJK ideographs
  16         U+2307 doesn't have a separate vertical glyph in Hiragino Mincho ProN
  17         U+2307 doesn't have a separate vertical glyph in Hiragino Mincho ProN
  18         U+30FC is a CJK symbol which has a vertical glyph in Hiragino Mincho ProN
  19                which looks like a rotated version of the horizontal glyphs, with
  20                the tip pointing to the left
  21         U+FF1C is a CJK symbol which has a vertical glyph in Hiragino Mincho ProN
  22                which is identical to the horizontal glyph
  23         U+FF1D is a CJK symbol which has a vertical glyph in Hiragino Mincho ProN
  24                which is a rotated version of the horizontal glyph
  25         U+0034 has a vertical glyph in Hiragino Mincho ProN which is a rotated
  26                version of the horizontal glyph
  27     -->
  28
  29     <div class="hiragino">&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
  30
  31     <div class="vertical-rl hiragino">
  32         <div>&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
  33         <div class="upright">&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
  34         <div class="sideways-right">&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
  35         <div class="sideways">&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
  36     </div>
  37
  38     <div class="vertical-rl times">
  39         <div>&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
  40         <div class="upright">&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
  41         <div class="sideways-right">&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
  42         <div class="sideways">&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
  43     </div>
  44
  45     <div class="vertical-lr hiragino">
  46         <div>&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
  47         <div class="upright">&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
  48         <div class="sideways-right">&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
  49         <div class="sideways">&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
  50     </div>
  51 </body>