third_party/WebKit/LayoutTests/fast/writing-mode/broken-ideographic-font.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 }
  18
  19 .lrblock {
  20   writing-mode: tb-lr;  /* IE */
  21   -webkit-writing-mode: vertical-lr;
  22   height: 275px;
  23   margin-bottom: 50px;
  24   padding: 1px;
  25   background-color: #eee;
  26 }
  27
  28 .basic {
  29   width: 275px;
  30   margin: 0;
  31   padding: 1px;
  32   writing-mode: lr-tb;  /* IE */
  33   -webkit-writing-mode: horizontal-tb;
  34 }
  35
  36 div.d0 {
  37   background-color: #fee;
  38 }
  39
  40 div.d1 {
  41   background-color: #ffe;
  42 }
  43 p {
  44   margin: 10% 5% 10% 5%;
  45   background-color: #faa;
  46   border-left: 20px solid #f88;
  47   border-right: 20px solid #f88;
  48   line-height: 1em;
  49   padding: 1px;
  50 }
  51
  52 .vert {
  53   writing-mode: tb-rl;  /* IE */
  54   -webkit-writing-mode: vertical-rl;
  55 }
  56
  57 </style>
  58 </head>
  59 <body>
  60
  61 <div class="lrblock">
  62 <div class="basic d0"><p>第一段落 paragraph 1</p><p>第二段落 paragraph 2</p></div>
  63 <div class="basic d1 vert"><p>第一段落 paragraph 1</p><p>第二段落 paragraph 2</p></div>
  64 </div>
  65 <script>
  66     if (window.testRunner)
  67         testRunner.waitUntilDone();
  68
  69     document.body.offsetTop;
  70     var image = new Image();
  71     image.addEventListener("error", function() { if (testRunner) testRunner.notifyDone(); });
  72     image.src = "resources/MakibaFont13.ttf";
  73 </script>
  74 </body>
  75 </html>