<!DOCTYPE html>
<meta charset="utf-8">
<style>
body { font: 10px/1 monospace; }
#container {
position: relative;
background: grey;
-webkit-text-orientation: sideways;
width: 250px;
height: 500px;
writing-mode: vertical-lr;
direction: rtl;
}
#container :nth-child(1) {
font: 24px/1 ahem;
border-width: 4px 10px 6px 8px;
border-style: solid;
padding: 12px 6px 14px 6px;
left: 24px;
top: 432px;
#container :nth-child(2) {
font: 40px/1 ahem;
border-width: 8px 6px 10px 4px;
padding: 6px 12px 16px 14px;
left: 71px;
top: 308px;
#container :nth-child(3) {
font: 60px/1 ahem;
border-width: 2px 5px 3px 4px;
padding: 6px 3px 12px 8px;
left: 73px;
top: 209px;
#container :nth-child(4) {
font: 80px/1 ahem;
border-width: 12px 6px 14px 16px;
padding: 20px 12px 8px 24px;
left: 41px;
top: 59px;
#container > div { position: absolute; }
#container :nth-child(1) { padding-left: 60px; }
#container :nth-child(3) { padding-right: 30px; }
</style>
<p>Test verifying inline-block elements with extra padding are baseline aligned in a VerticalLR and RTL container</p>
<div id="container">
<div>É</div><div>É</div><div>É</div><div>É</div>
</div>
