LayoutTests/fast/writing-mode/broken-ideograph-small-caps.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <title>Broken Ideographic Font</title>
   5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6
   7 <style type="text/css">
   8 @font-face {
   9     src: url(resources/MakibaFont13.ttf);
  10     font-family: MakibaFace;
  11 }
  12
  13 body {
  14   margin: 50px;
  15   font-size: 20px;
  16   font-family: MakibaFace;
  17   font-variant: small-caps;
  18 }
  19
  20 .lrblock {
  21   writing-mode: tb-lr;  /* IE */
  22   -webkit-writing-mode: vertical-lr;
  23   height: 275px;
  24   margin-bottom: 50px;
  25   padding: 1px;
  26   background-color: #eee;
  27 }
  28
  29 .basic {
  30   width: 275px;
  31   margin: 0;
  32   padding: 1px;
  33   writing-mode: lr-tb;  /* IE */
  34   -webkit-writing-mode: horizontal-tb;
  35 }
  36
  37 div.d0 {
  38   background-color: #fee;
  39 }
  40
  41 div.d1 {
  42   background-color: #ffe;
  43 }
  44 p {
  45   margin: 10% 5% 10% 5%;
  46   background-color: #faa;
  47   border-left: 20px solid #f88;
  48   border-right: 20px solid #f88;
  49   line-height: 1em;
  50   padding: 1px;
  51 }
  52
  53 .vert {
  54   writing-mode: tb-rl;  /* IE */
  55   -webkit-writing-mode: vertical-rl;
  56 }
  57
  58 </style>
  59
  60 <script type="text/javascript">
  61
  62 </script>
  63
  64 </head>
  65 <body>
  66
  67 <div class="lrblock">
  68 <div class="basic d0"><p>第一段落 Paragraph 1</p><p>第二段落 Paragraph 2</p></div>
  69 <div class="basic d1 vert"><p>第一段落 Paragraph 1</p><p>第二段落 Paragraph 2</p></div>
  70 </div>
  71
  72 </body>
  73 </html>