| <!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> |
