| <!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; |
| } |
| #container :nth-child(1) { |
| font: 24px/1 ahem; |
| border-width: 4px 10px 6px 8px; |
| border-style: solid; |
| padding: 12px 6px 14px 6px; |
| margin: 20px 12px 8px 24px; |
| } |
| #container :nth-child(2) { |
| font: 40px/1 ahem; |
| border-width: 8px 6px 10px 4px; |
| border-style: solid; |
| padding: 6px 12px 16px 14px; |
| margin: 12px 20px 24px 8px; |
| } |
| #container :nth-child(3) { |
| font: 60px/1 ahem; |
| border-width: 2px 5px 3px 4px; |
| border-style: solid; |
| padding: 6px 3px 12px 8px; |
| margin: 10px 6px 4px 12px; |
| } |
| #container :nth-child(4) { |
| font: 80px/1 ahem; |
| border-width: 12px 6px 14px 16px; |
| border-style: solid; |
| padding: 20px 12px 8px 24px; |
| margin: 4px 10px 6px 8px; |
| } |
| #container > div { display: inline-block; } |
| #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> |
