blob: 36900ca5cbc36d442df335088a7488b690170bfc [file] [log] [blame]
<!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-rl;
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: 85px;
top: 20px;
}
#container :nth-child(2) {
font: 40px/1 ahem;
border-width: 8px 6px 10px 4px;
border-style: solid;
padding: 6px 12px 16px 14px;
left: 132px;
top: 100px;
}
#container :nth-child(3) {
font: 60px/1 ahem;
border-width: 2px 5px 3px 4px;
border-style: solid;
padding: 6px 3px 12px 8px;
left: 134px;
top: 214px;
}
#container :nth-child(4) {
font: 80px/1 ahem;
border-width: 12px 6px 14px 16px;
border-style: solid;
padding: 20px 12px 8px 24px;
left: 102px;
top: 305px;
}
#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 VerticalRL and LTR container</p>
<div id="container">
<div>É</div><div>É</div><div>É</div><div>É</div>
</div>