| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <title>Vertical text using font with vmtx table and units per em</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| <style type="text/css"> |
| @font-face { |
| font-family: 'droid'; |
| /* DroidSansFallback-reduced.ttf was generated based on Android's |
| DroidSansFallback.ttf by removing many glyphs to meet the size |
| requirement of web font face. |
| It contains a vmtx table and units per pm 256 which is different |
| from the default value 1000. */ |
| src: url('resources/DroidSansFallback-reduced.ttf'); |
| } |
| #test { |
| font-size: 25px; |
| font-family: droid; |
| -webkit-writing-mode: vertical-rl; |
| } |
| </style> |
| <script> |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| testRunner.dumpAsText(); |
| } |
| |
| function test() { |
| var height = document.getElementById("test").offsetHeight; |
| // If the units per em in the font is not respected, the height of the |
| // test div will be much smaller than 25*7. |
| document.getElementById("result").innerText = height >= 25*7 ? "PASS" : "FAIL"; |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| |
| window.onload = function() { |
| document.body.offsetTop; |
| setTimeout(test, 100); |
| } |
| </script> |
| </head> |
| <body> |
| The characters in the vertical div should not overlap. |
| <div id="result"></div> |
| <div id="test"> |
| 一丁丂七丄丅丆 |
| </div> |
| </body> |
