third_party/WebKit/LayoutTests/fast/writing-mode/vertical-font-vmtx-units-per-em.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <title>Vertical text using font with vmtx table and units per em</title>
   5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6 <style type="text/css">
   7 @font-face {
   8     font-family: 'droid';
   9     /* DroidSansFallback-reduced.ttf was generated based on Android's
  10        DroidSansFallback.ttf by removing many glyphs to meet the size
  11        requirement of web font face.
  12        It contains a vmtx table and units per pm 256 which is different
  13        from the default value 1000. */
  14     src: url('resources/DroidSansFallback-reduced.ttf');
  15 }
  16 #test {
  17     font-size: 25px;
  18     font-family: droid;
  19     -webkit-writing-mode: vertical-rl;
  20 }
  21 </style>
  22 <script>
  23 if (window.testRunner) {
  24     testRunner.waitUntilDone();
  25     testRunner.dumpAsText();
  26 }
  27
  28 function test() {
  29     var height = document.getElementById("test").offsetHeight;
  30     // If the units per em in the font is not respected, the height of the
  31     // test div will be much smaller than 25*7.
  32     document.getElementById("result").innerText = height >= 25*7 ? "PASS" : "FAIL";
  33     if (window.testRunner)
  34         testRunner.notifyDone();
  35 }
  36
  37 window.onload = function() {
  38     document.body.offsetTop;
  39     setTimeout(test, 100);
  40 }
  41 </script>
  42 </head>
  43 <body>
  44 The characters in the vertical div should not overlap.
  45 <div id="result"></div>
  46 <div id="test">
  47 &#x4e00;&#x4e01;&#x4e02;&#x4e03;&#x4e04;&#x4e05;&#x4e06;
  48 </div>
  49 </body>