<!DOCTYPE html>
<html>
    <head>
        <style>
            ruby { border: solid 5px cyan; }
        </style>
    </head>
    <body>
        Ruby text should be at the center of ruby base.
        <div id="test1" >
            <ruby>aaaaa<rt>b</rt></ruby><br>
        </div>
        <hr>
        <div id="test2" >
            <ruby>a<rt>bbbb</rt></ruby><br>
        </div>
        <hr>
        <div id="test3" style="-webkit-writing-mode: vertical-rl;">
            <ruby>aaaaa<rt>b</rt></ruby><br>
        </div>
        <hr>
        <div id="test4" style="-webkit-writing-mode: vertical-rl;">
            <ruby>a<rt>bbbb</rt></ruby><br>
        </div>
        <script>
            setTimeout(function () {
                var verticalElement = document.getElementById("test1");
                verticalElement.setAttribute("style", "-webkit-writing-mode: vertical-rl;");
                verticalElement = document.getElementById("test2");
                verticalElement.setAttribute("style", "-webkit-writing-mode: vertical-rl;");
                var horizontalElement = document.getElementById("test3");
                horizontalElement.setAttribute("style", "");
                horizontalElement = document.getElementById("test4");
                horizontalElement.setAttribute("style", "");
                if (window.testRunner) {
                    testRunner.notifyDone();
                }
            }, 0);
            if (window.testRunner) {
                testRunner.waitUntilDone();
            }
    </script>
  </body>
</html>
