<!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">
&#x4e00;&#x4e01;&#x4e02;&#x4e03;&#x4e04;&#x4e05;&#x4e06;
</div>
</body>