<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Vertical text metrics test</title>
<script>
function print(message)
{
    var paragraph = document.createElement("li");
    paragraph.appendChild(document.createTextNode(message));
    document.getElementById("console").appendChild(paragraph);
}
function test()
{
    if (window.testRunner)
        testRunner.dumpAsText();

    var pElems = document.getElementsByTagName("span");
    for ( i = 0 ; i < pElems.length ; ++i )
    {
        var elem = pElems[i];
        print("width=" + elem.offsetWidth);
    }
}
</script>
<style>
body {
    font-family: "HiraMinPro-W3";
    font-size: 16pt;
}
#horizontal_TB {
    -webkit-writing-mode: horizontal-tb;
}
#horizontal_BT {
    -webkit-writing-mode: horizontal-bt;
}
#vertical_RL {
    -webkit-writing-mode: vertical-rl;
}
#vertical_LR {
    -webkit-writing-mode: vertical-lr;
}
#horizontal_TB_complex {
    -webkit-writing-mode: horizontal-tb;
    text-rendering: optimizelegibility;
}
#horizontal_BT_complex {
    -webkit-writing-mode: horizontal-bt;
    text-rendering: optimizelegibility;
}
#vertical_RL_complex {
    -webkit-writing-mode: vertical-rl;
    text-rendering: optimizelegibility;
}
#vertical_LR_complex {
    -webkit-writing-mode: vertical-lr;
    text-rendering: optimizelegibility;
}
</style>
</head>
<body onload="test()">
<p>Simple text path</p>
<span id="horizontal_TB">string「あ、変っ！」。</span><br>
<span id="horizontal_BT">string「あ、変っ！」。</span><br>
<span id="vertical_RL">string「あ、変っ！」。</span><br>
<span id="vertical_LR">string「あ、変っ！」。</span><br>
<br>
<hr>
<p>Complex text path</p>
<span id="horizontal_TB_complex">string「あ、変っ！」。</span><br>
<span id="horizontal_BT_complex">string「あ、変っ！」。</span><br>
<span id="vertical_RL_complex">string「あ、変っ！」。</span><br>
<span id="vertical_LR_complex">string「あ、変っ！」。</span><br>
<br>
<hr>
<p><ol id=console></ol></p>
</body>
</html>